/* ============================================================
   THE ARCHIVE — shared stylesheet
   Used by index.html (registry) and bot.html (detail pages)
   ============================================================ */

:root{
  --base:      #0a0b0d;
  --panel:     #16181c;
  --panel-2:   #101216;
  --ink:       #e8e4dc;
  --rust:      #c9442e;
  --rust-dim:  #8f3322;
  --steel:     #5a6470;
  --hair:      #3a3d42;

  --font-head: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 940px;
}

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

body{
  background:
    radial-gradient(circle at 50% -10%, #131519 0%, var(--base) 55%) fixed,
    var(--base);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.01em;
  padding:0 20px 120px;
}

body::before{
  content:""; position:fixed; inset:0;
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size:60px 60px; opacity:.035; pointer-events:none; z-index:0;
}

.wrap{ max-width:var(--maxw); margin:0 auto; position:relative; z-index:1; }

a{ color:inherit; }

/* ---------- masthead ---------- */
header.site{ padding:72px 0 30px; border-bottom:1px solid var(--hair); }

.stamp-row{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--steel); margin-bottom:26px;
}
.stamp-row .dot{ width:7px; height:7px; border-radius:50%; background:var(--rust);
  box-shadow:0 0 10px var(--rust); animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
.stamp-row .spacer{ flex:1; height:1px; background:var(--hair); }

h1.title{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(44px, 9vw, 96px); line-height:.92;
  letter-spacing:-.01em; text-transform:uppercase;
}
h1.title .sub{ display:block; color:var(--rust); }

.lede{ margin-top:24px; max-width:62ch; color:#bdbab2; font-size:16px; }
.lede strong{ color:var(--ink); font-weight:600; }

.meta-strip{
  margin-top:30px; display:flex; flex-wrap:wrap; gap:10px 28px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--steel);
}
.meta-strip b{ color:var(--ink); font-weight:500; }

/* ---------- filter bar ---------- */
.controls{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin:40px 0 6px;
}
.controls .label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel);
}
.filterbar{ display:flex; flex-wrap:wrap; gap:8px; }
.filter{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--steel);
  background:transparent; border:1px solid var(--hair);
  padding:6px 11px; cursor:pointer; transition:.18s;
}
.filter:hover{ color:var(--ink); border-color:var(--steel); }
.filter.on{ color:#0a0b0d; background:var(--rust); border-color:var(--rust); }

.search{
  margin-left:auto;
  font-family:var(--font-mono); font-size:12px; color:var(--ink);
  background:var(--panel-2); border:1px solid var(--hair);
  padding:8px 12px; min-width:180px;
}
.search::placeholder{ color:var(--steel); }
.search:focus{ outline:none; border-color:var(--rust-dim); }

.controls-right{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.controls-right .search{ margin-left:0; }
.sortsel{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:var(--panel-2); border:1px solid var(--hair);
  padding:8px 10px; cursor:pointer;
}
.sortsel:focus{ outline:none; border-color:var(--rust-dim); }

.section-label{
  display:flex; align-items:baseline; gap:16px; margin:34px 0 24px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--steel);
}
.section-label::after{ content:""; flex:1; height:1px; background:var(--hair); }
.count{ color:var(--rust); }

/* ============================================================
   CASE FILE (registry card)
   ============================================================ */
.case{
  position:relative; display:block; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--hair);
  border-left:3px solid var(--rust-dim); margin-bottom:22px;
  overflow:hidden; transition:border-color .25s ease, transform .25s ease;
}
.case:hover{ border-left-color:var(--rust); transform:translateY(-2px); }

.case::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom,
    rgba(232,228,220,.045) 0px, rgba(232,228,220,.045) 1px,
    transparent 1px, transparent 3px);
  opacity:0; transition:opacity .3s ease; pointer-events:none; mix-blend-mode:screen;
}
.case:hover::after{ opacity:1; animation:flicker 3.2s steps(60) infinite; }
@keyframes flicker{
  0%,100%{opacity:.85} 7%{opacity:.5} 9%{opacity:.95}
  31%{opacity:.7} 33%{opacity:1} 60%{opacity:.6} 62%{opacity:.9}
}
.case::before{
  content:""; position:absolute; left:0; right:0; top:0; height:140px;
  background:linear-gradient(to bottom, rgba(201,68,46,.10), transparent);
  transform:translateY(-160px); pointer-events:none; z-index:2;
}
.case:hover::before{ animation:scan 2.6s linear infinite; }
@keyframes scan{ 0%{transform:translateY(-160px)} 100%{transform:translateY(760px)} }

