/* =========================================================================
   The Record Box — Global Styles
   Imports tokens, resets defaults, applies typography base, paper grain,
   and Stage 2 components: nav, hero, footer, mobile sticky CTA, mobile menu.
   ========================================================================= */

@import url("tokens.css");

/* -------------------------------------------------------------------------
   RESET + DEFAULTS
   ------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--rb-cream);
  color: var(--rb-ink);
  font-family: var(--rb-font-sans);
  font-size: var(--rb-size-body);
  font-weight: var(--rb-weight-regular);
  line-height: var(--rb-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

/* JW_MASTER_STANDARDS §1 — warm filter on photos. Scoped so SVG logos stay crisp. */
img[src$=".jpg"], img[src$=".jpeg"], img[src$=".png"], img[src$=".webp"] {
  filter: contrast(1.05) saturate(1.1) brightness(1.03);
}
/* Opt out for logo + icon images */
img.rb-no-filter,
.rb-nav__logo img,
.rb-footer__logo,
img[src$=".svg"] {
  filter: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Anchor targets clear of fixed nav */
section[id], header[id] {
  scroll-margin-top: 100px;
}

/* -------------------------------------------------------------------------
   PAPER GRAIN OVERLAY — brief §4
   ------------------------------------------------------------------------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("../images/textures/paper-grain.png");
  background-repeat: repeat;
  opacity: var(--rb-grain-opacity);
  mix-blend-mode: multiply;
  z-index: var(--rb-z-grain);
}

body > * {
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------------------------------
   TYPOGRAPHY BASE
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rb-font-serif);
  font-weight: var(--rb-weight-black);
  line-height: var(--rb-lh-tight);
  letter-spacing: var(--rb-ls-tight);
  margin: 0;
  color: var(--rb-ink);
  font-optical-sizing: auto;
}

h1 { font-size: var(--rb-size-display); }
h2 { font-size: var(--rb-size-headline); font-weight: var(--rb-weight-bold); font-style: italic; }
h3 { font-size: var(--rb-size-subheadline); font-weight: var(--rb-weight-medium); }

p { margin: 0 0 1em 0; max-width: 65ch; }
small, .rb-caption { font-size: var(--rb-size-small); font-weight: var(--rb-weight-medium); letter-spacing: var(--rb-ls-caption); }

.rb-label {
  display: inline-block;
  font-family: var(--rb-font-sans);
  font-size: var(--rb-size-label);
  font-weight: var(--rb-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--rb-ls-label);
  color: var(--rb-red);
  margin: 0;
}

.rb-marker {
  font-family: var(--rb-font-marker);
  font-weight: var(--rb-weight-regular);
  font-size: var(--rb-size-marker);
  letter-spacing: 0;
  font-style: normal;
  font-stretch: normal;
}

/* -------------------------------------------------------------------------
   CONTAINER
   ------------------------------------------------------------------------- */

.rb-container {
  width: 100%;
  max-width: var(--rb-container-max);
  margin-inline: auto;
  padding-inline: var(--rb-container-pad-desktop);
}

@media (max-width: 1023px) { .rb-container { padding-inline: var(--rb-container-pad-tablet); } }
@media (max-width: 767px)  { .rb-container { padding-inline: var(--rb-container-pad-mobile); } }

/* -------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------- */

.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 16px 28px;
  font-family: var(--rb-font-sans);
  font-size: 15px;
  font-weight: var(--rb-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--rb-dur-med) var(--rb-ease),
              color var(--rb-dur-med) var(--rb-ease),
              border-color var(--rb-dur-med) var(--rb-ease),
              transform var(--rb-dur-fast) var(--rb-ease);
  white-space: nowrap;
}
.rb-btn:focus-visible { outline: 3px solid var(--rb-brass); outline-offset: 3px; }
.rb-btn:active { transform: translateY(1px); }

.rb-btn--primary {
  background-color: var(--rb-red);
  color: var(--rb-cream);
  border-color: var(--rb-red);
}
.rb-btn--primary:hover { background-color: var(--rb-red-hover); border-color: var(--rb-red-hover); }

.rb-btn--ghost {
  background-color: transparent;
  color: var(--rb-cream);
  border-color: var(--rb-cream);
}
.rb-btn--ghost:hover { background-color: var(--rb-cream); color: var(--rb-charcoal); }

/* =========================================================================
   NAV — brief §5.1
   ========================================================================= */

.rb-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 72px;
  z-index: var(--rb-z-nav);
  background-color: rgba(244, 237, 224, 0.95); /* --rb-cream 95% */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* No box-shadow per brief §5.1 */
}

.rb-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 24px;
}

.rb-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.rb-nav__logo img {
  display: block;
  height: 40px;
  width: auto;
}

.rb-nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rb-nav__links a {
  display: inline-block;
  font-size: 15px;
  font-weight: var(--rb-weight-medium);
  letter-spacing: 0.02em;
  color: var(--rb-ink);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--rb-dur-fast) var(--rb-ease),
              border-color var(--rb-dur-fast) var(--rb-ease);
}
.rb-nav__links a:hover { color: var(--rb-red); border-bottom-color: var(--rb-red); }
.rb-nav__links a:focus-visible { outline: 2px solid var(--rb-brass); outline-offset: 4px; }

.rb-nav__phone {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: var(--rb-weight-bold);
  letter-spacing: 0.03em;
  color: var(--rb-red);
}
.rb-nav__phone:hover { color: var(--rb-red-hover); }

.rb-nav__hamburger {
  display: none;
  background: transparent;
  border: 0;
  padding: 12px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: space-around;
  align-items: stretch;
}
.rb-nav__hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--rb-charcoal);
  border-radius: 1px;
  transition: transform var(--rb-dur-med) var(--rb-ease),
              opacity var(--rb-dur-fast) var(--rb-ease);
}
.rb-nav__hamburger[aria-expanded="true"] .rb-nav__hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rb-nav__hamburger[aria-expanded="true"] .rb-nav__hamburger-line:nth-child(2) { opacity: 0; }
.rb-nav__hamburger[aria-expanded="true"] .rb-nav__hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile nav breakpoint (<1024px per JW_MASTER_STANDARDS §3) ---- */
@media (max-width: 1023px) {
  .rb-nav { height: 60px; }
  .rb-nav__links { display: none; }
  .rb-nav__phone { display: none; }
  .rb-nav__hamburger { display: flex; }
}

/* Explicit desktop re-assertion (JW_MASTER_STANDARDS §3) */
@media (min-width: 1024px) {
  .rb-nav__hamburger { display: none !important; }
  .rb-nav__links { display: flex; }
}

