/* ==========================================================================
   Visit the shop, option C "Red record" (picked by Vish, 28 Oct). hero-b.html only;
   index.html keeps the old layout. Loaded after theme.css.
   A red band like the hero, so the page starts and ends the same way, with a shop
   photo as the label of a vinyl record and a live open/closed tag stuck on it.
   ========================================================================== */

.section--visit-record {
  --vr-red: #d10411;      /* same deeper red as the hero band (white copy clears AA) */
  --vr-ink: #141112;
  --vr-disc: min(64vw, 260px);
  --rings-x: calc(var(--gutter, 16px) + var(--vr-disc) / 2);
  --rings-y: calc(clamp(2.75rem, 2rem + 3vw, 4.5rem) + var(--vr-disc) / 2);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  background: var(--vr-red);
  color: #fff;
}
.section--visit-record :focus-visible { outline-color: #fff; }

/* Halftone dots + op-art rings around the record, drifting outward like the hero's
   (same recipe: --ring-o and @keyframes ring-drift live in hero-b.css) */
.section--visit-record::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle, rgb(0 0 0 / 0.16) 0 1.3px, transparent 1.8px) 0 0 / 9px 9px,
    repeating-radial-gradient(circle at var(--rings-x) var(--rings-y),
      rgb(0 0 0 / 0.1) calc(var(--ring-o) - 38px) calc(var(--ring-o) - 20px), transparent calc(var(--ring-o) - 20px) var(--ring-o));
  animation: ring-drift 2.4s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at var(--rings-x) var(--rings-y), #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 90% at var(--rings-x) var(--rings-y), #000 10%, transparent 75%);
}
/* Paper grain */
.section--visit-record::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.visit-rec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: center; }

/* ---------- The record ---------- */
.visit-rec__disc {
  position: relative;
  width: var(--vr-disc); aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 33%, #0b0b0b 33.3% 36%, transparent 36.3%),   /* lead-in round the label */
    repeating-radial-gradient(circle, #131313 0 1px, #1d1d1d 1px 2px, #0f0f0f 2px 3px);   /* grooves */
  box-shadow: 0 18px 36px rgb(0 0 0 / 0.38), inset 0 0 0 2px #262626;
}
.visit-rec__disc img {
  position: absolute; top: 50%; left: 50%;
  width: 46%; height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--c-red);
}
.visit-rec__disc::after { /* spindle hole + static light */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, #efe8da 0 1.6%, transparent 1.9%),
    conic-gradient(from 20deg,
      rgb(255 255 255 / 0) 0deg, rgb(255 255 255 / 0.13) 28deg, rgb(255 255 255 / 0) 62deg,
      rgb(255 255 255 / 0) 180deg, rgb(255 255 255 / 0.09) 210deg, rgb(255 255 255 / 0) 245deg);
}
.visit-rec__tag { /* live open/closed status, stuck on like a sticker */
  position: absolute; z-index: 1; right: -10%; bottom: 5%;
  margin: 0; padding: 7px 14px;
  border-radius: 999px; background: #fff; color: var(--vr-ink);
  font-size: var(--fs-sm); white-space: nowrap;
  transform: rotate(-6deg);
  box-shadow: 0 5px 12px rgb(0 0 0 / 0.28);
}
.visit-rec__tag .status { color: inherit; font-weight: 700; }

/* ---------- Copy ---------- */
.visit-rec__info { min-width: 0; }
.visit-rec__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-xl); line-height: 1.08; color: #fff; text-wrap: balance; }
.visit-rec__title span { color: var(--vr-ink); text-shadow: 0.04em 0.04em 0 rgb(255 255 255 / 0.92); }
.visit-rec__intro { margin-top: var(--sp-3); max-width: 48ch; color: #fff; }
.visit-rec__cols { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); }
.visit-rec__label {
  margin: 0 0 var(--sp-2);
  font-family: var(--f-mono); font-size: var(--fs-2xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.85);
}
.visit-rec address { font-style: normal; line-height: 1.5; }
.visit-rec__contact { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.visit-rec__contact a { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: #fff; text-decoration: none; }
.visit-rec__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.visit-rec__hours { margin: 0; display: grid; gap: 4px; }
.visit-rec__hours div { display: flex; gap: var(--sp-3); }
.visit-rec__hours dt { font-weight: 700; min-width: 6.5em; }
.visit-rec__hours dd { margin: 0; font-family: var(--f-mono); font-size: var(--fs-sm); line-height: 1.7; }
.visit-rec__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.visit-rec__actions .btn--ink { --btn-bg: var(--vr-ink); --btn-bd: var(--vr-ink); }
.visit-rec__actions .btn--ink:hover { --btn-bg: #000; --btn-bd: #000; }
.visit-rec__actions .btn--ghost-light:hover { --btn-fg: var(--vr-red); }

/* Rings rest while the section is off screen (hero-b.js), and stay still for reduced motion */
.section--visit-record.is-offscreen::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .section--visit-record::before { animation: none; } }

@media (min-width: 560px) {
  .visit-rec__cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .section--visit-record {
    --vr-disc: 240px;
    --rings-x: calc((100% - min(100%, var(--page-max))) / 2 + var(--gutter) + var(--vr-disc) / 2);
    --rings-y: 50%;
  }
  .visit-rec { grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-7); }
}
@media (min-width: 1024px) {
  .section--visit-record { --vr-disc: 300px; }
  .visit-rec { gap: var(--sp-8); }
  .visit-rec__cols { grid-template-columns: 1.2fr 1fr; }
}