@media (prefers-reduced-motion: reduce){
  .case:hover::after, .case:hover::before{ animation:none; }
  .stamp-row .dot{ animation:none; }
}

/* layout: thumbnail + text */
.case-inner{
  position:relative; z-index:3; display:flex; gap:0;
}
.thumb{
  flex:0 0 150px; align-self:stretch; min-height:170px;
  background:var(--panel-2); border-right:1px solid var(--hair);
  position:relative; overflow:hidden;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.25) contrast(1.05); }
/* placeholder when no art on file */
.thumb.empty{
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(45deg, #101216 0 10px, #0d0f12 10px 20px);
}
.thumb.empty span{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel); text-align:center;
  border:1px dashed var(--hair); padding:8px 10px; line-height:1.5;
}

.case-body{ flex:1; min-width:0; padding:24px 28px 26px; }

.case-head{ display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.case-no{
  font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.1em;
  color:var(--rust); padding-top:9px; white-space:nowrap;
}
.case-titleblock{ flex:1; min-width:160px; }
.case-name{
  font-family:var(--font-head); font-weight:600;
  font-size:clamp(26px, 4.6vw, 40px); line-height:1;
  text-transform:uppercase; letter-spacing:.01em;
}
.case:hover .case-name{ color:var(--ink); }
.case-alias{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel); margin-top:8px;
}
.status{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; border:1px solid var(--hair); color:var(--steel);
  padding:6px 11px; align-self:flex-start; white-space:nowrap;
}
.status.active{ color:var(--rust); border-color:var(--rust-dim); }

.case-desc{ margin:18px 0 0; max-width:60ch; color:#cfccc4; font-size:14.5px; }

.tags{ display:flex; flex-wrap:wrap; gap:7px; margin:18px 0 0; }
.tag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--steel);
  border:1px solid var(--hair); padding:4px 9px;
}

.openrow{
  display:flex; align-items:center; gap:10px; margin-top:20px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--rust);
}
.openrow .arw{ transition:transform .2s; }
.case:hover .openrow .arw{ transform:translateX(4px); }

.redaction{
  position:absolute; bottom:14px; right:-2px; z-index:4;
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rust); border:2px solid var(--rust);
  padding:4px 10px; transform:rotate(7deg); opacity:.5; pointer-events:none;
  background:rgba(10,11,13,.4);
}

.empty-state{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel); padding:40px 0;
}

/* ============================================================
   DETAIL PAGE  (bot.html)
   ============================================================ */
.backlink{
  display:inline-flex; align-items:center; gap:9px; margin:44px 0 0;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); text-decoration:none;
  transition:color .2s;
}
.backlink:hover{ color:var(--rust); }

.detail-head{
  display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap;
  margin:30px 0 0; padding-bottom:28px; border-bottom:1px solid var(--hair);
}
.detail-head .case-no{ font-size:15px; padding-top:12px; }
.detail-name{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(40px, 8vw, 80px); line-height:.92;
  text-transform:uppercase; letter-spacing:-.005em;
}
.detail-alias{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); margin-top:12px;
}

.detail-grid{
  display:grid; grid-template-columns:300px 1fr; gap:40px; margin-top:40px;
}
.art-col{ position:sticky; top:30px; align-self:start; }
.art-frame{
  border:1px solid var(--hair); background:var(--panel-2);
  aspect-ratio:2/3; overflow:hidden; position:relative;
}
.art-frame img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(.2) contrast(1.05); display:block; }
.art-frame.empty{
  display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, #101216 0 12px, #0d0f12 12px 24px);
}
.art-frame.empty span{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel); text-align:center;
  border:1px dashed var(--hair); padding:12px 14px; line-height:1.6;
}
.art-cap{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); margin-top:10px; text-align:center;
}

.dossier{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:1px; background:var(--hair); border:1px solid var(--hair); margin:0 0 26px;
}
.dossier .cell{ background:var(--panel-2); padding:13px 15px; }
.dossier .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); margin-bottom:5px; }
.dossier .v{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink);
  letter-spacing:.02em; }