/* -------------------------------------------------------------------------
   MOBILE MENU OVERLAY
   ------------------------------------------------------------------------- */

.rb-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--rb-z-overlay);
  background-color: var(--rb-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--rb-dur-med) var(--rb-ease),
              visibility 0s linear var(--rb-dur-med);
}
.rb-mobile-menu[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--rb-dur-med) var(--rb-ease);
}
.rb-mobile-menu__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
/* Explicit Permanent Marker 32px per brief §5.1 + JW_MASTER_STANDARDS §3 */
.rb-mobile-menu__links a {
  font-family: var(--rb-font-marker) !important;
  font-size: 32px !important;
  font-weight: var(--rb-weight-regular);
  color: var(--rb-charcoal);
  letter-spacing: 0.02em;
}
.rb-mobile-menu__links a:hover,
.rb-mobile-menu__links a:focus-visible { color: var(--rb-red); }
.rb-mobile-menu__phone {
  margin-top: 16px;
  color: var(--rb-red) !important;
}

@media (min-width: 1024px) {
  .rb-mobile-menu { display: none !important; }
}

/* =========================================================================
   HERO — brief §5.2
   ========================================================================= */

.rb-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--rb-charcoal); /* Fallback while image loads */
  display: flex;
  align-items: flex-end;
  padding-top: 72px; /* nav clearance desktop */
  padding-bottom: 96px;
}

/* Separate image layer so Ken Burns (brief §5.2) animates transforms without
   touching content. 15s loop, scale 1.0 → 1.08 + subtle pan right. */
.rb-hero__image {
  position: absolute;
  inset: 0;
  background-image: url("../images/real/shopfront-exterior.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  /* JW_MASTER_STANDARDS §1 warm filter, slightly stronger on the hero photo. */
  filter: contrast(1.08) saturate(1.12) brightness(1.02);
  transform-origin: center center;
  will-change: transform;
  animation: rb-ken-burns 15s ease-in-out infinite;
}

@keyframes rb-ken-burns {
  0%   { transform: scale(1)    translateX(0); }
  50%  { transform: scale(1.08) translateX(1.5%); }
  100% { transform: scale(1)    translateX(0); }
}

.rb-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(21, 17, 14, 0.82) 100%);
  z-index: 2;
  pointer-events: none;
}

.rb-hero__content {
  position: relative;
  z-index: 3;
  max-width: 800px;
  color: var(--rb-cream);
}

.rb-hero__label {
  color: var(--rb-brass);
  margin-bottom: 20px;
}

.rb-hero__headline {
  font-family: var(--rb-font-serif);
  font-weight: var(--rb-weight-black);
  font-size: var(--rb-size-display);
  line-height: var(--rb-lh-tight);
  letter-spacing: var(--rb-ls-tight);
  color: var(--rb-cream);
  margin: 0 0 24px;
}

.rb-hero__subline {
  font-family: var(--rb-font-sans);
  font-weight: var(--rb-weight-medium);
  font-size: 20px;
  line-height: 1.5;
  color: var(--rb-cream);
  max-width: 640px;
  margin: 0 0 36px;
}

.rb-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Scroll indicator — thin vertical line with a small dot falling on a loop.
   No mouse iconography (post-Stage 2 spec update). */
.rb-hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  color: var(--rb-cream);
  opacity: 0.9;
  transition: opacity var(--rb-dur-fast) var(--rb-ease);
}
.rb-hero__scroll:hover,
.rb-hero__scroll:focus-visible { opacity: 1; outline: none; }
.rb-hero__scroll:focus-visible { outline: 2px solid var(--rb-brass); outline-offset: 4px; }

.rb-hero__scroll-track {
  display: block;
  position: relative;
  width: 2px;
  height: 48px;
  background: rgba(244, 237, 224, 0.3);
}
.rb-hero__scroll-dot {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--rb-cream);
  animation: rb-scroll-fall 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes rb-scroll-fall {
  0%   { top: -2px;  opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 42px;  opacity: 0; }
}

/* PM-GLOBAL-E — reduced-motion fallbacks for Ken Burns + scroll dot. */
@media (prefers-reduced-motion: reduce) {
  .rb-hero__image { animation: none; transform: none; }
  .rb-hero__scroll-dot {
    animation: none;
    top: 20px;   /* static dot mid-track */
    opacity: 1;
  }
}

/* ---- Hero responsive ---- */
@media (max-width: 1023px) {
  .rb-hero { padding-top: 60px; padding-bottom: 80px; }
  .rb-hero__headline { font-size: 72px; }
}
@media (max-width: 767px) {
  .rb-hero { padding-bottom: 96px; }
  .rb-hero__headline { font-size: 52px; }
  .rb-hero__subline { font-size: 18px; }
  .rb-hero__ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .rb-hero__ctas .rb-btn { width: 100%; }
}

/* =========================================================================
   PLACEHOLDER SECTIONS — IDs for anchor scrolling only, no visible content.
   Stages 4–7 replace these.
   ========================================================================= */

.rb-placeholder {
  display: block;
  min-height: 1px;
}

/* Screen-reader-only utility */
.rb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   GENRE MARQUEE STRIP — brief §5.3
   Static in Stage 3. Scroll animation is Stage 7 effect #2.
   ========================================================================= */

.rb-marquee {
  background-color: var(--rb-charcoal);
  color: var(--rb-cream);
  height: 72px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(199, 147, 58, 0.15); /* brass hairline */
  border-bottom: 1px solid rgba(199, 147, 58, 0.15);
}

.rb-marquee__track {
  white-space: nowrap;
  display: inline-flex;
  /* 40s full loop per brief §5.3. Translates -50% because the content is
     duplicated once, so -50% is exactly one copy-width = seamless wrap. */
  animation: rb-marquee-scroll 40s linear infinite;
  will-change: transform;
}

.rb-marquee:hover .rb-marquee__track,
.rb-marquee:focus-within .rb-marquee__track {
  animation-play-state: paused;
}

@keyframes rb-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.rb-marquee__content {
  font-family: var(--rb-font-marker);
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--rb-cream);
  display: inline-block;
  padding-right: 0;
}

@media (max-width: 767px) {
  .rb-marquee { height: 56px; }
  .rb-marquee__content { font-size: 28px; }
  .rb-marquee__track { animation-duration: 28s; } /* Shorter strip scrolls slightly faster so mobile doesn't feel crawling */
}

@media (prefers-reduced-motion: reduce) {
  .rb-marquee__track { animation: none; }
}

