/* ============================================================
   THE RULEBOOK — Core Five  |  styles.css
   ============================================================ */

/* Global reset for a full-screen single-page experience.
   If you later add scrolling content below the map, remove
   "overflow: hidden" from body. */
html, body { margin: 0; padding: 0; }
body { background: #0a0908; overflow: hidden; }


    .rb-core-five-module {
      --bg: #0a0908;
      --gold: #c9a84c;
      --gold-light: #e8c96a;
      --cream: #f0e6d0;
      --rust: #b5451b;
      --sage: #5a7a5e;
      --lavender: #8a7fa8;
      --muted: #5a5550;
      --panel: #131210;
      --border: rgba(201,168,76,0.15);
      --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
      --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
      --bg-pan-x: 0px; /* background video horizontal pan (mobile override below) */

      /*
        Make the module span the entire viewport width and height by fixing
        it to the viewport. This breaks out of GoDaddy's section container
        even when it has a max‑width or overflow restrictions. Negative
        margins are no longer required.
      */
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100vw;
      height: 100vh;
      margin: 0;
      background: var(--bg);
      color: var(--cream);
      font-family: var(--font-body);
      overflow: hidden;
      isolation: isolate;
    }

    .rb-core-five-module *,
    .rb-core-five-module *::before,
    .rb-core-five-module *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* BACKGROUND VIDEO (Vimeo, cover-fit) + SCRIM (sit behind everything) */
    .rb-cf-bg-video {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }
    /* Cover-fit: the 16:9 player is scaled to always overflow the box in both
       directions and centered, so there are never letterbox bars. */
    .rb-cf-bg-frame {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(calc(-50% + var(--bg-pan-x)), -50%);
      width: 100vw;
      height: 56.25vw;       /* 16:9 derived from width */
      min-width: 177.78vh;   /* 16:9 derived from height (covers tall/narrow) */
      min-height: 100vh;
      border: 0;
      pointer-events: none;
    }
    /* Vertical (9:16) mobile clip needs its own cover math to fill a portrait phone. */
    .rb-core-five-module.is-narrow .rb-cf-bg-frame {
      width: 100vw;
      height: 177.78vw;     /* 9:16 derived from width */
      min-width: 56.25vh;   /* 9:16 derived from height */
      min-height: 100vh;
    }
    .rb-cf-bg-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to bottom, rgba(10,9,8,0.80), rgba(10,9,8,0.60) 45%, rgba(10,9,8,0.84));
      pointer-events: none;
    }

    /* Grain overlay (subtle, on top, never blocks clicks) */
    .rb-core-five-module::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 30;
      opacity: 0.35;
    }

    #rb-core-five-header {
      position: absolute;
      top: 0; left: 0; right: 0;
      padding: 16px 26px;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      z-index: 20;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(to bottom, rgba(10,9,8,0.95), transparent);
      pointer-events: none;
      /* Reserve space on the right for the IMDb badge so the names don't overlap it */
      padding-right: 120px;
    }
    #rb-core-five-header h1 {
      font-family: var(--font-display);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
    }
    #rb-core-five-header p {
      font-size: 9px;
      letter-spacing: 0.2em;
      color: var(--muted);
      text-transform: uppercase;
      text-align: right;
    }

    /* IMDb link styling (top right corner) */
    #rb-imdb-link {
      position: absolute;
      top: 16px;
      right: 20px;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }
    /* Yellow IMDb badge recreated in CSS */
    #rb-imdb-link .imdb-logo {
      display: inline-block;
      background: #f5c518;
      color: #000;
      font-family: 'Arial Black', Arial, sans-serif;
      font-weight: 700;
      font-size: 10px;
      padding: 3px 6px;
      border-radius: 2px;
    }
    #rb-imdb-link:hover .imdb-logo {
      background: #f9d84b;
    }

    /* Credits tag at the bottom */
    #rb-core-five-credits {
      position: absolute;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      white-space: nowrap;
      font-family: var(--font-body);
      font-size: 9px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      z-index: 15;
      pointer-events: none;
    }

    /* When the panel is open, hide the IMDb link to prevent overlap */
    .rb-core-five-module.panel-open #rb-imdb-link {
      display: none;
    }

    /* Responsive overrides for narrow / mobile screens */
    .rb-core-five-module.is-narrow #rb-core-five-header {
      /* Reset right padding on small screens */
      padding-right: 18px;
    }
    .rb-core-five-module.is-narrow #rb-imdb-link {
      top: 12px;
      right: 18px;
    }
    .rb-core-five-module.is-narrow #rb-imdb-link .imdb-logo {
      font-size: 8px;
      padding: 2px 4px;
    }
    .rb-core-five-module.is-narrow #rb-core-five-credits {
      /* On small screens the browser URL bar overlaps the bottom of the
         viewport. Increase the offset so the "A film by Forte" credit
         sits comfortably above the bar. */
      bottom: 72px;
      font-size: 7.5px;
      letter-spacing: 0.18em;
    }
    .rb-core-five-module.is-narrow #rb-core-five-contact {
      /* Center the contact links and lift them higher above the mobile
         browser chrome. The extra offset keeps them visible when
         browser UI elements appear. */
      left: 50%; right: auto;
      transform: translateX(-50%);
      bottom: 44px;
    }
    .rb-core-five-module.is-narrow #rb-core-five-copyright {
      display: block;
      left: 50%; right: auto;
      transform: translateX(-50%);
      /* Move the copyright above the safe area to avoid overlap with
         mobile browser controls. */
      bottom: 20px;
      text-align: center;
    }

    #rb-core-five-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    #rb-core-five-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 5;
    }

    .rb-cf-node {
      position: absolute;
      transform: translate(-50%, -50%);
      cursor: pointer;
      z-index: 10;
    }
    .rb-cf-node-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .rb-cf-node:hover .rb-cf-node-inner { transform: scale(1.08); }

    .rb-cf-node-ring {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background: var(--panel);
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    .rb-cf-node:hover .rb-cf-node-ring,
    .rb-cf-node.rb-cf-active .rb-cf-node-ring {
      border-color: var(--gold);
      box-shadow: 0 0 28px rgba(201,168,76,0.3), 0 0 56px rgba(201,168,76,0.1);
    }
    .rb-cf-node.rb-cf-active .rb-cf-node-ring::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 1px solid var(--gold);
      animation: rb-cf-pulse 2s ease-out infinite;
    }
    @keyframes rb-cf-pulse {
      0% { transform: scale(1); opacity: 0.5; }
      100% { transform: scale(1.5); opacity: 0; }
    }

    .rb-cf-node-initial {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      color: var(--cream);
    }
    /* Profile photo fills the ring and sits over the letter. If it fails to load, the letter shows. */
    .rb-cf-node-photo {
      /* The profile photo sits above the initial but starts hidden.  On
         hover or when a node is active, it fades in to reveal the
         character’s face.  If no image is provided the letter
         underneath remains visible. */
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    /* When hovering over a node or when a node becomes active (panel
       open) reveal the photo and fade out the letter. */
    .rb-cf-node:hover .rb-cf-node-photo,
    .rb-cf-node.rb-cf-active .rb-cf-node-photo {
      opacity: 1;
    }
    .rb-cf-node:hover .rb-cf-node-initial,
    .rb-cf-node.rb-cf-active .rb-cf-node-initial {
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .rb-cf-node-name {
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      white-space: nowrap;
      transition: color 0.2s;
    }
    .rb-cf-node:hover .rb-cf-node-name,
    .rb-cf-node.rb-cf-active .rb-cf-node-name { color: var(--gold-light); }

    .rb-cf-node-role {
      font-size: 7.5px;
      letter-spacing: 0.06em;
      color: var(--muted);
      white-space: nowrap;
      font-style: italic;
      opacity: 0.55;
    }

    .rb-cf-node[data-id="tyrese"] .rb-cf-node-ring { border-color: rgba(201,168,76,0.35); }
    .rb-cf-node[data-id="tyrese"] .rb-cf-node-initial { color: var(--gold-light); }
    .rb-cf-node[data-id="imani"]  .rb-cf-node-ring { border-color: rgba(201,168,76,0.35); }
    .rb-cf-node[data-id="imani"]  .rb-cf-node-initial { color: var(--gold-light); }
    .rb-cf-node[data-id="k"]      .rb-cf-node-ring { border-color: rgba(90,122,94,0.35); }
    .rb-cf-node[data-id="k"]      .rb-cf-node-initial { color: #8ab88e; }
    .rb-cf-node[data-id="kelsi"]  .rb-cf-node-ring { border-color: rgba(181,69,27,0.35); }
    .rb-cf-node[data-id="kelsi"]  .rb-cf-node-initial { color: #d4856a; }
    .rb-cf-node[data-id="nathan"] .rb-cf-node-ring { border-color: rgba(138,127,168,0.35); }
    .rb-cf-node[data-id="nathan"] .rb-cf-node-initial { color: #b0a8c8; }

    .rb-cf-node.rb-cf-dimmed { opacity: 0.15; }

    #rb-core-five-panel {
      position: absolute;
      right: 0; top: 0; bottom: 0;
      width: 320px;
      max-width: 86%;
      background: var(--panel);
      border-left: 1px solid var(--border);
      z-index: 40;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
      overflow-y: auto;
      padding: 64px 24px 36px;
      -webkit-overflow-scrolling: touch;
    }
    #rb-core-five-panel.rb-cf-open { transform: translateX(0); }

    #rb-core-five-panel-close {
      position: absolute;
      top: 16px; right: 16px;
      background: none;
      border: 1px solid var(--border);
      color: var(--muted);
      width: 30px; height: 30px;
      /* Use a common sans-serif font for the close icon so characters like × display correctly */
      font-family: Arial, sans-serif;
      font-size: 12px;
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s;
      display: flex; align-items: center; justify-content: center;
      z-index: 2;
    }
    #rb-core-five-panel-close:hover { border-color: var(--gold); color: var(--gold); }

    #rb-core-five-panel-name {
      font-family: var(--font-display);
      font-size: 27px;
      font-weight: 700;
      color: var(--cream);
      margin-bottom: 3px;
      line-height: 1.1;
    }
    #rb-core-five-panel-subtitle {
      font-size: 8.5px;
      letter-spacing: 0.18em;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .rb-panel-photo {
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 4px;
      margin-bottom: 18px;
      border: 1px solid var(--border);
      background: rgba(10, 9, 8, 0.6);
    }
    .rb-panel-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .rb-cf-panel-section { margin-bottom: 18px; }
    .rb-cf-panel-label {
      font-size: 7.5px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 5px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 4px;
    }
    .rb-cf-panel-text {
      font-size: 11px;
      line-height: 1.75;
      color: rgba(240,230,208,0.72);
    }
    .rb-cf-panel-tags {
      display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px;
    }
    .rb-cf-tag {
      font-size: 7.5px;
      letter-spacing: 0.1em;
      padding: 3px 8px;
      border: 1px solid var(--border);
      color: var(--muted);
      text-transform: uppercase;
    }

    .rb-cf-conn-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
    }
    .rb-cf-conn-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .rb-cf-conn-dot {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 10px;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .rb-cf-conn-name {
      font-size: 9px;
      letter-spacing: 0.1em;
      color: var(--gold-light);
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    .rb-cf-conn-type {
      font-size: 7.5px;
      letter-spacing: 0.08em;
      font-style: italic;
      color: var(--muted);
      text-transform: none;
    }
    .rb-cf-conn-desc {
      font-size: 10px;
      color: rgba(240,230,208,0.6);
      line-height: 1.55;
    }

    #rb-core-five-logline {
      position: absolute;
      top: 78px;
      left: 26px;
      max-width: 400px;
      z-index: 15;
      font-family: var(--font-body);
      font-size: 13px;
      line-height: 1.7;
      letter-spacing: 0.01em;
      color: rgba(240,230,208,0.82);
      text-shadow: 0 1px 14px rgba(0,0,0,0.65);
      pointer-events: none;
    }
    .rb-core-five-module.is-narrow #rb-core-five-logline {
      top: 60px;
      left: 18px;
      right: 18px;
      max-width: none;
      font-size: 11px;
      line-height: 1.6;
    }

    #rb-core-five-legend {
      position: absolute;
      bottom: 14px; left: 14px;
      z-index: 15;
      display: flex;
      flex-direction: column;
      gap: 9px;
      pointer-events: auto;
      padding: 14px 20px;
      border: 1px solid transparent;
      border-radius: 2px;
      transition: background 0.3s ease, border-color 0.3s ease;
    }
    #rb-core-five-legend .rb-cf-legend-head,
    #rb-core-five-legend .rb-cf-legend-item { transition: color 0.3s ease; }
    #rb-core-five-legend:hover { background: rgba(10,9,8,0.78); border-color: var(--border); }
    #rb-core-five-legend:hover .rb-cf-legend-head { color: var(--gold); }
    #rb-core-five-legend:hover .rb-cf-legend-item { color: var(--cream); }
    .rb-cf-legend-head {
      font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 2px;
    }
    .rb-cf-legend-item {
      display: flex; align-items: center; gap: 12px;
      font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted);
    }
    .rb-cf-legend-item svg { width: 36px; }

    #rb-core-five-hint {
      position: absolute;
      bottom: 72px; right: 22px;
      font-size: 8px;
      letter-spacing: 0.1em;
      color: var(--muted);
      text-align: right;
      z-index: 15;
      line-height: 1.8;
      pointer-events: none;
    }
    #rb-core-five-contact {
      position: absolute;
      bottom: 40px; right: 22px;
      z-index: 15;
      display: flex;
      align-items: center;
      gap: 10px;
      pointer-events: auto;
    }
    #rb-core-five-contact a {
      color: rgba(240, 230, 208, 0.78);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      transition: color 0.25s ease;
    }
    #rb-core-five-contact a:hover { color: var(--gold); }
    #rb-core-five-contact .rb-cf-ig svg { display: block; }
    #rb-core-five-contact .rb-cf-email {
      font-family: var(--font-body);
      font-size: 9px;
      letter-spacing: 0.1em;
    }

    #rb-core-five-copyright {
      position: absolute;
      bottom: 18px; right: 22px;
      font-family: var(--font-body);
      font-size: 8px;
      letter-spacing: 0.14em;
      color: var(--muted);
      text-align: right;
      white-space: nowrap;
      z-index: 15;
      pointer-events: none;
    }

    #rb-core-five-edge-tooltip {
      position: absolute;
      background: rgba(19,18,16,0.97);
      border: 1px solid var(--border);
      padding: 9px 13px;
      font-size: 9px;
      letter-spacing: 0.05em;
      color: var(--cream);
      pointer-events: none;
      z-index: 25;
      display: none;
      max-width: 210px;
      line-height: 1.55;
    }
    #rb-core-five-edge-tooltip .rb-cf-et-pair {
      font-family: var(--font-display);
      font-size: 12px;
      color: var(--gold-light);
      margin-bottom: 3px;
    }

    .rb-cf-edge { pointer-events: stroke; cursor: pointer; stroke-linecap: round; transition: stroke-opacity 0.45s ease, stroke-width 0.3s ease; }
    .rb-cf-edge-core    { stroke: rgba(201,168,76,0.65); }
    .rb-cf-edge-tension { stroke: rgba(181,69,27,0.6); }
    .rb-cf-edge-support { stroke: rgba(90,122,94,0.6); stroke-dasharray: 5 4; }
    .rb-cf-edge-foil    { stroke: rgba(100,100,100,0.55); stroke-dasharray: 6 4; }
    .rb-cf-edge-mirror  { stroke: rgba(138,127,168,0.5); stroke-dasharray: 2 6; }
    .rb-cf-edge:hover   { stroke-opacity: 1 !important; stroke-width: 2.5 !important; }
    /* Focus states when a character is selected */
    .rb-cf-edge-on  { stroke-opacity: 1 !important; stroke-width: 2.4 !important; }
    .rb-cf-edge-off { stroke-opacity: 0.07 !important; }

    /* ===== CONTACT BUTTON + PANEL + FORM ===== */
    #rb-contact-btn {
      position: absolute;
      top: 16px; right: 78px;
      z-index: 50;
      background: rgba(19,18,16,0.6);
      border: 1px solid var(--border);
      color: var(--cream);
      font-family: var(--font-body);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 2px;
      cursor: pointer;
      transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
    }
    #rb-contact-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(19,18,16,0.85); }
    .rb-core-five-module.contact-open #rb-contact-btn,
    .rb-core-five-module.contact-open #rb-imdb-link,
    .rb-core-five-module.panel-open #rb-contact-btn { display: none; }

    #rb-contact-panel {
      position: absolute;
      right: 0; top: 0; bottom: 0;
      width: 360px;
      max-width: 88%;
      background: var(--panel);
      border-left: 1px solid var(--border);
      z-index: 45;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
      overflow-y: auto;
      padding: 64px 28px 36px;
      -webkit-overflow-scrolling: touch;
    }
    #rb-contact-panel.rb-cf-open { transform: translateX(0); }
    #rb-contact-close {
      position: absolute;
      top: 16px; right: 16px;
      background: none;
      border: 1px solid var(--border);
      color: var(--muted);
      width: 30px; height: 30px;
      font-family: Arial, sans-serif;
      font-size: 12px;
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s;
      display: flex; align-items: center; justify-content: center;
    }
    #rb-contact-close:hover { border-color: var(--gold); color: var(--gold); }
    #rb-contact-title {
      font-family: var(--font-display);
      font-size: 26px; font-weight: 700;
      color: var(--cream); margin-bottom: 3px; line-height: 1.1;
    }
    #rb-contact-sub {
      font-size: 8.5px; letter-spacing: 0.18em;
      color: var(--gold); text-transform: uppercase; margin-bottom: 24px;
    }
    #rb-contact-form label {
      display: block;
      font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 16px;
    }
    #rb-contact-form input[type="text"],
    #rb-contact-form input[type="email"],
    #rb-contact-form textarea {
      display: block; width: 100%; margin-top: 6px;
      background: rgba(10,9,8,0.6);
      border: 1px solid var(--border);
      color: var(--cream);
      font-family: var(--font-body);
      font-size: 12px; padding: 9px 10px; border-radius: 2px;
      transition: border-color 0.2s ease;
    }
    #rb-contact-form input:focus,
    #rb-contact-form textarea:focus { outline: none; border-color: var(--gold); }
    #rb-contact-form textarea { resize: vertical; }
    #rb-contact-submit {
      width: 100%; margin-top: 4px;
      background: var(--gold); border: none; color: #0a0908;
      font-family: var(--font-body);
      font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
      padding: 12px; border-radius: 2px; cursor: pointer;
      transition: background 0.25s ease;
    }
    #rb-contact-submit:hover { background: var(--gold-light); }
    #rb-contact-submit:disabled { opacity: 0.5; cursor: default; }
    #rb-contact-status {
      margin-top: 14px; min-height: 14px;
      font-size: 10px; line-height: 1.6; letter-spacing: 0.04em;
      color: var(--cream);
    }
    .rb-cf-botcheck { display: none !important; }

    /* Mobile menu: hamburger + popup (hidden on desktop, shown via .is-narrow) */
    #rb-menu-btn {
      display: none;
      position: absolute;
      top: 14px; right: 18px;
      z-index: 55;
      width: 34px; height: 28px;
      background: rgba(19,18,16,0.65);
      border: 1px solid var(--border);
      border-radius: 3px;
      cursor: pointer;
      padding: 0;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    #rb-menu-btn span {
      display: block; width: 16px; height: 1.5px;
      background: var(--cream);
      transition: background 0.2s ease;
    }
    #rb-menu-btn:hover span { background: var(--gold); }
    #rb-menu-popup {
      display: none;
      position: absolute;
      top: 50px; right: 18px;
      z-index: 56;
      min-width: 156px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 3px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .rb-menu-item {
      display: block; width: 100%;
      text-align: left;
      background: none; border: none;
      border-bottom: 1px solid var(--border);
      color: var(--cream);
      font-family: var(--font-body);
      font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
      padding: 13px 16px;
      cursor: pointer; text-decoration: none;
      transition: background 0.2s ease, color 0.2s ease;
    }
    .rb-menu-item:last-child { border-bottom: none; }
    .rb-menu-item:hover { background: rgba(201,168,76,0.08); color: var(--gold); }

    /* NARROW / MOBILE (JS-driven class, reliable inside the iframe) */
    /* Background pan on phones. NEGATIVE reveals more of the RIGHT of the shot,
       POSITIVE reveals more of the LEFT. Dial in ~30px steps (e.g. -180px, -240px)
       until both subjects land. Desktop is unaffected. */
    .rb-core-five-module.is-narrow { --bg-pan-x: 0px; }
    .rb-core-five-module.is-narrow #rb-core-five-header { padding: 14px 18px; }
    .rb-core-five-module.is-narrow #rb-core-five-header p { display: none; }
    .rb-core-five-module.is-narrow .rb-cf-node-ring { width: 52px; height: 52px; }
    .rb-core-five-module.is-narrow .rb-cf-node-initial { font-size: 18px; }
    .rb-core-five-module.is-narrow .rb-cf-node-role { display: none; }
    .rb-core-five-module.is-narrow #rb-core-five-legend { display: none; }
    .rb-core-five-module.is-narrow #rb-core-five-hint { display: none; }
    .rb-core-five-module.is-narrow #rb-core-five-panel {
      right: 0; left: 0; bottom: 0; top: auto;
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: 74%;
      border-left: none;
      border-top: 1px solid var(--border);
      transform: translateY(100%);
      padding: 44px 20px 28px;
    }
    .rb-core-five-module.is-narrow #rb-core-five-panel.rb-cf-open { transform: translateY(0); }

    .rb-core-five-module.is-narrow #rb-contact-btn {
      top: 12px; right: 62px;
      font-size: 9px; padding: 4px 9px; letter-spacing: 0.14em;
    }
    .rb-core-five-module.is-narrow #rb-contact-panel {
      right: 0; left: 0; bottom: 0; top: auto;
      width: 100%; max-width: 100%;
      height: auto; max-height: 84%;
      border-left: none; border-top: 1px solid var(--border);
      transform: translateY(100%);
      padding: 44px 20px 28px;
    }
    .rb-core-five-module.is-narrow #rb-contact-panel.rb-cf-open { transform: translateY(0); }

    /* Mobile menu takes over the top-right corner */
    .rb-core-five-module.is-narrow #rb-menu-btn { display: flex; }
    .rb-core-five-module.is-narrow #rb-menu-popup.rb-menu-open { display: block; }
    .rb-core-five-module.is-narrow #rb-contact-btn,
    .rb-core-five-module.is-narrow #rb-imdb-link { display: none; }
    .rb-core-five-module.is-narrow #rb-core-five-header { padding-right: 60px; }
    .rb-core-five-module.is-narrow #rb-core-five-header h1 {
      font-size: 12px;
      letter-spacing: 0.16em;
    }