.body-copy{ font-size:16px; color:#d4d1c9; max-width:64ch; }
.body-copy p{ margin-bottom:16px; }

/* credits / attribution on the bot detail page */
.credits-list{ display:flex; flex-direction:column; gap:9px; }
.credit-line{ font-family:var(--font-mono); font-size:13px; color:#cfccc4; }
.credit-role{ color:var(--steel); text-transform:uppercase; letter-spacing:.12em;
  font-size:10.5px; margin-right:8px; }
.credit-line a{ color:var(--rust); text-decoration:none; border-bottom:1px solid var(--rust-dim); }
.credit-line a:hover{ color:var(--ink); border-color:var(--rust); }

.field-section{ margin-top:32px; }
.field-section h3{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rust); margin-bottom:14px;
  padding-bottom:10px; border-bottom:1px solid var(--hair);
}

.actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin-top:34px; padding-top:26px; border-top:1px solid var(--hair);
}
.retrieve{
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); background:transparent;
  border:1px solid var(--rust-dim); padding:12px 20px; text-decoration:none;
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  transition:.2s;
}
.retrieve::before{ content:"▸"; color:var(--rust); transition:transform .2s; }
.retrieve:hover{ background:var(--rust); border-color:var(--rust); color:#0a0b0d; }
.retrieve:hover::before{ color:#0a0b0d; transform:translateX(3px); }
.retrieve.secondary{ border-color:var(--hair); }
.retrieve.secondary::before{ content:"⬡"; }
.retrieve.secondary:hover{ background:var(--steel); border-color:var(--steel); }
.ext-link{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel); text-decoration:none;
  margin-left:auto; border-bottom:1px solid transparent; transition:.2s;
}
.ext-link:hover{ color:var(--ink); border-color:var(--rust); }

/* ---------- footer ---------- */
footer{
  margin-top:80px; padding-top:30px; border-top:1px solid var(--hair);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--steel);
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
}
footer a{ color:var(--steel); text-decoration:none; border-bottom:1px solid var(--hair); }
footer a:hover{ color:var(--rust); border-color:var(--rust); }

/* ---------- responsive ---------- */
@media (max-width:640px){
  .case-inner{ flex-direction:column; }
  .thumb{ flex:none; width:100%; min-height:160px; height:200px;
    border-right:none; border-bottom:1px solid var(--hair); }
  .case-body{ padding:22px 18px; }
  .redaction{ display:none; }
  .detail-grid{ grid-template-columns:1fr; gap:28px; }
  .art-col{ position:static; max-width:280px; }
  .actions{ flex-direction:column; align-items:stretch; }
  .ext-link{ margin-left:0; }
  .search{ margin-left:0; width:100%; }
}

/* ============================================================
   SHARED TOP NAV  (all pages)
   ============================================================ */
.topnav{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding:16px 0; margin-bottom:4px;
  border-bottom:1px solid var(--hair);
  position:sticky; top:0; z-index:30;
  background:rgba(10,11,13,.82); backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.topnav .brand{
  font-family:var(--font-head); font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; font-size:17px; color:var(--ink);
  text-decoration:none; white-space:nowrap;
}
.topnav .brand b{ color:var(--rust); font-weight:700; }
.navlinks{ display:flex; gap:2px; margin-left:auto; flex-wrap:wrap; }
.navlinks a{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); text-decoration:none;
  padding:8px 13px; border:1px solid transparent; transition:.18s;
}
.navlinks a:hover{ color:var(--ink); }
.navlinks a.on{ color:var(--rust); border-color:var(--hair); background:var(--panel); }

/* trim the big top padding on mastheads now that a nav sits above */
.topnav + header.site{ padding-top:48px; }