/* =========================================================================
   ABOUT — brief §5.4
   Two-column 60/40 desktop, stacked mobile.
   ========================================================================= */

.rb-about {
  background-color: var(--rb-cream-alt);
  padding: 120px 0;
}

.rb-about__grid {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  gap: 64px;
  align-items: start;
}

.rb-about__label { margin-bottom: 20px; color: var(--rb-red); }

.rb-about__headline {
  font-family: var(--rb-font-serif);
  font-style: italic;
  font-weight: var(--rb-weight-medium);
  font-size: 48px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--rb-ink);
  margin: 0 0 32px;
  max-width: 20ch;
}

.rb-about__body p {
  font-size: 17px;
  line-height: var(--rb-lh-body);
  color: var(--rb-ink);
  margin: 0 0 18px;
  max-width: 58ch;
}

.rb-about__body p:last-child { margin-bottom: 0; }

.rb-about__portrait {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.rb-about__portrait-frame {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: var(--rb-paper);
  border: 2px solid rgba(168, 52, 42, 0.35); /* brief §5.4 */
  box-shadow: 0 8px 24px rgba(31, 26, 23, 0.14), 0 2px 6px rgba(31, 26, 23, 0.08);
  overflow: hidden;
  border-radius: 2px;
}

.rb-about__portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Editorial placeholder variant — used until Phil sends his phone photo.
   Same frame dimensions, border, and shadow as the real portrait so the
   layout doesn't shift on swap. Paper fill + record-sleeve motif + caption. */
.rb-about__portrait-frame--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px;
  color: var(--rb-ink-soft);
}
.rb-about__portrait-icon {
  width: 38%;
  max-width: 160px;
  height: auto;
  color: var(--rb-ink-soft);
  opacity: 0.55;
}
.rb-about__portrait-caption {
  font-family: var(--rb-font-sans);
  font-size: var(--rb-size-label);
  font-weight: var(--rb-weight-bold);
  letter-spacing: var(--rb-ls-label);
  text-transform: uppercase;
  color: var(--rb-ink-soft);
  margin: 0;
  text-align: center;
}

@media (max-width: 1023px) {
  .rb-about { padding: 80px 0; }
  .rb-about__grid { grid-template-columns: 1fr; gap: 48px; }
  .rb-about__headline { font-size: 40px; max-width: 22ch; }
  .rb-about__portrait-frame { max-width: 480px; margin: 0 auto; }
}

@media (max-width: 767px) {
  .rb-about { padding: 60px 0; }
  .rb-about__headline { font-size: 32px; }
  .rb-about__body p { font-size: 16px; }
}

/* =========================================================================
   PULL-QUOTE DIVIDER — brief §5.5
   Full-width charcoal, typographic only, big brass quote mark.
   ========================================================================= */

.rb-pullquote {
  background-color: var(--rb-charcoal);
  padding: 120px 0;
  text-align: center;
  position: relative;
}

.rb-pullquote__inner {
  max-width: 900px;
  margin-inline: auto;
  position: relative;
}

.rb-pullquote__mark {
  display: block;
  font-family: var(--rb-font-serif);
  font-weight: var(--rb-weight-black);
  font-size: 140px;
  line-height: 0.9;
  color: var(--rb-brass);
  opacity: 0.38;
  margin: 0 0 -20px;
  user-select: none;
}

.rb-pullquote__quote {
  font-family: var(--rb-font-serif);
  font-style: italic;
  font-weight: var(--rb-weight-medium);
  font-size: 44px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--rb-cream);
  margin: 0 0 28px;
  quotes: none;
}

.rb-pullquote__attribution {
  font-family: var(--rb-font-sans);
  font-size: 14px;
  font-weight: var(--rb-weight-semibold);
  letter-spacing: var(--rb-ls-caps);
  text-transform: uppercase;
  color: var(--rb-brass);
  margin: 0;
  max-width: none;
}

@media (max-width: 1023px) {
  .rb-pullquote { padding: 80px 0; }
  .rb-pullquote__mark { font-size: 110px; }
  .rb-pullquote__quote { font-size: 34px; }
}

@media (max-width: 767px) {
  .rb-pullquote { padding: 60px 0; }
  .rb-pullquote__mark { font-size: 88px; margin-bottom: -12px; }
  .rb-pullquote__quote { font-size: 28px; }
}

/* =========================================================================
   SERVICES STRIP — brief §5.8
   Three-column desktop, stacked mobile. Copy from phil-voice.md.
   ========================================================================= */

.rb-services {
  background-color: var(--rb-paper);
  padding: 100px 0;
}

.rb-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
}

.rb-services__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 36ch;
}

.rb-services__icon {
  width: 56px;
  height: 56px;
  color: var(--rb-charcoal);
  margin-bottom: 4px;
}

.rb-services__heading {
  font-family: var(--rb-font-marker);
  font-weight: var(--rb-weight-regular);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--rb-red);
  margin: 0;
}

.rb-services__body {
  font-family: var(--rb-font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--rb-ink);
  margin: 0;
  max-width: 38ch;
}

@media (max-width: 1023px) {
  .rb-services { padding: 80px 0; }
  .rb-services__grid { grid-template-columns: 1fr; gap: 40px; }
  .rb-services__card { max-width: 56ch; }
}

@media (max-width: 767px) {
  .rb-services { padding: 60px 0; }
  .rb-services__heading { font-size: 24px; }
}

/* =========================================================================
   VISIT — brief §5.12
   Two-column desktop: info left, map right. Stacked mobile.
   ========================================================================= */

.rb-visit {
  background-color: var(--rb-charcoal-2);
  color: var(--rb-cream);
  padding: 120px 0;
}

.rb-visit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.rb-visit__info a {
  color: inherit;
  border-bottom: 1px solid rgba(199, 147, 58, 0.35);
  transition: color var(--rb-dur-fast) var(--rb-ease),
              border-color var(--rb-dur-fast) var(--rb-ease);
}
.rb-visit__info a:hover,
.rb-visit__info a:focus-visible {
  color: var(--rb-brass);
  border-bottom-color: var(--rb-brass);
  outline: none;
}

.rb-visit__label { color: var(--rb-brass); margin-bottom: 20px; }

.rb-visit__headline {
  font-family: var(--rb-font-serif);
  font-weight: var(--rb-weight-bold);
  font-style: italic;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--rb-cream);
  margin: 0 0 32px;
  max-width: 16ch;
}

.rb-visit__address {
  font-style: normal;
  font-family: var(--rb-font-sans);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 32px;
  color: var(--rb-cream);
}

