/* ============================================================
   © 2026 Mr. Realla's E-Bikes Hustle LLC — All content original
   and owned outright. Built from Nothing. Owned Outright. 👑

   HOUSE.CSS — THE SHARED HOUSE STYLESHEET (extracted 2026-10-14,
   the Google Design Study wave: ~/workspace/your_files/lanes/
   google-design-study-2026-10-14.md, upgrade #10).

   One token sheet for the whole house: the 4/8 spacing ladder,
   the six type roles, and the color roles with their guaranteed
   text pairings — both house dialects (purple + navy) expressed
   as tokens of ONE system, so a room's identity never changes,
   only the drift stops. Shared components live here too: the
   Follow-the-Network strip (.mrn-follow) and the house focus
   ring. Pages link this file AFTER their own <style> block;
   token names are --mrn-* so they can never collide with a
   page's own variables.
   ============================================================ */

:root{
  /* ---------- spacing: the 4/8 ladder (nothing off-ladder ships) ---------- */
  --mrn-sp-1:4px;
  --mrn-sp-2:8px;
  --mrn-sp-3:12px;
  --mrn-sp-4:16px;
  --mrn-sp-5:24px;
  --mrn-sp-6:32px;
  --mrn-sp-7:48px;
  --mrn-sp-8:64px;
  --mrn-sp-9:84px;   /* house section padding */

  /* ---------- type: six roles, fixed pairs, no improvisation ---------- */
  --mrn-font-display:'Cormorant Garamond',Georgia,serif;
  --mrn-font-body:'Inter',system-ui,-apple-system,sans-serif;
  --mrn-font-reading:Georgia,'Times New Roman',serif;
  --mrn-type-display:clamp(2.5rem,7.2vw,4.6rem);   /* hero only */
  --mrn-type-headline:clamp(1.9rem,5vw,2.7rem);    /* section heads */
  --mrn-type-title:1.45rem;                        /* card / room titles */
  --mrn-type-body:1rem;                            /* body copy, lh 1.65 */
  --mrn-type-label:.78rem;                         /* kickers / eyebrows */
  --mrn-type-caption:.86rem;                       /* notes, footers */
  --mrn-lh-body:1.65;

  /* ---------- color roles (each with its guaranteed "on" pairing) ---------- */
  --mrn-bg-purple:#120d1c;
  --mrn-bg-purple-2:#1a1226;
  --mrn-bg-navy:#050b1e;
  --mrn-panel-purple:#1e1530;
  --mrn-panel-navy:rgba(13,27,62,.85);
  --mrn-ink:#eef3ff;          /* primary text on navy */
  --mrn-silver:#e9e7df;       /* primary text on purple */
  --mrn-silver-dim:#b9b4c7;   /* secondary text on purple — 9.47:1 */
  --mrn-dim-navy:#9fb2dd;     /* secondary text on navy */
  --mrn-soft-navy:#c9d6f5;    /* body text on navy panels — 12.96:1 class */
  --mrn-faint:#8d87a0;        /* caption text on purple — 5.55:1 */
  --mrn-footer-navy:#8fa5cf;  /* caption text on navy — 7.88:1 (AA floor step) */
  --mrn-blue:#29B6FF;         /* the house accent */
  --mrn-blue-soft:#7cd0ff;    /* links on navy */
  --mrn-blue-deep:#0f7fc4;
  --mrn-on-blue:#06121d;      /* text guaranteed on the blue gradient */
  --mrn-gold-cream:#F6EED6;   /* white-gold family accent */
  --mrn-line:rgba(41,182,255,.22);

  /* ---------- motion tokens (M3-style ladder) ---------- */
  --mrn-ease-out:cubic-bezier(.2,0,0,1);
  --mrn-ease-in:cubic-bezier(.3,0,1,1);
  --mrn-dur-1:200ms;   /* small controls */
  --mrn-dur-2:300ms;   /* cards and surfaces */
  --mrn-dur-3:500ms;   /* full-screen moves only */

  /* ---------- measure: two sanctioned widths ---------- */
  --mrn-wrap-house:1060px;   /* house pages */
  --mrn-wrap-reading:880px;  /* reading rooms */
}

/* ============================================================
   THE FOCUS RING — one for the whole house (study quick win #4).
   Keyboard visitors get a visible ring on every page; mouse
   focus behavior in each room is untouched.
   ============================================================ */
:focus-visible{
  outline:3px solid #29b6ff;
  outline-offset:2px;
}

/* ============================================================
   FOLLOW THE NETWORK — the shared strip (Spread Pack Gap 1–3).
   One component, every room: the same nine doors home, styled
   once, here. Links meet the 48px tap floor.
   ============================================================ */