/* generic page intro (reviews / gallery / contact share this) */
.page-head{ padding:40px 0 8px; }
.page-head .kicker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--rust); margin-bottom:14px;
}
.page-head h1{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(40px,8vw,80px); line-height:.92; text-transform:uppercase;
}
.page-head p{ margin-top:18px; max-width:62ch; color:#bdbab2; font-size:15.5px; }

/* ============================================================
   REVIEWS  (dossier-style creator entries)
   ============================================================ */
.review{
  position:relative; background:var(--panel); border:1px solid var(--hair);
  border-left:3px solid var(--rust-dim); margin-bottom:22px; overflow:hidden;
  transition:border-color .25s, transform .25s;
}
.review:hover{ border-left-color:var(--rust); transform:translateY(-2px); }
.review::after{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  mix-blend-mode:screen; transition:opacity .3s;
  background:repeating-linear-gradient(to bottom,
    rgba(232,228,220,.045) 0 1px, transparent 1px 3px);
}
.review:hover::after{ opacity:1; animation:flicker 3.2s steps(60) infinite; }
.review-inner{ position:relative; z-index:3; display:flex; align-items:stretch; }
.review-photo{ flex:0 0 170px; align-self:stretch; min-height:180px; overflow:hidden;
  border-right:1px solid var(--hair); background:var(--panel-2); position:relative; }
.review-photo img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.25) contrast(1.05); }
.review-photo.empty{ display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg, #101216 0 10px, #0d0f12 10px 20px); }
.review-photo.empty::before{ content:"?"; font-family:var(--font-head); font-weight:600;
  font-size:40px; color:var(--steel); }
.review-content{ flex:1; min-width:0; padding:24px 28px 26px; }
.review-head{ display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.review-no{ font-family:var(--font-mono); font-size:13px; font-weight:700;
  letter-spacing:.1em; color:var(--rust); padding-top:9px; white-space:nowrap; }
.review-titleblock{ flex:1; min-width:180px; }
.creator-name{ font-family:var(--font-head); font-weight:600;
  font-size:clamp(24px,4vw,36px); line-height:1; text-transform:uppercase; }
.creator-handle{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em;
  color:var(--steel); margin-top:7px; }
.rating{ font-family:var(--font-mono); font-size:13px; letter-spacing:.08em;
  color:var(--ink); white-space:nowrap; align-self:flex-start; padding-top:6px; }
.rating .stars{ color:var(--rust); letter-spacing:.04em; }
.rating .num{ color:var(--steel); margin-left:8px; font-size:11px; }
.verdict{ margin:16px 0 0; color:#cfccc4; font-size:14.5px; font-style:italic; }
.review-body{ margin-top:14px; color:#cfccc4; font-size:14.5px; max-width:64ch; }
.review-body p{ margin-bottom:12px; }
.review .actions{ margin-top:20px; padding-top:18px; }

/* click-to-open affordance + expanded review modal */
.review{ cursor:pointer; }
.review-open{ display:flex; align-items:center; gap:9px; margin-top:18px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--rust); }
.review-open .arw{ transition:transform .2s; }
.review:hover .review-open .arw{ transform:translateX(4px); }

.rev-modal{ position:fixed; inset:0; z-index:100; display:none; align-items:flex-start; justify-content:center;
  padding:5vh 18px; background:rgba(6,7,9,.94); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); overflow-y:auto; }
.rev-modal.open{ display:flex; }
.rev-modal-inner{ position:relative; background:var(--panel); border:1px solid var(--hair);
  border-left:3px solid var(--rust-dim); max-width:640px; width:100%; }
.rm-photo{ width:100%; max-height:460px; background:var(--panel-2); border-bottom:1px solid var(--hair);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.rm-photo img{ max-width:100%; max-height:460px; object-fit:contain; display:block; }
.rm-photo.empty{ height:200px; background:repeating-linear-gradient(45deg,#101216 0 10px,#0d0f12 10px 20px); }
.rm-photo.empty::before{ content:"?"; font-family:var(--font-head); font-weight:600; font-size:48px; color:var(--steel); }
.rm-content{ padding:26px 30px 30px; }
.rm-head .creator-name{ font-size:clamp(26px,4vw,38px); }
.rm-close{ position:fixed; top:18px; right:24px; z-index:2; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--steel); border:1px solid var(--hair);
  background:var(--panel); padding:8px 12px; cursor:pointer; }
.rm-close:hover{ color:var(--rust); border-color:var(--rust); }
@media (prefers-reduced-motion: reduce){ .review:hover .review-open .arw{ transform:none; } }

/* ============================================================
   GALLERY  (art showcase + lightbox)
   ============================================================ */
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:14px; margin-top:30px;
}
.tile{
  position:relative; display:block; border:1px solid var(--hair);
  background:var(--panel-2); aspect-ratio:1/1; overflow:hidden; cursor:pointer;
  transition:border-color .2s, transform .2s;
}
.tile:hover{ border-color:var(--rust); transform:translateY(-2px); }
.tile img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.3) contrast(1.05); transition:filter .25s, transform .4s; }
.tile:hover img{ filter:grayscale(0) contrast(1.05); transform:scale(1.04); }
.tile .cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:18px 12px 10px;
  background:linear-gradient(to top, rgba(10,11,13,.92), transparent);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink);
}
.tile .cap small{ display:block; color:var(--steel); font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; margin-top:3px; }
.tile .filemark{
  position:absolute; top:8px; left:8px; z-index:2;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.14em;
  color:var(--rust); background:rgba(10,11,13,.6); padding:2px 6px;
  border:1px solid var(--rust-dim);
}
.tile.broken img{ display:none; }
.tile.broken{ display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg,#101216 0 12px,#0d0f12 12px 24px); }
.tile.broken::before{ content:"NO IMAGE\A ON FILE"; white-space:pre; text-align:center;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); border:1px dashed var(--hair); padding:10px 12px; }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:30px;
  background:rgba(6,7,9,.94); backdrop-filter:blur(4px);
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:90vw; max-height:80vh; object-fit:contain;
  border:1px solid var(--hair); }