.rb-visit__hours {
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 20px;
  row-gap: 6px;
  max-width: 360px;
  font-family: var(--rb-font-sans);
  font-size: 15px;
  line-height: 1.5;
}
.rb-visit__hours > div {
  display: contents;
}
.rb-visit__hours dt {
  font-weight: var(--rb-weight-semibold);
  color: var(--rb-cream);
}
.rb-visit__hours dd {
  margin: 0;
  color: rgba(244, 237, 224, 0.82);
}
.rb-visit__closed-row dt,
.rb-visit__closed-row dd { color: var(--rb-ink-soft); }

.rb-visit__note {
  font-family: var(--rb-font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244, 237, 224, 0.8);
  margin: 0 0 24px;
  max-width: 44ch;
}

.rb-visit__contact-lines {
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 24px;
}

.rb-visit__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
}
.rb-visit__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(199, 147, 58, 0.45);
  border-radius: 50%;
  color: var(--rb-cream);
  transition: background-color var(--rb-dur-fast) var(--rb-ease),
              color var(--rb-dur-fast) var(--rb-ease),
              border-color var(--rb-dur-fast) var(--rb-ease);
}
.rb-visit__social a:hover,
.rb-visit__social a:focus-visible {
  background-color: var(--rb-brass);
  color: var(--rb-charcoal);
  border-color: var(--rb-brass);
  outline: none;
}

.rb-visit__map {
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 2px solid rgba(199, 147, 58, 0.55);
  border-radius: 2px;
  overflow: hidden;
  background-color: var(--rb-deepest);
  position: relative;
}
.rb-visit__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.8) contrast(1.05) brightness(0.95);
}

@media (max-width: 1023px) {
  .rb-visit { padding: 80px 0; }
  .rb-visit__grid { grid-template-columns: 1fr; gap: 48px; }
  .rb-visit__headline { font-size: 44px; }
  .rb-visit__map { aspect-ratio: 16 / 10; }
}

@media (max-width: 767px) {
  .rb-visit { padding: 60px 0; }
  .rb-visit__headline { font-size: 32px; }
  .rb-visit__hours { grid-template-columns: 1fr auto; }
}

/* =========================================================================
   CONTACT FORM — brief §5.13
   Div-based per JW_MASTER_STANDARDS §1. Web3Forms + PM7 fallback in contact.js.
   ========================================================================= */

.rb-contact {
  background-color: var(--rb-cream-alt);
  padding: 120px 0;
}

.rb-contact__inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.rb-contact__label { color: var(--rb-red); margin-bottom: 20px; }

.rb-contact__headline {
  font-family: var(--rb-font-serif);
  font-weight: var(--rb-weight-bold);
  font-style: italic;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--rb-ink);
  margin: 0 0 16px;
  max-width: 22ch;
  margin-inline: auto;
}

.rb-contact__subline {
  font-size: 17px;
  line-height: 1.55;
  color: var(--rb-ink-soft);
  margin: 0 0 40px;
  max-width: none;
}

.rb-contact__form { text-align: left; }

.rb-contact__row {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.rb-contact__row--two { grid-template-columns: 1fr 1fr; }

@media (max-width: 767px) {
  .rb-contact__row--two { grid-template-columns: 1fr; }
}

.rb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rb-field label {
  font-family: var(--rb-font-sans);
  font-size: 13px;
  font-weight: var(--rb-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rb-ink);
}
.rb-field__optional {
  font-weight: var(--rb-weight-regular);
  color: var(--rb-ink-soft);
  letter-spacing: 0.04em;
  text-transform: none;
}

.rb-field input,
.rb-field select,
.rb-field textarea {
  font-family: var(--rb-font-sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--rb-ink);
  background-color: var(--rb-cream);
  border: 1px solid rgba(42, 36, 31, 0.22);
  border-radius: 2px;
  padding: 12px 14px;
  transition: border-color var(--rb-dur-fast) var(--rb-ease),
              box-shadow var(--rb-dur-fast) var(--rb-ease);
  outline: none;
  width: 100%;
}
.rb-field input:focus,
.rb-field select:focus,
.rb-field textarea:focus {
  border-color: var(--rb-red);
  box-shadow: 0 0 0 3px rgba(168, 52, 42, 0.14);
}
.rb-field textarea { resize: vertical; min-height: 120px; }
.rb-field[data-invalid="true"] input,
.rb-field[data-invalid="true"] select,
.rb-field[data-invalid="true"] textarea {
  border-color: var(--rb-red);
  box-shadow: 0 0 0 3px rgba(168, 52, 42, 0.14);
}

/* "Send it over" button uses Permanent Marker 20px per brief §5.13 */
.rb-btn--send {
  width: 100%;
  font-family: var(--rb-font-marker);
  font-size: 20px;
  font-weight: var(--rb-weight-regular);
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 18px 28px;
}

.rb-contact__status {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-radius: 2px;
  font-size: 15px;
  line-height: 1.55;
}
.rb-contact__status[data-rb-status="success"] {
  background-color: rgba(199, 147, 58, 0.14);
  border: 1px solid rgba(199, 147, 58, 0.45);
  color: var(--rb-ink);
}
.rb-contact__status[data-rb-status="error"] {
  background-color: rgba(168, 52, 42, 0.10);
  border: 1px solid rgba(168, 52, 42, 0.45);
  color: var(--rb-ink);
}
.rb-contact__status[data-rb-status="error"] a {
  color: var(--rb-red);
  font-weight: var(--rb-weight-bold);
}

@media (max-width: 1023px) { .rb-contact { padding: 80px 0; } }
@media (max-width: 767px) {
  .rb-contact { padding: 60px 0; }
  .rb-contact__headline { font-size: 30px; }
}

/* =========================================================================
   SHOP-WALL COLLAGE — brief §5.9 (Stage 7a)
   12-col grid with irregular spans. Rotation + hover straighten-and-lift.
   Tile rotations assigned by JS per page load (see public/js/shop.js).
   ========================================================================= */

.rb-collage {
  background-color: var(--rb-charcoal);
  padding: 120px 0;
}

.rb-collage__header {
  max-width: 720px;
  margin-bottom: 48px;
}

.rb-collage__label {
  color: var(--rb-brass);
  margin-bottom: 16px;
}

.rb-collage__headline {
  font-family: var(--rb-font-serif);
  font-weight: var(--rb-weight-bold);
  font-style: italic;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--rb-cream);
  margin: 0;
  max-width: 14ch;
}

