:root{
  --charcoal:#1C1A17;
  --charcoal-soft:#2A2620;
  --cream:#F2EDE2;
  --cream-dim:#E8E0D0;
  --orange:#C8552D;
  --wood:#6B4226;
  --tile:#4A6058;
  --rule: rgba(28,26,23,0.16);
  --rule-light: rgba(242,237,226,0.22);
  --max: 760px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--cream);
  color:var(--charcoal);
  font-family:'Source Serif 4', Georgia, serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.wordmark,.nav-brand-text{
  font-family:'Besley', Georgia, serif;
  font-weight:700;
  line-height:1.15;
  margin:0;
}

a{ color:inherit; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}

.wrap{ max-width: var(--max); margin:0 auto; padding:0 24px; }
.wrap-wide{ max-width: 980px; margin:0 auto; padding:0 24px; }

/* ---------- NAV ---------- */
.site-nav{
  position:sticky; top:0; z-index:20;
  background:rgba(242,237,226,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.site-nav .wrap-wide{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.nav-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-brand img{ height:32px; width:auto; display:block; }
.nav-brand-text{ font-size:1rem; letter-spacing:0.02em; }
.nav-links{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{
  text-decoration:none; font-family:'Source Serif 4', serif;
  font-size:0.95rem; color:var(--charcoal); border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.nav-links a:hover{ border-bottom-color: var(--orange); }
.nav-links a.active{ color:var(--orange); border-bottom-color: var(--orange); }
@media (max-width:620px){
  .nav-links{ gap:16px; }
  .nav-links a{ font-size:0.85rem; }
  .nav-brand-text{ display:none; }
}

/* ---------- HERO ---------- */
.hero{
  background:var(--charcoal);
  color:var(--cream);
  padding:88px 0 76px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(242,237,226,0.02) 0px, rgba(242,237,226,0.02) 1px, transparent 1px, transparent 3px);
  pointer-events:none;
}
.hero-inner{ position:relative; }

.hero-logo{ margin-bottom:30px; }
.hero-logo img{ height:64px; width:auto; display:block; }

.hero-wordmark{
  font-family:'Besley', serif;
  font-weight:800;
  color:var(--orange);
  font-size:clamp(2rem, 5vw, 3rem);
  letter-spacing:0.01em;
  text-transform:uppercase;
}
.hero-subtitle{
  font-family:'Besley', serif;
  font-weight:600;
  color:var(--cream);
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.95rem;
  margin-top:8px;
}
.hero p.lede{
  max-width:52ch;
  margin-top:24px;
  font-size:1.08rem;
  color:var(--cream-dim);
}
.tagline-mark{
  display:inline-block;
  margin-top:26px;
  font-family:'Besley', serif;
  font-weight:600;
  color:var(--cream);
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:0.85rem;
  border-top:1px solid var(--rule-light);
  padding-top:14px;
}
.tagline-mark.on-light{
  color:var(--orange);
  border-top-color:var(--rule);
  margin-top:14px;
  margin-bottom:6px;
  display:block;
}
.hero-ctas{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:34px;
}
.btn{
  display:inline-block;
  padding:13px 22px;
  font-family:'Source Serif 4', serif;
  font-size:0.98rem;
  text-decoration:none;
  border:1px solid var(--orange);
  border-radius:2px;
}
.btn-solid{ background:var(--orange); color:var(--cream); }
.btn-solid:hover{ background:#B14A26; }
.btn-ghost{ color:var(--cream); border-color:var(--rule-light); }
.btn-ghost:hover{ border-color:var(--cream); }
.btn-dark{ border-color:var(--rule); color:var(--charcoal); }
.btn-dark:hover{ border-color:var(--orange); color:var(--orange); }

/* ---------- PAGE HEADER (for non-home pages) ---------- */
.page-header{
  padding:64px 0 20px;
  border-bottom:1px solid var(--rule);
}
.page-header h1{ font-size:2.1rem; }
.page-header p{ max-width:58ch; margin-top:14px; color:#4A463E; }

/* ---------- ABOUT / CURATOR STATEMENT ---------- */
.about-body{ padding:56px 0 72px; }
.about-body p{ margin-top:20px; max-width:60ch; }
.ep-zero-panel{
  margin-top:48px;
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:26px;
  align-items:center;
  background:var(--cream-dim);
  border:1px solid var(--rule);
  padding:20px;
}
.ep-zero-panel img{ width:100%; height:auto; display:block; }
.ep-zero-panel h3{ font-size:1.2rem; }
.ep-zero-panel p{ margin-top:8px; font-size:0.98rem; }
@media (max-width:600px){
  .ep-zero-panel{ grid-template-columns:1fr; }
}

/* ---------- COLLECTION ---------- */
.collection{ padding:56px 0 96px; }
.records{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.record-card{
  display:grid;
  grid-template-columns: 168px 1fr;
  gap:0;
  background:var(--cream-dim);
  border:1px solid var(--rule);
}
@media (max-width:640px){
  .record-card{ grid-template-columns: 1fr; }
}

.record-photo{
  min-height:168px;
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:10px;
  overflow:hidden;
}
.record-photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
}
.record-photo.tone-wood, .item-gallery-main.tone-wood{
  background:
    repeating-linear-gradient(95deg, #6B4226, #6B4226 8px, #7C4F2C 8px, #7C4F2C 15px);
}
.record-photo.tone-tile, .item-gallery-main.tone-tile{
  background: var(--tile);
  background-image: linear-gradient(160deg, rgba(255,255,255,0.08), transparent 55%);
}
.record-photo.tone-pending, .item-gallery-main.tone-pending{
  background: repeating-linear-gradient(45deg, #DCD3BC, #DCD3BC 10px, #D2C6A8 10px, #D2C6A8 20px);
}
.record-photo.tone-paper, .item-gallery-main.tone-paper{
  background:
    repeating-linear-gradient(0deg, #E4DCC6, #E4DCC6 24px, #DACEAF 24px, #DACEAF 25px);
}
.record-photo span{
  position:relative;
  font-family:'Special Elite', monospace;
  font-size:0.68rem;
  letter-spacing:0.03em;
  background:rgba(28,26,23,0.6);
  color:var(--cream);
  padding:3px 6px;
}

.record-body{ padding:22px 24px; }
.record-ref{
  font-family:'Special Elite', monospace;
  font-size:0.82rem;
  color:var(--orange);
  letter-spacing:0.03em;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.record-title{
  font-family:'Besley', serif;
  font-weight:700;
  font-size:1.3rem;
  margin-top:6px;
}
.record-meta{
  display:flex; flex-wrap:wrap; gap:4px 18px;
  margin-top:10px;
  font-family:'Special Elite', monospace;
  font-size:0.74rem;
  color:#5A564C;
}
.record-meta .field-label{ color:#8A8578; }
.record-desc{
  margin-top:14px;
  font-size:0.98rem;
  max-width:58ch;
}
.record-listen{
  margin-top:16px;
  display:inline-block;
  font-family:'Source Serif 4', serif;
  font-size:0.95rem;
  text-decoration:none;
  border-bottom:1px solid var(--orange);
  color:var(--charcoal);
}
.record-listen:hover{ color:var(--orange); }

.record-card.pending{ opacity:0.82; }
.record-card.pending .record-title{ color:#5A564C; }
.status-pill{
  display:inline-block;
  margin-top:14px;
  font-family:'Special Elite', monospace;
  font-size:0.7rem;
  letter-spacing:0.04em;
  padding:3px 8px;
  background:var(--rule);
  color:#5A564C;
}

/* ---------- LISTEN ---------- */
.listen-body{ padding:56px 0 96px; }
.platform-list{
  margin-top:28px;
  display:flex; flex-wrap:wrap; gap:14px;
}
.platform-list a{
  text-decoration:none;
  border:1px solid var(--rule);
  background:var(--cream-dim);
  padding:16px 22px;
  min-width:160px;
  display:flex; flex-direction:column; gap:4px;
  color:var(--charcoal);
}
.platform-list a:hover{ border-color:var(--orange); background:#fff; }
.platform-list .platform-name{
  font-family:'Besley', serif;
  font-weight:700;
  font-size:1.05rem;
}
.platform-list .platform-hint{
  font-family:'Special Elite', monospace;
  font-size:0.7rem;
  letter-spacing:0.03em;
  color:#8A8578;
  text-transform:uppercase;
}
.platform-list a:hover .platform-hint{ color:var(--orange); }

/* ---------- FOOTER ---------- */
footer{
  background:var(--charcoal);
  color:var(--cream-dim);
  padding:52px 0 40px;
}
footer .foot-top{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px;
  padding-bottom:28px;
  border-bottom:1px solid var(--rule-light);
}
footer .foot-brand{ display:flex; align-items:center; gap:10px; }
footer .foot-brand img{ height:28px; width:auto; }
footer .foot-tagline{
  font-family:'Besley', serif; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em; font-size:0.8rem;
  color:var(--cream-dim);
  margin-top:6px;
}
footer .foot-links{
  display:flex; gap:20px; list-style:none; margin:0; padding:0;
}
footer .foot-links a{ text-decoration:none; font-size:0.92rem; }
footer .foot-links a:hover{ color:var(--orange); }
footer .foot-bottom{
  margin-top:22px;
  font-size:0.82rem;
  color:#8B877C;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

.runtime-badge{
  font-family:'Source Serif 4', serif;
  font-size:0.72rem;
  color:#5A564C;
  background:rgba(28,26,23,0.08);
  padding:2px 7px;
  border-radius:2px;
}

.tag-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.tag-pill{
  font-family:'Source Serif 4', serif;
  font-size:0.76rem;
  color:var(--orange);
  border:1px solid rgba(200,85,45,0.35);
  padding:2px 9px;
  border-radius:20px;
}

.highlight-card{ border-color:var(--orange); }
.highlight-card .status-pill:last-child{ background:rgba(200,85,45,0.12); color:var(--orange); }

/* Found/Acquired status pills — colours sampled from the real
   database app, not approximated. */
.status-pill-found{ background:rgba(92,124,92,0.14); color:#5C7C5C; margin-right:8px; }
.status-pill-acquired{ background:rgba(118,93,42,0.14); color:#765D2A; margin-right:8px; }

.record-provenance{ margin-top:12px; }
.record-provenance .record-meta{ margin-top:4px; }
.record-provenance .record-meta:first-child{ margin-top:10px; }
.record-meta em{ font-style:italic; color:#8A8578; }

.catalogue-stat{
  display:inline-block;
  margin-top:18px;
  padding:8px 14px;
  border:1px solid var(--rule);
  background:var(--cream-dim);
  font-family:'Special Elite', monospace;
  font-size:0.78rem;
  letter-spacing:0.03em;
  color:#5A564C;
}
.catalogue-stat strong{ color:var(--charcoal); font-weight:400; }

.wider-section{
  padding:48px 0 8px;
}
.wider-section .section-label{
  font-family:'Special Elite', monospace;
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:var(--orange);
  margin-bottom:14px;
  display:block;
}
.catalogue-note{
  font-size:0.9rem;
  color:#6b675c;
  margin-top:18px;
  padding-top:16px;
  border-top:1px dotted var(--rule);
}

/* skip-link for accessibility / SEO hygiene */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--orange); color:var(--cream);
  padding:10px 16px; z-index:100;
}
.skip-link:focus{ left:10px; top:10px; }

/* ---------- Shop / cart ---------- */
.shop-toolbar{ display:flex; justify-content:flex-end; margin-bottom:8px; }
.cart-toggle{
  font-family:'Source Serif 4', serif; font-size:0.9rem; padding:10px 18px;
  border:1px solid var(--charcoal); background:var(--charcoal); color:var(--cream);
  cursor:pointer; border-radius:2px; position:relative;
}
.cart-toggle .cart-count{
  display:inline-block; min-width:18px; padding:0 4px; margin-left:6px;
  background:var(--orange); color:var(--cream); border-radius:10px;
  font-size:0.76rem; text-align:center; line-height:18px;
}

.add-to-cart-row{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.qty-stepper{ display:inline-flex; align-items:center; border:1px solid var(--rule); border-radius:2px; }
.qty-stepper button{
  width:30px; height:30px; border:none; background:transparent; cursor:pointer;
  font-size:1rem; color:var(--charcoal); font-family:'Source Serif 4', serif;
}
.qty-stepper button:hover{ background:var(--cream-dim); }
.qty-stepper input{
  width:34px; text-align:center; border:none; border-left:1px solid var(--rule);
  border-right:1px solid var(--rule); font-family:'Source Serif 4', serif; font-size:0.95rem;
  padding:6px 0; -moz-appearance:textfield;
}
.sold-out-pill{
  display:inline-block; margin-top:14px; font-family:'Special Elite', monospace;
  font-size:0.76rem; letter-spacing:0.03em; color:#8A8578; background:var(--cream-dim);
  padding:6px 11px; border-radius:2px;
}

/* Slide-in cart drawer */
.cart-overlay{
  position:fixed; inset:0; background:rgba(28,26,23,0.5); z-index:200;
  opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px, 100vw);
  background:var(--cream); z-index:201; box-shadow:-8px 0 24px rgba(0,0,0,0.18);
  transform:translateX(100%); transition:transform 0.25s ease; display:flex; flex-direction:column;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 22px; border-bottom:1px solid var(--rule);
}
.cart-drawer-head h2{ font-size:1.1rem; margin:0; }
.cart-close{ background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--charcoal); line-height:1; }
.cart-drawer-body{ flex:1; overflow-y:auto; padding:18px 22px; }
.cart-empty{ color:#8A8578; font-size:0.92rem; margin-top:20px; }
.cart-line{ display:flex; gap:12px; padding:14px 0; border-bottom:1px dotted var(--rule); }
.cart-line-info{ flex:1; }
.cart-line-name{ font-weight:600; font-size:0.95rem; }
.cart-line-price{ font-size:0.85rem; color:#6b675c; margin-top:2px; }
.cart-line-remove{
  font-family:'Special Elite', monospace; font-size:0.74rem; color:#A3441F;
  background:none; border:none; cursor:pointer; padding:0; margin-top:6px;
}
.cart-drawer-foot{ border-top:1px solid var(--rule); padding:18px 22px; }
.cart-subtotal{ display:flex; justify-content:space-between; font-size:1rem; margin-bottom:14px; }
.cart-subtotal strong{ font-family:'Special Elite', monospace; }
.cart-checkout-btn{
  width:100%; padding:12px; background:var(--orange); color:var(--cream);
  border:none; border-radius:2px; font-family:'Source Serif 4', serif; font-size:0.98rem; cursor:pointer;
}
.cart-checkout-btn:disabled{ opacity:0.5; cursor:not-allowed; }

/* Checkout panel (replaces cart body when checking out) */
.checkout-field{ margin-bottom:14px; }
.checkout-field label{
  display:block; font-family:'Special Elite', monospace; font-size:0.72rem;
  letter-spacing:0.03em; color:#6b675c; margin-bottom:5px; text-transform:uppercase;
}
.checkout-field input{
  width:100%; padding:9px 11px; font-family:'Source Serif 4', serif; font-size:0.92rem;
  border:1px solid var(--rule); border-radius:2px;
}
.checkout-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#sq-card-container{ margin:14px 0; min-height:90px; }
.checkout-status{ font-size:0.88rem; margin-top:10px; }
.checkout-status.err{ color:#A3441F; }
.checkout-status.ok{ color:#3F5A3F; }
.checkout-back{
  background:none; border:none; font-family:'Special Elite', monospace; font-size:0.76rem;
  color:#6b675c; cursor:pointer; padding:0; margin-bottom:14px;
}

/* ---------- Staff card (About page) ---------- */
.staff-card{
  display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap;
  border:1px solid var(--rule); background:var(--cream-dim);
  padding:22px; margin-bottom:36px; max-width:520px;
}
.staff-photo{
  width:180px; flex-shrink:0; border:1px solid var(--rule); background:#000;
}
.staff-photo img{ display:block; width:100%; height:auto; }
.staff-info{ padding-top:4px; }
.staff-name{
  font-family:'Besley', serif; font-weight:700; font-size:1.5rem;
  margin:0 0 8px;
}
.staff-roles{
  list-style:none; margin:0 0 4px; padding:0;
  font-family:'Special Elite', monospace; font-size:0.78rem; letter-spacing:0.04em;
  color:var(--orange); text-transform:uppercase;
}
.staff-roles li{ padding:3px 0; }
@media (max-width:480px){
  .staff-photo{ width:140px; }
}

/* ---------- Episode detail page (mockup) ---------- */
.detail-header{
  padding:44px 0 32px; border-bottom:1px solid var(--rule);
}
.detail-header .record-ref{ margin-bottom:8px; }
.detail-header h1{ margin:0 0 14px; }
.detail-header .record-meta{ margin-bottom:18px; }
.detail-header .record-desc{ max-width:64ch; font-size:1.02rem; }
.detail-header .btn{ margin-top:20px; }

.detail-items{ padding:44px 0 80px; }
.item-block{
  display:grid; grid-template-columns: 340px 1fr; gap:36px;
  padding:36px 0; border-bottom:1px dotted var(--rule);
}
.item-block:last-child{ border-bottom:none; }
.item-label{
  font-family:'Special Elite', monospace; font-size:0.74rem; letter-spacing:0.05em;
  color:var(--orange); text-transform:uppercase; margin-bottom:10px; display:block;
}

.item-gallery-main{
  width:100%; max-height:640px;
  border:1px solid var(--rule); background:var(--cream-dim);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.item-gallery-main img{
  display:block; width:100%; height:auto; max-height:640px; object-fit:contain;
}
.item-thumbs{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.item-thumb{
  width:56px; height:56px; border:1px solid var(--rule); background:var(--cream-dim);
  cursor:pointer; padding:0; overflow:hidden; position:relative;
}
.item-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.item-thumb.active{ border:2px solid var(--orange); }

.item-info h3{ margin:0 0 10px; }
.item-info .record-provenance{ margin-bottom:18px; }
.item-writeup p{ margin:0 0 14px; font-size:0.98rem; line-height:1.65; }
.item-writeup p:last-child{ margin-bottom:0; }

@media (max-width:720px){
  .item-block{ grid-template-columns:1fr; }
}

/* ---------- Studio: item image manager (episode item sub-form) ---------- */
.item-image-manager{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.item-image-manager:empty{ display:none; }
.item-image-thumb{
  position:relative; width:72px; height:72px; border:1px solid var(--rule);
  background:#fff; overflow:hidden;
}
.item-image-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.item-image-thumb .rm{
  position:absolute; top:2px; right:2px; width:18px; height:18px; line-height:16px;
  text-align:center; background:rgba(28,26,23,0.75); color:#fff; border:none;
  border-radius:50%; cursor:pointer; font-size:0.8rem; padding:0;
}
.item-image-thumb .mv{
  position:absolute; bottom:2px; width:18px; height:18px; line-height:16px;
  text-align:center; background:rgba(28,26,23,0.6); color:#fff; border:none;
  cursor:pointer; font-size:0.7rem; padding:0;
}
.item-image-thumb .mv.left{ left:2px; }
.item-image-thumb .mv.right{ right:2px; }

/* ---------- Listen page: membership panel ---------- */
.membership-panel{
  border:1px solid var(--rule); background:var(--cream-dim);
  padding:32px; margin-top:36px; max-width:640px;
}
.membership-panel h2{ margin:0 0 14px; }
.membership-panel p{ margin:0 0 20px; max-width:56ch; }
.membership-benefits{
  list-style:none; margin:0; padding:0;
  display:grid; gap:10px;
}
.membership-benefits li{
  font-size:0.95rem; padding-left:20px; position:relative;
}
.membership-benefits li::before{
  content:"\2014"; position:absolute; left:0; color:var(--orange);
}
.become-member-label{
  font-family:'Special Elite', monospace; font-size:0.78rem; letter-spacing:0.04em;
  color:#8A8578; text-transform:uppercase; display:block; margin:36px 0 4px;
}

/* ---------- Multi-image gallery trigger + lightbox ---------- */
.record-photo.gallery-trigger{ cursor:pointer; }
.gallery-badge{
  position:absolute; bottom:8px; right:8px; z-index:2;
  background:rgba(28,26,23,0.75); color:#fff;
  font-family:'Special Elite', monospace; font-size:0.7rem;
  padding:3px 8px; border-radius:2px; letter-spacing:0.02em;
}
.moj-lightbox{
  position:fixed; inset:0; z-index:500;
  background:rgba(20,18,16,0.92);
  display:flex; align-items:center; justify-content:center;
  padding:40px;
}
.moj-lightbox[hidden]{ display:none; }
.moj-lightbox-img{
  max-width:min(90vw, 900px); max-height:80vh;
  width:auto; height:auto; display:block;
  border:1px solid rgba(255,255,255,0.15);
}
.moj-lightbox-close, .moj-lightbox-prev, .moj-lightbox-next{
  position:absolute; background:rgba(255,255,255,0.08); color:#fff;
  border:1px solid rgba(255,255,255,0.25); cursor:pointer;
  font-family:'Besley', serif; line-height:1;
}
.moj-lightbox-close{ top:20px; right:20px; width:40px; height:40px; font-size:1.3rem; }
.moj-lightbox-prev, .moj-lightbox-next{
  top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:1.5rem;
}
.moj-lightbox-prev{ left:20px; }
.moj-lightbox-next{ right:20px; }
.moj-lightbox-close:hover, .moj-lightbox-prev:hover, .moj-lightbox-next:hover{
  background:rgba(255,255,255,0.18);
}
.moj-lightbox-count{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:#fff; font-family:'Special Elite', monospace; font-size:0.8rem;
}
@media (max-width:600px){
  .moj-lightbox-prev, .moj-lightbox-next{ width:40px; height:40px; font-size:1.2rem; }
  .moj-lightbox{ padding:16px; }
}


/* =====================================================================
   OCTOBER 2026 REDESIGN — merged Collection + Listen, carousel, object
   cards, pop-up viewer, glance stats, home feature, Instagram buttons.
   ===================================================================== */

/* ---------- Nav: Listen call-to-action + tighter mobile ---------- */
.nav-links{ align-items:center; }
.nav-links a.nav-cta{
  background:var(--orange); color:var(--cream); border:1px solid var(--orange);
  padding:7px 16px; border-radius:2px; font-size:0.9rem;
}
.nav-links a.nav-cta:hover{ background:#B14A26; border-color:#B14A26; }
.nav-links a.nav-cta.active{ color:var(--cream); }
@media (max-width:620px){
  .nav-links{ gap:13px; }
  .nav-links a.nav-cta{ padding:6px 11px; font-size:0.82rem; }
}
@media (max-width:380px){
  .nav-links{ gap:10px; }
  .nav-links a{ font-size:0.78rem; }
  .nav-brand img{ height:26px; }
}

/* ---------- Buttons: Instagram ---------- */
.btn-ig{
  display:inline-flex; align-items:center; gap:10px;
  border-color:var(--rule); color:var(--charcoal); background:transparent;
}
.btn-ig svg{ width:18px; height:18px; fill:currentColor; flex-shrink:0; }
.btn-ig:hover{ border-color:var(--orange); color:var(--orange); }
footer .btn-ig{ color:var(--cream); border-color:var(--rule-light); }
footer .btn-ig:hover{ color:var(--orange); border-color:var(--orange); }
.foot-follow{ margin-top:22px; }

/* ---------- Postage note on prices ---------- */
.postage-note{ font-size:0.72rem; color:#8A8578; letter-spacing:0.02em; margin-left:2px; }

/* ---------- Carousel ---------- */
.moj-carousel{ width:100%; }
.car-stage{
  position:relative; width:100%; background:var(--cream-dim);
  border:1px solid var(--rule); display:flex; align-items:center; justify-content:center;
  min-height:240px; max-height:560px; overflow:hidden; cursor:zoom-in; outline-offset:2px;
}
.car-img{ display:block; width:100%; height:auto; max-height:560px; object-fit:contain; }
.car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  background:rgba(28,26,23,0.72); color:#fff; border:1px solid rgba(255,255,255,0.35);
  font-family:'Besley', serif; font-size:1.5rem; line-height:1; cursor:pointer; padding:0 0 3px;
  display:flex; align-items:center; justify-content:center;
}
.car-btn:hover{ background:var(--orange); }
.car-prev{ left:10px; } .car-next{ right:10px; }
.car-count{
  position:absolute; top:10px; left:10px; background:rgba(28,26,23,0.78); color:#fff;
  font-family:'Special Elite', monospace; font-size:0.74rem; padding:3px 9px; border-radius:2px;
}
.car-zoom{
  position:absolute; bottom:10px; right:10px; background:rgba(28,26,23,0.6); color:#fff;
  font-family:'Special Elite', monospace; font-size:0.68rem; padding:3px 8px; border-radius:2px;
  opacity:0; transition:opacity .15s;
}
.car-stage:hover .car-zoom, .car-stage:focus .car-zoom{ opacity:1; }
.car-thumbs{ display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; }
.car-thumb{
  flex:0 0 64px; height:64px; border:1px solid var(--rule); background:var(--cream-dim);
  cursor:pointer; padding:0; position:relative; overflow:hidden;
}
.car-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.car-thumb.active{ border:2px solid var(--orange); }
.item-block .moj-carousel{ max-width:340px; }

/* ---------- Collection page: listen band ---------- */
.listen-band{
  background:var(--charcoal); color:var(--cream); padding:48px 0 52px;
}
.listen-band-inner{
  display:grid; grid-template-columns: 1fr 1.25fr; gap:40px; align-items:start;
}
.listen-band h2{ color:var(--cream); font-size:1.5rem; margin:0 0 12px; }
.listen-band p{ color:var(--cream-dim); margin:0 0 14px; max-width:46ch; font-size:0.98rem; }
.listen-band .membership-benefits{ gap:6px; }
.listen-band .membership-benefits li{ color:var(--cream-dim); font-size:0.92rem; }
.listen-band .platform-list{ margin-top:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.listen-band .platform-list a{
  background:rgba(242,237,226,0.06); border-color:var(--rule-light); color:var(--cream); min-width:0;
}
.listen-band .platform-list a:hover{ background:rgba(242,237,226,0.14); border-color:var(--orange); }
.listen-band .platform-hint{ color:#A8A394; }
@media (max-width:760px){
  .listen-band-inner{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:420px){
  .listen-band .platform-list{ grid-template-columns:1fr; }
}
#listen{ scroll-margin-top:70px; }

/* ---------- Collection page: grid + chips ---------- */
.objects-section{ padding:40px 0 40px; }
.objects-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 24px; margin-bottom:18px; }
.objects-head h2{ margin:0; }
.objects-count{ font-family:'Special Elite', monospace; font-size:0.78rem; color:#8A8578; letter-spacing:0.03em; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.chip{
  font-family:'Source Serif 4', serif; font-size:0.9rem; cursor:pointer;
  border:1px solid var(--rule); background:transparent; color:var(--charcoal);
  padding:6px 14px; border-radius:20px;
}
.chip span{ font-family:'Special Elite', monospace; font-size:0.72rem; color:#8A8578; margin-left:4px; }
.chip:hover{ border-color:var(--orange); }
.chip.active{ background:var(--charcoal); color:var(--cream); border-color:var(--charcoal); }
.chip.active span{ color:var(--cream-dim); }

.obj-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px;
}
.obj-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--cream-dim); border:1px solid var(--rule);
  transition:transform .12s, border-color .12s, box-shadow .12s;
}
.obj-card:hover, .obj-card:focus-visible{
  border-color:var(--orange); transform:translateY(-2px); box-shadow:0 6px 16px rgba(28,26,23,0.12);
}
.obj-photo{
  position:relative; aspect-ratio:1/1; background:#fff; overflow:hidden;
  border-bottom:1px solid var(--rule);
}
.obj-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.obj-photo.tone-pending{ background:repeating-linear-gradient(45deg, #DCD3BC, #DCD3BC 10px, #D2C6A8 10px, #D2C6A8 20px); }
.obj-photo.tone-wood{ background:repeating-linear-gradient(95deg, #6B4226, #6B4226 8px, #7C4F2C 8px, #7C4F2C 15px); }
.obj-photo.tone-tile{ background:var(--tile); }
.obj-photo.tone-paper{ background:repeating-linear-gradient(0deg, #E4DCC6, #E4DCC6 24px, #DACEAF 24px, #DACEAF 25px); }
.obj-ph{ position:absolute; left:8px; bottom:8px; font-family:'Special Elite', monospace; font-size:0.68rem; background:rgba(28,26,23,0.6); color:var(--cream); padding:3px 6px; }
.obj-badge{
  position:absolute; top:8px; left:8px; background:var(--orange); color:var(--cream);
  font-family:'Special Elite', monospace; font-size:0.66rem; letter-spacing:0.04em; padding:3px 8px;
}
.obj-count{
  position:absolute; bottom:8px; right:8px; background:rgba(28,26,23,0.78); color:#fff;
  font-family:'Special Elite', monospace; font-size:0.68rem; padding:3px 8px; border-radius:2px;
}
.obj-body{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.obj-ref{ font-family:'Special Elite', monospace; font-size:0.72rem; color:var(--orange); letter-spacing:0.03em; }
.obj-title{ font-family:'Besley', serif; font-weight:700; font-size:1.05rem; line-height:1.3; margin:0; }
.obj-body .status-pill{ margin-top:0; }
.obj-meta{ font-family:'Special Elite', monospace; font-size:0.72rem; color:#5A564C; }
.obj-desc{
  margin:2px 0 0; font-size:0.88rem; color:#4A463E; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
@media (max-width:480px){
  .obj-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .obj-body{ padding:10px 11px 14px; }
  .obj-title{ font-size:0.95rem; }
  .obj-desc{ display:none; }
}

/* ---------- Pop-up viewer ---------- */
body.modal-open{ overflow:hidden; }
.obj-modal{
  position:fixed; inset:0; z-index:200; background:rgba(20,18,16,0.72);
  display:flex; align-items:flex-start; justify-content:center; padding:32px 16px; overflow-y:auto;
}
.obj-modal[hidden]{ display:none; }
.obj-modal-panel{
  background:var(--cream); width:100%; max-width:960px; border:1px solid var(--rule);
  box-shadow:0 20px 60px rgba(0,0,0,0.4); margin:auto 0;
}
.obj-modal-bar{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-bottom:1px solid var(--rule); background:var(--cream-dim); position:sticky; top:0; z-index:3;
}
.obj-modal-pos{ flex:1; text-align:center; font-family:'Special Elite', monospace; font-size:0.74rem; color:#8A8578; }
.obj-nav{
  font-family:'Source Serif 4', serif; font-size:0.88rem; background:transparent; cursor:pointer;
  border:1px solid var(--rule); padding:6px 12px; color:var(--charcoal);
}
.obj-nav:hover:not(:disabled){ border-color:var(--orange); color:var(--orange); }
.obj-nav:disabled{ opacity:0.35; cursor:default; }
.obj-close{
  width:36px; height:36px; font-size:1.4rem; line-height:1; background:var(--charcoal); color:var(--cream);
  border:none; cursor:pointer; margin-left:4px;
}
.obj-close:hover{ background:var(--orange); }
.obj-detail{ display:grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap:32px; padding:26px; }
.obj-detail-info h2{ font-size:1.6rem; margin:6px 0 10px; }
.obj-detail-info .record-ref{ margin-bottom:0; }
.obj-detail-info .item-writeup{ margin-top:14px; }
.obj-episode{
  margin-top:22px; padding:18px 20px; background:var(--cream-dim); border:1px solid var(--rule);
  border-left:4px solid var(--orange);
}
.obj-episode h3{ font-size:1.12rem; margin:2px 0 4px; }
.obj-episode .record-desc{ font-size:0.92rem; margin-top:10px; }
.obj-episode-none{ font-size:0.92rem; color:#4A463E; border-left-color:var(--rule); }
.obj-episode-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:14px; }
.obj-episode-actions .record-listen{ margin-top:0; }
.obj-episode .section-label, .section-label{
  font-family:'Special Elite', monospace; font-size:0.72rem; letter-spacing:0.05em; color:var(--orange); display:block;
}
@media (max-width:760px){
  .obj-modal{ padding:0; }
  .obj-modal-panel{ min-height:100%; border:none; margin:0; }
  .obj-detail{ grid-template-columns:1fr; gap:20px; padding:16px; }
  .obj-nav{ font-size:0.8rem; padding:6px 9px; }
}

/* ---------- Glance ---------- */
.glance-section{ padding:20px 0 84px; }
.glance-section h2{ margin-bottom:6px; }
.glance-sub{ color:#4A463E; max-width:56ch; margin:0 0 22px; }
.glance-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:14px; }
.glance-tile{
  background:var(--cream-dim); border:1px solid var(--rule); padding:16px 18px;
  display:flex; flex-direction:column; gap:2px;
}
.glance-tile strong{ font-family:'Besley', serif; font-weight:800; font-size:2rem; line-height:1.1; color:var(--charcoal); }
.glance-tile span{ font-size:0.9rem; color:#4A463E; }
.glance-tile em{ font-family:'Special Elite', monospace; font-style:normal; font-size:0.7rem; color:var(--orange); margin-top:4px; }
.glance-charts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; margin-top:18px; }
.glance-chart{ margin:0; background:var(--cream-dim); border:1px solid var(--rule); padding:16px 18px 14px; }
.glance-chart figcaption{ font-family:'Special Elite', monospace; font-size:0.74rem; letter-spacing:0.04em; color:#5A564C; text-transform:uppercase; margin-bottom:10px; }
.glance-chart svg{ width:100%; height:auto; display:block; }
.glance-axis{ display:flex; justify-content:space-between; gap:8px; font-family:'Special Elite', monospace; font-size:0.68rem; color:#8A8578; margin-top:6px; }
.cat-row{ display:grid; grid-template-columns: 104px 1fr 30px; gap:8px; align-items:center; font-size:0.84rem; padding:3px 0; }
.cat-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-bar{ background:rgba(28,26,23,0.08); height:10px; display:block; }
.cat-bar i{ display:block; height:100%; background:var(--orange); }
.cat-n{ font-family:'Special Elite', monospace; font-size:0.72rem; color:#5A564C; text-align:right; }

/* ---------- Home: from the vaults ---------- */
.vaults{ padding:60px 0 72px; }
.vaults h2{ margin:0 0 8px; font-size:1.7rem; }
.vaults-intro{ max-width:56ch; color:#4A463E; margin:0 0 26px; }
.vault-feature{
  display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap:34px; align-items:start;
}
.vault-info h3{ font-size:1.5rem; margin:6px 0 8px; }
.vault-info .record-desc{ margin-top:14px; }
.vault-strip{ display:flex; gap:10px; margin-top:26px; overflow-x:auto; padding-bottom:6px; }
.vault-thumb{
  flex:0 0 76px; height:76px; border:1px solid var(--rule); background:var(--cream-dim); padding:0;
  cursor:pointer; position:relative; overflow:hidden; font-family:'Special Elite', monospace; font-size:0.6rem;
}
.vault-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vault-thumb.active{ border:2px solid var(--orange); }
.vault-more{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; margin-top:22px; }
.vault-label{ font-family:'Special Elite', monospace; font-size:0.72rem; color:#8A8578; letter-spacing:0.04em; margin-top:26px; display:block; }
@media (max-width:760px){
  .vault-feature{ grid-template-columns:1fr; gap:22px; }
}
.wrap-wide.vaults-wrap{ max-width:980px; }

/* ---------- About ---------- */
.ep-zero-panel[hidden]{ display:none; }
.ep-zero-panel .btn{ margin-top:6px; }
.ep-zero-panel .tag-row{ margin-top:8px; }
.about-people{ margin-top:48px; }
.staff-card{ max-width:none; display:grid; grid-template-columns: 260px 1fr; gap:28px; padding:22px; align-items:center; }
.staff-photo{ width:100%; background:var(--cream); }
.staff-roles li{ border-bottom:1px dotted var(--rule); padding:5px 0; font-size:0.76rem; }
.staff-roles li:last-child{ border-bottom:none; }
.staff-note{ font-size:0.9rem; color:#6b675c; margin-top:12px; font-style:italic; }
@media (max-width:620px){
  .staff-card{ grid-template-columns:1fr; }
  .staff-photo{ max-width:320px; }
}
.follow-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:34px; }
.follow-row p{ margin:0; max-width:none; }

/* ---------- Shop note ---------- */
.shop-info{
  margin-top:26px; padding:16px 20px; background:var(--cream-dim); border:1px solid var(--rule);
  font-size:0.92rem; color:#4A463E;
}
.shop-info strong{ color:var(--charcoal); }
.shop-info p{ margin:0 0 6px; max-width:none; }
.shop-info p:last-child{ margin:0; }

@media (prefers-reduced-motion: reduce){
  .obj-card{ transition:none; }
}
.ep-zero-panel:not(:has(img)){ grid-template-columns:1fr; }

/* ---------- Episodes list (Collection page) ---------- */
.episodes-section{ padding:52px 0 8px; }
.ep-list{ display:flex; flex-direction:column; gap:18px; }
.ep-row{
  display:grid; grid-template-columns:200px 1fr; background:var(--cream-dim);
  border:1px solid var(--rule); border-left:4px solid var(--orange);
}
.ep-row-img{ position:relative; display:block; min-height:200px; background:#fff; border-right:1px solid var(--rule); }
.ep-row-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.ep-row-body{ padding:20px 24px; }
.ep-row-body h3{ font-size:1.3rem; margin:6px 0 0; }
.ep-row-body .record-desc{ margin-top:10px; font-size:0.96rem; }
.ep-row-body .obj-episode-actions{ margin-top:14px; }
.ep-coming{ margin-top:0; background:rgba(200,85,45,0.12); color:var(--orange); }
@media (max-width:600px){
  .ep-row{ grid-template-columns:1fr; }
  .ep-row-img{ min-height:0; aspect-ratio:16/9; border-right:none; border-bottom:1px solid var(--rule); }
}
.record-desc a, .item-writeup a{ color:var(--orange); }

/* =====================================================================
   ROUND 5 — shop photos, clearer galleries, line breaks
   ===================================================================== */
/* Shop cards: big photo column with the full carousel */
.record-card.product-card{ grid-template-columns: minmax(280px, 400px) 1fr; }
.product-photo{ padding:16px; background:var(--cream); border-right:1px solid var(--rule); }
.product-photo .car-stage{ background:#fff; min-height:300px; max-height:460px; }
.product-photo .car-img{ max-height:460px; }
.product-photo .car-thumb{ flex-basis:72px; height:72px; }
.record-photo.product-photo-empty{ min-height:300px; }
@media (max-width:760px){
  .record-card.product-card{ grid-template-columns: 1fr; }
  .product-photo{ border-right:0; border-bottom:1px solid var(--rule); }
}
/* Make "there are more photos" and "click to enlarge" obvious everywhere */
.car-btn{ width:46px; height:46px; background:rgba(28,26,23,0.82); box-shadow:0 1px 4px rgba(0,0,0,0.3); }
.car-count{ font-size:0.8rem; padding:4px 10px; }
.car-zoom{ opacity:0.9; }
.gallery-badge{ font-size:0.78rem; padding:5px 10px; background:rgba(28,26,23,0.88); }
.gallery-badge-zoom{ opacity:0.9; }
.record-photo.gallery-trigger{ cursor:zoom-in; }
.moj-lightbox.single .moj-lightbox-prev,
.moj-lightbox.single .moj-lightbox-next,
.moj-lightbox.single .moj-lightbox-count{ display:none; }