.lightbox .lb-cap{ position:absolute; bottom:24px; left:0; right:0; text-align:center;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--ink); }
.lightbox .lb-cap small{ color:var(--steel); text-transform:uppercase;
  letter-spacing:.16em; font-size:10px; display:block; margin-top:5px; }
.lightbox .lb-close{ position:absolute; top:20px; right:26px; z-index:2;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--steel);
  text-transform:uppercase; cursor:pointer; border:1px solid var(--hair); padding:7px 12px;
  background:var(--panel); }
.lightbox .lb-close:hover{ color:var(--rust); border-color:var(--rust); }

/* ============================================================
   CONTACT  (channel buttons)
   ============================================================ */
.channels{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px; margin-top:34px; }
.channel{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  background:var(--panel); border:1px solid var(--hair); border-left:3px solid var(--rust-dim);
  padding:20px 22px; transition:border-color .2s, transform .2s, background .2s;
}
.channel:hover{ border-left-color:var(--rust); transform:translateY(-2px); background:#191b20; }
.channel .ch-name{ font-family:var(--font-head); font-weight:600; font-size:22px;
  text-transform:uppercase; color:var(--ink); }
.channel .ch-handle{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  color:var(--steel); }
.channel .ch-go{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rust); margin-top:6px; }
.contact-note{ margin-top:36px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.08em; color:var(--steel); border-top:1px solid var(--hair); padding-top:20px; }

@media (max-width:560px){
  .review-inner{ flex-direction:column; }
  .review-photo{ flex:none; width:100%; height:240px; border-right:none;
    border-bottom:1px solid var(--hair); }
  .review-content{ padding:20px 18px; }
  .topnav .brand{ font-size:15px; }
  .navlinks{ width:100%; margin-left:0; }
}

/* ============================================================
   SITE-WIDE MUSIC PLAYER  (player.js injects the markup)
   ============================================================ */
.player{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(13,15,18,.94); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--hair);
  font-family:var(--font-mono); color:var(--ink);
}
.player::before{ /* thin CRT scanline skin on the bar */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(to bottom,
    rgba(232,228,220,.03) 0 1px, transparent 1px 3px);
}
.player-inner{
  position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:14px; padding:9px 20px;
}
/* collapsed = shrink to a small pill tucked in the corner */
.player.collapsed{ left:auto; right:16px; bottom:16px; border:1px solid var(--hair); }
.player.collapsed .player-inner{ padding:7px 10px; gap:8px; }
.player.collapsed .player-main,
.player.collapsed .pl-vol,
.player.collapsed .pl-toggle.list,
.player.collapsed .prev,
.player.collapsed .next,
.player.collapsed .pl-shuffle,
.player.collapsed .pl-loop,
.player.collapsed .pl-panel{ display:none; }
/* shuffle / loop active (lit) state */
.pl-btn.on{ color:var(--rust); border-color:var(--rust-dim); }