.rb-collage__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 110px;
  gap: 16px;
}

/* Irregular tile spans — 8 tiles across ~20 rows of the 12-col grid.
   Designed so the composition has visible rhythm, not uniform boxes. */
.rb-collage__tile--1 { grid-column: 1 / span 5;  grid-row: 1 / span 3; }   /* interior record wall — big */
.rb-collage__tile--2 { grid-column: 6 / span 4;  grid-row: 1 / span 2; }   /* crate handwritten tabs */
.rb-collage__tile--3 { grid-column: 10 / span 3; grid-row: 1 / span 3; }   /* album wall rock */
.rb-collage__tile--4 { grid-column: 6 / span 4;  grid-row: 3 / span 2; }   /* album wall mixed */
.rb-collage__tile--5 { grid-column: 1 / span 4;  grid-row: 4 / span 2; }   /* cds stacked */
.rb-collage__tile--6 { grid-column: 5 / span 3;  grid-row: 5 / span 2; }   /* cds & singles */
.rb-collage__tile--7 { grid-column: 8 / span 5;  grid-row: 4 / span 3; }   /* memorabilia figures */
.rb-collage__tile--8 { grid-column: 1 / span 4;  grid-row: 6 / span 2; }   /* keyring wall */

.rb-collage__tile {
  --tile-rotation: 0deg;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 2px solid rgba(199, 147, 58, 0.35);
  background-color: var(--rb-deepest);
  transform: rotate(var(--tile-rotation));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.rb-collage__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.4s var(--rb-ease);
}

.rb-collage__tile:hover {
  transform: rotate(0deg) translateY(-4px);
  z-index: 2;
}
.rb-collage__tile:hover img {
  transform: scale(1.02);
}

/* Tablet: collapse to 6-col grid, reshape spans so tiles stay readable. */
@media (max-width: 1023px) {
  .rb-collage { padding: 80px 0; }
  .rb-collage__headline { font-size: 48px; }
  .rb-collage__grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 100px; }
  .rb-collage__tile--1 { grid-column: 1 / span 3; grid-row: 1 / span 3; }
  .rb-collage__tile--2 { grid-column: 4 / span 3; grid-row: 1 / span 2; }
  .rb-collage__tile--3 { grid-column: 4 / span 3; grid-row: 3 / span 2; }
  .rb-collage__tile--4 { grid-column: 1 / span 3; grid-row: 4 / span 2; }
  .rb-collage__tile--5 { grid-column: 4 / span 3; grid-row: 5 / span 2; }
  .rb-collage__tile--6 { grid-column: 1 / span 3; grid-row: 6 / span 2; }
  .rb-collage__tile--7 { grid-column: 4 / span 3; grid-row: 7 / span 2; }
  .rb-collage__tile--8 { grid-column: 1 / span 6; grid-row: 8 / span 2; }
}

/* Mobile: single column stack, preserve the rotation character. */
@media (max-width: 767px) {
  .rb-collage { padding: 60px 0; }
  .rb-collage__headline { font-size: 36px; }
  .rb-collage__grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    grid-template-columns: none;
    grid-auto-rows: auto;
  }
  .rb-collage__tile {
    aspect-ratio: 4 / 3;
    width: 100%;
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rb-collage__tile { transform: rotate(0deg); }
}

/* =========================================================================
   A-FRAME CHALKBOARD — brief §5.10 (Stage 7a structure)
   Dark-slate card with Permanent Marker heading + message. Hand-drawn
   border + chalk-dust texture are Stage 7b polish.
   ========================================================================= */

.rb-aframe {
  background-color: var(--rb-cream-alt);
  padding: 80px 0;
}

.rb-aframe__wrap {
  display: flex;
  justify-content: center;
}

.rb-aframe__board {
  width: 100%;
  max-width: 900px;
  background-color: #2A2620;
  color: var(--rb-cream);
  padding: 48px 56px;
  border-radius: 4px;
  /* Slight tilt per brief §5.10 */
  transform: rotate(-1deg);
  box-shadow:
    0 18px 36px rgba(21, 17, 14, 0.25),
    inset 0 0 0 6px rgba(244, 237, 224, 0.04),
    inset 0 0 60px rgba(244, 237, 224, 0.05);
  text-align: center;
}

.rb-aframe__heading {
  font-family: var(--rb-font-marker);
  font-size: 28px;
  letter-spacing: 0.08em;
  color: rgba(244, 237, 224, 0.86);
  margin: 0 0 20px;
  max-width: none;
}

.rb-aframe__message {
  font-family: var(--rb-font-marker);
  font-weight: var(--rb-weight-regular);
  font-size: 32px;
  line-height: 1.35;
  color: var(--rb-cream);
  margin: 0;
  max-width: none;
}

@media (max-width: 767px) {
  .rb-aframe { padding: 60px 0; }
  .rb-aframe__board { padding: 32px 24px; transform: rotate(-0.6deg); }
  .rb-aframe__heading { font-size: 22px; }
  .rb-aframe__message { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-aframe__board { transform: none; }
}

/* =========================================================================
   SHOP — brief §5.6 (Stage 4)
   Grid + filter bar + product cards. Cards get jitter rotation from JS.
   ========================================================================= */

.rb-shop {
  background-color: var(--rb-cream);
  padding: 120px 0 96px;
}

.rb-shop__header {
  max-width: 720px;
  margin-bottom: 48px;
}

.rb-shop__label { color: var(--rb-red); margin-bottom: 16px; }

.rb-shop__headline {
  font-family: var(--rb-font-serif);
  font-weight: var(--rb-weight-bold);
  font-size: 72px;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--rb-ink);
  margin: 0 0 20px;
  max-width: 14ch;
}

.rb-shop__subcopy {
  font-size: 18px;
  line-height: 1.65;
  color: var(--rb-ink);
  margin: 0;
  max-width: 640px;
}

/* ---- Filter bar ---- */
.rb-shop__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 48px;
}

.rb-shop__filter {
  font-family: var(--rb-font-marker);
  font-weight: var(--rb-weight-regular);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--rb-ink);
  background-color: transparent;
  border: 2px solid rgba(42, 36, 31, 0.2);
  border-radius: 999px;
  padding: 6px 20px 8px;
  cursor: pointer;
  transition: background-color var(--rb-dur-fast) var(--rb-ease),
              color var(--rb-dur-fast) var(--rb-ease),
              border-color var(--rb-dur-fast) var(--rb-ease);
  white-space: nowrap;
}
.rb-shop__filter:hover {
  border-color: var(--rb-red);
  color: var(--rb-red);
}
.rb-shop__filter--active {
  background-color: var(--rb-charcoal);
  color: var(--rb-cream);
  border-color: var(--rb-charcoal);
}
.rb-shop__filter--active:hover {
  background-color: var(--rb-charcoal-2);
  border-color: var(--rb-charcoal-2);
  color: var(--rb-cream);
}
.rb-shop__filter:focus-visible {
  outline: 2px solid var(--rb-brass);
  outline-offset: 3px;
}