.mrn-follow{
  max-width:760px;
  margin:var(--mrn-sp-6) auto 0;
  padding:0 var(--mrn-sp-4);
  text-align:center;
}
.mrn-follow-label{
  color:var(--mrn-blue);
  font-size:var(--mrn-type-label);
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.mrn-follow-links{
  display:flex;flex-wrap:wrap;gap:var(--mrn-sp-3);
  justify-content:center;margin-top:var(--mrn-sp-4);
}
.mrn-follow-links a{
  display:inline-flex;align-items:center;min-height:48px;
  padding:10px 22px;border-radius:999px;text-decoration:none;
  font-weight:600;letter-spacing:.04em;color:var(--mrn-ink);
  border:1px solid rgba(168,232,255,.35);
  background:rgba(41,182,255,.05);
  transition:border-color var(--mrn-dur-1) ease,background var(--mrn-dur-1) ease,transform var(--mrn-dur-1) ease;
}
.mrn-follow-links a:hover{
  border-color:var(--mrn-blue);
  background:rgba(41,182,255,.12);
  transform:translateY(-2px);
}
@media (prefers-reduced-motion:reduce){
  .mrn-follow-links a{transition:none}
}
@media print{
  .mrn-follow{display:none}
}

/* ============================================================
   MIGRATED SHARED BLOCKS — the starfield + diamond glint, the
   two implementations that were copy-pasted into every room.
   Verified byte-identical across their page families before
   extraction (2026-10-14); each dialect's copy is scoped to
   its own pages with body[data-dialect], and the colliding
   @keyframes twinkle was split into mrn-twinkle-p / -n.
   Values are character-for-character the rooms' own — only
   the selectors moved home.
   ============================================================ */

/* ---------- STARFIELD + GLINT — purple dialect (index · shop · king) ---------- */
body[data-dialect="purple"] #starfield{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body[data-dialect="purple"]>*:not(#starfield){position:relative;z-index:1}
body[data-dialect="purple"] .star{position:absolute;border-radius:50%;background:#fff;opacity:.15;animation:mrn-twinkle-p ease-in-out infinite}
body[data-dialect="purple"] .star.blue{background:#a8e8ff}
body[data-dialect="purple"] .star.warm{background:#fdf6e0}
body[data-dialect="purple"] .star.sparkle{box-shadow:0 0 6px 1px rgba(255,255,255,.55),0 0 14px 2px rgba(168,232,255,.30)}
@keyframes mrn-twinkle-p{0%,100%{opacity:.10;transform:scale(.75)}50%{opacity:.95;transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){body[data-dialect="purple"] .star{animation:none;opacity:.35}}
body[data-dialect="purple"] .mark-wrap{position:relative;display:inline-block}
body[data-dialect="purple"] .diamond-sparkle{
  position:absolute;left:49.4%;top:51.2%;width:8%;aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;
  background:linear-gradient(135deg,#ffffff 0%,#cfeeff 45%,#29b6ff 100%);
  clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);
  filter:drop-shadow(0 0 6px rgba(168,232,255,.95)) drop-shadow(0 0 16px rgba(41,182,255,.55));
  animation:diamondGlint 3.8s ease-in-out infinite;
}
@keyframes diamondGlint{
  0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0deg)}
  10%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(18deg)}
  20%{opacity:.15;transform:translate(-50%,-50%) scale(.6) rotate(30deg)}
  30%{opacity:.9;transform:translate(-50%,-50%) scale(1) rotate(42deg)}
  42%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(55deg)}
}
@media (prefers-reduced-motion:reduce){body[data-dialect="purple"] .diamond-sparkle{animation:none;opacity:.5;transform:translate(-50%,-50%) scale(.8)}}

/* ---------- STARFIELD + GLINT — navy dialect (the Georgia rooms) ---------- */
body[data-dialect="navy"] #starfield { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
body[data-dialect="navy"] .star { position:absolute; border-radius:50%; background:#fff; animation:mrn-twinkle-n 3.6s ease-in-out infinite; }
body[data-dialect="navy"] .star.sapphire { background:#a8e8ff; }
body[data-dialect="navy"] .star.warm { background:#fdf6e0; }
body[data-dialect="navy"] .star.sparkle { clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); border-radius:0; box-shadow:0 0 8px 2px rgba(168,232,255,.55); }
@keyframes mrn-twinkle-n { 0%,100% { opacity:.1; transform:scale(.7);} 50% { opacity:.95; transform:scale(1.15);} }
@media (prefers-reduced-motion: reduce) { body[data-dialect="navy"] .star { animation:none; opacity:.5; } }
body[data-dialect="navy"] .mark-wrap { position:relative; display:inline-block; line-height:0; }
body[data-dialect="navy"] .diamond-sparkle { position:absolute; left:49.4%; top:51.2%; width:30px; height:30px; transform:translate(-50%,-50%); pointer-events:none;
  background:linear-gradient(135deg,#ffffff 0%,#cfeeff 45%,#7cd0ff 100%);
  clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter:drop-shadow(0 0 6px rgba(168,232,255,.95)) drop-shadow(0 0 14px rgba(124,208,255,.6));
  animation:diamondwink 3.8s ease-in-out infinite; }
@keyframes diamondwink { 0%,58%,100% { opacity:0; transform:translate(-50%,-50%) scale(.35) rotate(0deg);} 68% { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(20deg);} 76% { opacity:.25; transform:translate(-50%,-50%) scale(.6) rotate(8deg);} 86% { opacity:.95; transform:translate(-50%,-50%) scale(.9) rotate(16deg);} }
@media (prefers-reduced-motion: reduce) { body[data-dialect="navy"] .diamond-sparkle { animation:none; opacity:.6; } }