/* transport buttons */
.pl-btn{
  background:transparent; border:1px solid var(--hair); color:var(--ink);
  width:34px; height:34px; cursor:pointer; font-size:13px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; transition:.15s;
}
.pl-btn:hover{ border-color:var(--rust); color:var(--rust); }
.pl-btn.play{ width:40px; height:40px; border-color:var(--rust-dim); }
.pl-btn.play:hover{ background:var(--rust); color:#0a0b0d; border-color:var(--rust); }
.pl-transport{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }

/* now-playing + progress */
.player-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.pl-now{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.pl-eq{ color:var(--rust); font-size:11px; letter-spacing:.1em; flex:0 0 auto; }
.pl-title{ font-size:12px; letter-spacing:.04em; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.pl-title b{ color:var(--ink); font-weight:500; }
.pl-title span{ color:var(--steel); }
.pl-seekwrap{ display:flex; align-items:center; gap:10px; }
.pl-time{ font-size:10px; color:var(--steel); letter-spacing:.06em; flex:0 0 auto;
  min-width:74px; }
.pl-seek{ -webkit-appearance:none; appearance:none; flex:1; height:4px;
  background:var(--hair); cursor:pointer; outline:none; }
.pl-seek::-webkit-slider-thumb{ -webkit-appearance:none; width:11px; height:11px;
  background:var(--rust); cursor:pointer; border:0; }
.pl-seek::-moz-range-thumb{ width:11px; height:11px; background:var(--rust);
  cursor:pointer; border:0; }
.pl-seek::-moz-range-progress{ background:var(--rust); height:4px; }

/* right side: volume, playlist toggle, collapse */
.player-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.pl-vol{ -webkit-appearance:none; appearance:none; width:70px; height:4px;
  background:var(--hair); cursor:pointer; outline:none; }
.pl-vol::-webkit-slider-thumb{ -webkit-appearance:none; width:10px; height:10px;
  background:var(--steel); cursor:pointer; border:0; }
.pl-vol::-moz-range-thumb{ width:10px; height:10px; background:var(--steel); border:0; }
.pl-toggle{
  background:transparent; border:1px solid var(--hair); color:var(--steel);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 11px; cursor:pointer; transition:.15s; white-space:nowrap;
}
.pl-toggle:hover{ color:var(--ink); border-color:var(--steel); }
.pl-toggle.on{ color:var(--rust); border-color:var(--rust-dim); }

/* playlist popup panel */
.pl-panel{
  position:absolute; right:20px; bottom:100%; margin-bottom:8px; z-index:3;
  width:min(360px, calc(100vw - 40px));
  background:var(--panel); border:1px solid var(--hair);
  max-height:50vh; overflow:auto; display:none;
}
.pl-panel.open{ display:block; }
.pl-panel-head{ position:sticky; top:0; background:var(--panel-2);
  border-bottom:1px solid var(--hair); padding:11px 14px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); }
.pl-track{
  display:flex; align-items:center; gap:12px; padding:11px 14px;
  border-bottom:1px solid var(--hair); cursor:pointer; transition:background .15s;
}
.pl-track:last-child{ border-bottom:0; }
.pl-track:hover{ background:#191b20; }
.pl-track.current{ background:rgba(201,68,46,.10); }
.pl-track .num{ font-size:10px; color:var(--steel); flex:0 0 auto; width:22px; }
.pl-track.current .num{ color:var(--rust); }
.pl-track .meta{ min-width:0; flex:1; }
.pl-track .t{ font-size:12px; color:var(--ink); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.pl-track .a{ font-size:10px; color:var(--steel); letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-track .dur{ font-size:10px; color:var(--steel); flex:0 0 auto; }

.pl-eq.spin span{ display:inline-block; animation:eqp 1s steps(4) infinite; }
@keyframes eqp{ 0%{opacity:1} 50%{opacity:.3} 100%{opacity:1} }
@media (prefers-reduced-motion: reduce){ .pl-eq.spin span{ animation:none; } }

@media (max-width:560px){
  .player-right .pl-vol{ display:none; }
  .pl-time{ min-width:0; font-size:9px; }
  .player-inner{ gap:9px; padding:8px 14px; }
}