/* Mobile filter: horizontal scroll */
@media (max-width: 767px) {
  .rb-shop__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 8px;
    margin-right: calc(-1 * var(--rb-container-pad-mobile));
    padding-right: var(--rb-container-pad-mobile);
  }
  .rb-shop__filters::-webkit-scrollbar { display: none; }
  .rb-shop__filter { flex-shrink: 0; }
}

/* ---- Product grid ---- */
.rb-shop__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  perspective: 1200px; /* enables 3D transforms on cards for crate-flip */
}

@media (max-width: 1023px) { .rb-shop__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 767px)  { .rb-shop__grid { grid-template-columns: 1fr; gap: 20px; } }

.rb-shop__loading {
  grid-column: 1 / -1;
  font-family: var(--rb-font-serif);
  font-style: italic;
  color: var(--rb-ink-soft);
  font-size: 18px;
  padding: 40px 0;
  margin: 0;
  text-align: center;
}

.rb-shop__empty {
  grid-column: 1 / -1;
  font-family: var(--rb-font-sans);
  color: var(--rb-ink-soft);
  font-size: 16px;
  padding: 32px 0;
  text-align: center;
}

/* ---- Product card ---- */
.rb-shop__card {
  --card-rotation: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transform: rotate(var(--card-rotation));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: inherit;
  color: inherit;
  transform-style: preserve-3d;
}
.rb-shop__card:hover,
.rb-shop__card:focus-visible {
  transform: rotate(0deg) translateY(-4px);
  outline: none;
}
.rb-shop__card:focus-visible .rb-shop__cover-wrap {
  outline: 2px solid var(--rb-brass);
  outline-offset: 4px;
}

.rb-shop__cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--rb-paper);
  box-shadow: 0 6px 18px rgba(31, 26, 23, 0.18), 0 2px 4px rgba(31, 26, 23, 0.08);
}

.rb-shop__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.4s var(--rb-ease);
}
.rb-shop__card:hover .rb-shop__cover {
  transform: scale(1.02);
}

/* "PHIL'S PICK" featured badge */
.rb-shop__featured-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px 6px;
  font-family: var(--rb-font-sans);
  font-size: 10px;
  font-weight: var(--rb-weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rb-cream);
  background-color: var(--rb-red);
  border-radius: 2px;
  z-index: 2;
}

/* Handwritten price tag top-right */
.rb-shop__price-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 88px;
  height: 56px;
  transform: rotate(5deg);
  transform-origin: 100% 0;
  filter: drop-shadow(0 3px 5px rgba(31, 26, 23, 0.28));
  z-index: 3;
  pointer-events: none;
}
.rb-shop__price-tag svg { width: 100%; height: 100%; display: block; }

/* Card body — artist / title / meta / button */
.rb-shop__card-body {
  padding: 16px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rb-shop__artist {
  font-family: var(--rb-font-sans);
  font-size: 14px;
  font-weight: var(--rb-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rb-ink);
  margin: 0;
}

.rb-shop__title {
  font-family: var(--rb-font-serif);
  font-style: italic;
  font-weight: var(--rb-weight-medium);
  font-size: 20px;
  line-height: 1.18;
  color: var(--rb-ink);
  margin: 0;
}

.rb-shop__meta {
  font-family: var(--rb-font-sans);
  font-size: 13px;
  font-weight: var(--rb-weight-regular);
  letter-spacing: 0.04em;
  color: var(--rb-ink-soft);
  margin: 0;
}

.rb-shop__view-btn {
  margin-top: 12px;
  width: 100%;
  padding: 12px 16px;
  background-color: var(--rb-charcoal);
  color: var(--rb-cream);
  border: 0;
  border-radius: 2px;
  font-family: var(--rb-font-sans);
  font-size: 13px;
  font-weight: var(--rb-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--rb-dur-fast) var(--rb-ease);
}
.rb-shop__view-btn:hover { background-color: var(--rb-red); }

/* ---- Crate-flip animation (brief §5.7) ---- */
.rb-shop__card--flipping {
  animation: rb-card-flip 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rb-card-flip {
  0%   { transform: rotate(var(--card-rotation)) rotateY(0deg); }
  100% { transform: rotate(0deg) rotateY(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rb-shop__card--flipping { animation: none; }
}

/* =========================================================================
   PRODUCT MODAL — brief §5.7
   Opens on card click simultaneously with the card flip. Close: X / Esc /
   click-outside. Two-column panel desktop, stacked mobile.
   ========================================================================= */

.rb-modal {
  position: fixed;
  inset: 0;
  z-index: var(--rb-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}
.rb-modal[aria-hidden="false"] {
  display: flex;
  animation: rb-modal-fade 0.45s ease-out both;
}

.rb-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(21, 17, 14, 0.78);
  cursor: pointer;
}

.rb-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--rb-cream);
  border: 1px solid rgba(199, 147, 58, 0.35);
  border-radius: 2px;
  box-shadow: 0 24px 60px rgba(21, 17, 14, 0.4);
  animation: rb-modal-panel-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rb-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(42, 36, 31, 0.2);
  background-color: var(--rb-cream-alt);
  color: var(--rb-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background-color var(--rb-dur-fast) var(--rb-ease),
              color var(--rb-dur-fast) var(--rb-ease);
}
.rb-modal__close:hover { background-color: var(--rb-red); color: var(--rb-cream); }
.rb-modal__close:focus-visible { outline: 2px solid var(--rb-brass); outline-offset: 3px; }

.rb-modal__grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 0;
}

.rb-modal__cover {
  background-color: var(--rb-paper);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rb-modal__cover-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  box-shadow: 0 8px 24px rgba(31, 26, 23, 0.2);
}

.rb-modal__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  /* Mobile / small panels: scroll horizontally instead of wrapping so
     thumbs stay on a single line and don't push the cover image off
     screen. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; /* space for any focus ring at the bottom */
}
.rb-modal__thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 2px;
  opacity: 0.7;
  flex-shrink: 0;
  background-color: var(--rb-paper);
  transition: opacity var(--rb-dur-fast) var(--rb-ease),
              border-color var(--rb-dur-fast) var(--rb-ease),
              transform var(--rb-dur-fast) var(--rb-ease);
}
.rb-modal__thumb:hover { opacity: 1; }
.rb-modal__thumb:focus-visible {
  outline: 2px solid var(--rb-brass);
  outline-offset: 3px;
  opacity: 1;
}
.rb-modal__thumb--active {
  opacity: 1;
  border-color: var(--rb-brass);
  /* Subtle ring effect via inset shadow so the brass border reads as a
     ring rather than a flat outline. */
  box-shadow: 0 0 0 1px rgba(199, 147, 58, 0.35);
}

.rb-modal__details {
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.rb-modal__label { color: var(--rb-red); margin: 0; }

.rb-modal__title {
  font-family: var(--rb-font-serif);
  font-style: italic;
  font-weight: var(--rb-weight-bold);
  font-size: 36px;
  line-height: 1.15;
  color: var(--rb-ink);
  margin: 0;
  padding-right: 100px; /* leave room for price tag */
}

.rb-modal__artist {
  font-family: var(--rb-font-sans);
  font-size: 14px;
  font-weight: var(--rb-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rb-ink);
  margin: 0;
}

.rb-modal__meta {
  margin: 6px 0 6px;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 4px;
}
.rb-modal__meta > div { display: contents; }
.rb-modal__meta dt {
  font-family: var(--rb-font-sans);
  font-size: 12px;
  font-weight: var(--rb-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rb-ink-soft);
}
.rb-modal__meta dd {
  margin: 0;
  font-family: var(--rb-font-sans);
  font-size: 15px;
  color: var(--rb-ink);
}

.rb-modal__condition-notes {
  font-family: var(--rb-font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--rb-ink-soft);
  font-style: italic;
  margin: 0;
  padding: 14px 16px;
  background-color: var(--rb-paper);
  border-left: 2px solid var(--rb-brass);
}

.rb-modal__description {
  font-family: var(--rb-font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--rb-ink);
  margin: 0;
}

/* Handwritten price tag top-right of the details column */
.rb-modal__price-tag {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 112px;
  height: 72px;
  transform: rotate(6deg);
  transform-origin: 100% 0;
  filter: drop-shadow(0 3px 6px rgba(31, 26, 23, 0.3));
  pointer-events: none;
}
.rb-modal__price-tag svg { width: 100%; height: 100%; display: block; }

.rb-modal__paypal {
  margin-top: 8px;
  padding: 16px;
  background-color: var(--rb-cream-alt);
  border: 1px dashed rgba(168, 52, 42, 0.4);
  border-radius: 2px;
}
.rb-modal__paypal-placeholder {
  font-family: var(--rb-font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--rb-ink);
  margin: 0;
}
.rb-modal__paypal-placeholder a {
  color: var(--rb-red);
  font-weight: var(--rb-weight-bold);
}

/* PayPal HTML pasted into admin → sandboxed iframe. Sized for a standard
   Buy Now button; tighter than the placeholder padding because PayPal's
   own button image carries its own visual weight. */
.rb-modal__paypal-iframe {
  display: block;
  width: 100%;
  height: 70px;
  border: 0;
  background: transparent;
}

/* PayPal email-link variant (Phil pasted a URL, not the HTML form).
   Styled in PayPal's brand yellow so customers recognise it as PayPal. */
.rb-modal__paypal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: #ffc439;     /* PayPal brand yellow */
  color: #1f1a17;
  font-family: var(--rb-font-sans);
  font-size: 15px;
  font-weight: var(--rb-weight-bold);
  letter-spacing: 0.02em;
  border: 1px solid #d49613;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color var(--rb-dur-fast) var(--rb-ease),
              transform var(--rb-dur-fast) var(--rb-ease);
}
.rb-modal__paypal-link:hover { background-color: #f0b500; }
.rb-modal__paypal-link:active { transform: translateY(1px); }
.rb-modal__paypal-link:focus-visible {
  outline: 2px solid var(--rb-brass);
  outline-offset: 3px;
}

.rb-modal__shipping {
  font-family: var(--rb-font-sans);
  font-size: 13px;
  color: var(--rb-ink-soft);
  letter-spacing: 0.04em;
  margin: 4px 0 0;
  max-width: none;
}

/* ---- Modal responsive ---- */
@media (max-width: 860px) {
  .rb-modal__grid { grid-template-columns: 1fr; }
  .rb-modal__cover { padding: 24px; }
  .rb-modal__details { padding: 28px 24px 24px; }
  .rb-modal__title { padding-right: 86px; font-size: 30px; }
  .rb-modal__price-tag { top: 24px; right: 24px; width: 96px; height: 62px; }
}

@media (max-width: 767px) {
  /* Full-screen mobile modal — .rb-modal itself owns the scroll container.
     Previously the panel had min-height:100vh + max-height:none, which
     disabled its own overflow-y:auto and left flex-centering to push
     taller-than-viewport content equally off top and bottom of the fixed
     parent, leaving nothing scrollable. Fix: outer wrapper scrolls, panel
     just flows. */
  .rb-modal {
    padding: 0;
    align-items: flex-start;              /* don't flex-center taller content */
    overflow-y: auto;                     /* scroll happens on the wrapper */
    -webkit-overflow-scrolling: touch;    /* iOS momentum scroll */
  }
  .rb-modal__panel {
    max-width: none;
    max-height: none;
    min-height: 100vh;
    border-radius: 0;
  }
}

/* Modal fade + panel rise */
@keyframes rb-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rb-modal-panel-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Lock body scroll while modal open */
body.rb-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .rb-modal[aria-hidden="false"],
  .rb-modal__panel { animation: none; }
}

/* =========================================================================
   REVIEWS — brief §5.11 + PM10-approved hybrid (Stage 3b).
   Hero pull-quote (Ian Hobbs) above 4 supporting cards. All static.
   JW_MASTER_STANDARDS §6: stars #FFD700, min 18px, attribution in
   DM Sans 700 letter-spaced small caps.
   ========================================================================= */

.rb-reviews {
  background-color: var(--rb-cream-alt);
  padding: 100px 0;
}

/* Hero pull-quote — Ian Hobbs */
.rb-reviews__hero {
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: 72px;
  text-align: center;
}

.rb-reviews__stars {
  display: inline-block;
  color: #FFD700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.18em;
  margin: 0 0 20px;
  max-width: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); /* sit against light bg */
}

.rb-reviews__hero-quote {
  font-family: var(--rb-font-serif);
  font-style: italic;
  font-weight: var(--rb-weight-medium);
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--rb-ink);
  margin: 0 0 22px;
  padding: 0;
  quotes: none;
  /* No big brass " mark — reserved for §5.5 Phil pull-quote per differentiation
     rule agreed pre-build. Stars carry the crown instead. */
}

.rb-reviews__hero-attribution {
  font-family: var(--rb-font-sans);
  font-size: 14px;
  font-weight: var(--rb-weight-semibold);
  letter-spacing: var(--rb-ls-caps);
  text-transform: uppercase;
  color: var(--rb-brass);
  margin: 0;
  max-width: none;
}

/* Supporting cards row */
.rb-reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.rb-reviews__card {
  background-color: var(--rb-paper);
  border-left: 2px solid var(--rb-brass);
  border-radius: 0;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rb-reviews__stars--small {
  font-size: 18px;
  margin: 0 0 2px;
  letter-spacing: 0.14em;
}

.rb-reviews__quote {
  font-family: var(--rb-font-sans);
  font-weight: var(--rb-weight-regular);
  font-size: 16px;
  line-height: 1.6;
  color: var(--rb-ink);
  margin: 0;
  padding: 0;
  quotes: none;
  max-width: none;
}

.rb-reviews__attribution {
  font-family: var(--rb-font-sans);
  font-size: 12px;
  font-weight: var(--rb-weight-bold);
  letter-spacing: var(--rb-ls-caps);
  text-transform: uppercase;
  color: var(--rb-ink);
  margin: auto 0 0;   /* push to bottom of card */
  max-width: none;
}

@media (max-width: 1023px) {
  .rb-reviews { padding: 80px 0; }
  .rb-reviews__hero { margin-bottom: 56px; }
  .rb-reviews__hero-quote { font-size: 28px; }
  .rb-reviews__stars { font-size: 22px; }
  .rb-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 767px) {
  .rb-reviews { padding: 60px 0; }
  .rb-reviews__hero { margin-bottom: 40px; }
  .rb-reviews__hero-quote { font-size: 24px; }
  .rb-reviews__stars { font-size: 20px; }
  .rb-reviews__stars--small { font-size: 16px; }
  .rb-reviews__grid { grid-template-columns: 1fr; gap: 16px; }
  /* Single-column stack — no horizontal scroll (JW_MASTER_STANDARDS §6). */
}

/* =========================================================================
   FOOTER — brief §5.14
   ========================================================================= */

.rb-footer {
  background-color: var(--rb-deepest);
  color: rgba(244, 237, 224, 0.75); /* cream @ 75% per brief */
  padding: 80px 0 0;
  font-family: var(--rb-font-sans);
}

.rb-footer a { color: inherit; transition: color var(--rb-dur-fast) var(--rb-ease); }
.rb-footer a:hover, .rb-footer a:focus-visible { color: var(--rb-cream); outline: none; }

.rb-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 64px;
}

@media (max-width: 1023px) {
  .rb-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 767px) {
  .rb-footer { padding-top: 60px; }
  .rb-footer__grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 48px; }
}

.rb-footer__col { min-width: 0; }

.rb-footer__logo {
  height: 52px;
  width: auto;
  margin-bottom: 16px;
}
.rb-footer__tagline {
  font-family: var(--rb-font-serif);
  font-style: italic;
  font-size: 18px;
  color: rgba(244, 237, 224, 0.88);
  line-height: 1.5;
  margin: 0;
  max-width: 28ch;
}

.rb-footer__heading {
  font-family: var(--rb-font-sans);
  font-size: var(--rb-size-label);
  font-weight: var(--rb-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--rb-ls-label);
  color: var(--rb-brass);
  margin: 0 0 18px;
}
.rb-footer__col--links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rb-footer__col--links a { font-size: 15px; }

.rb-footer__address,
.rb-footer__hours,
.rb-footer__contact-lines {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
}
.rb-footer__closed { color: var(--rb-ink-soft); }

.rb-footer__contact-lines a { font-weight: var(--rb-weight-medium); }

/* Bottom bar */
.rb-footer__bottom {
  border-top: 1px solid rgba(199, 147, 58, 0.18); /* brass @ 18% */
  padding-top: 24px;
  padding-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rb-footer__note {
  font-style: italic;
  font-size: 14px;
  color: rgba(244, 237, 224, 0.7);
  margin: 0;
  max-width: none;
}
.rb-footer__copy {
  font-size: 13px;
  letter-spacing: 0.03em;
  color: rgba(244, 237, 224, 0.55);
  margin: 0;
  max-width: none;
}

@media (min-width: 768px) {
  .rb-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* Mobile-only bottom spacing to clear the sticky CTA bar. */
@media (max-width: 767px) {
  body { padding-bottom: 54px; }
}

/* =========================================================================
   MOBILE STICKY CTA — brief §5.15 + JW_MASTER_STANDARDS §7
   ========================================================================= */

.rb-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 54px;
  z-index: var(--rb-z-sticky); /* below modal, above content */
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--rb-charcoal);
  color: var(--rb-cream);
  font-family: var(--rb-font-sans);
  transition: background-color var(--rb-dur-fast) var(--rb-ease);
}
.rb-sticky-cta:hover,
.rb-sticky-cta:active,
.rb-sticky-cta:focus-visible {
  background-color: var(--rb-red);
  outline: none;
}

.rb-sticky-cta__label {
  font-size: 13px;
  font-weight: var(--rb-weight-regular);
  letter-spacing: 0.18em;
}
.rb-sticky-cta__divider {
  width: 1px;
  height: 20px;
  background-color: rgba(244, 237, 224, 0.35);
}
.rb-sticky-cta__number {
  font-size: 16px;
  font-weight: var(--rb-weight-bold);
  letter-spacing: 0.02em;
}

@media (max-width: 767px) { .rb-sticky-cta { display: flex; } }
@media (min-width: 768px) { .rb-sticky-cta { display: none !important; } }

/* =========================================================================
   RESPONSIVE TYPE — mobile overrides per brief §4
   ========================================================================= */

@media (max-width: 767px) {
  h1 { font-size: 52px; }
  h2 { font-size: 40px; }
  h3 { font-size: 24px; }
  body { font-size: 16px; }
  .rb-marker { font-size: 20px; }
}

/* =========================================================================
   PREFERS-REDUCED-MOTION — brief §6 + PM-GLOBAL-E
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* When mobile menu is open, lock body scroll. */
body.rb-menu-open { overflow: hidden; }