/* FILE // HUMANOID — shared archive design system
   Base tokens, chrome, and recurring components used across every page.
   Page-specific styles (landing boot sequence, per-release layout) stay
   inline on their own page — this file is only what's genuinely shared. */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@400;700;900&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --bg:#050505;
  --copper:#b87333;
  --copper-light:#d4936a;
  --copper-dark:#7a4d1e;
  --text:#ffffff;
  --dim:#efefef;
  --white:#e8e8e8;
  --red:#7c2a2a;
  --ok:#4a7c59;
  --mono:'Share Tech Mono',monospace;
  --head:'Barlow Condensed',sans-serif;
}

html,body{ min-height:100%; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  -webkit-tap-highlight-color:transparent;
}

a{ color:inherit; }

/* ---- CRT overlay (scanlines + vignette) ---- */
.crt{
  position:fixed; inset:0; z-index:50; pointer-events:none;
}
.crt::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(
    0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 3px);
  background-size:100% 3px;
  animation:scan 8s linear infinite;
}
.crt::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,0) 55%, rgba(0,0,0,0.7) 100%);
}
@keyframes scan{ 0%{transform:translateY(0)} 100%{transform:translateY(6px)} }

/* random flicker, applied to any element that should read as unstable signal */
.flicker{ animation:flick 6s infinite steps(1); }
@keyframes flick{
  0%,100%{opacity:1} 41%{opacity:1} 41.5%{opacity:0.6}
  42%{opacity:1} 67%{opacity:1} 67.4%{opacity:0.4}
  67.8%{opacity:1} 88%{opacity:1} 88.3%{opacity:0.85} 88.6%{opacity:1}
}

.cursor{ animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0} }

.slash{ color:var(--copper); }

/* ---- top bar (chrome for every non-landing page) ---- */
.topbar{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:20px 22px;
  border-bottom:1px solid #1a1a1a;
}
.topbar-mark{
  font-family:var(--head); font-weight:900;
  font-size:16px; letter-spacing:0.04em;
  color:var(--white); text-transform:uppercase;
  text-decoration:none;
}
.topbar-meta{
  font-size:9px; letter-spacing:0.25em;
  color:var(--dim); text-transform:uppercase;
}

/* ---- generic button/link affordances ---- */
.enter{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--copper);
  background:transparent;
  border:1px solid var(--copper);
  padding:14px 28px;
  cursor:pointer;
  transition:all 0.25s;
  -webkit-appearance:none;
  text-decoration:none;
  display:inline-block;
}
.enter:hover,.enter:active{
  background:var(--copper);
  color:#050505;
}
.enter::before{ content:"> "; }

.back{
  font-family:var(--mono); font-size:11px; letter-spacing:0.25em;
  color:var(--dim); text-transform:uppercase; cursor:pointer;
  margin-top:24px; background:none; border:none; padding:8px 0;
  -webkit-appearance:none; text-decoration:none; display:inline-block;
}
.back::before{ content:"< "; }
.back:hover{ color:var(--copper); }

/* ---- archive entry list (index pages, category listings) ---- */
.arc-head{
  font-family:var(--head); font-weight:900;
  font-size:13px; letter-spacing:0.3em;
  color:var(--copper); text-transform:uppercase;
  margin-bottom:6px;
}
.arc-sub{
  font-size:10px; letter-spacing:0.2em;
  color:var(--dim); text-transform:uppercase;
  margin-bottom:32px;
  border-bottom:1px solid #1a1a1a; padding-bottom:16px;
}

.entry{
  display:block; text-decoration:none;
  border:1px solid #1a1a1a; border-left:3px solid var(--copper-dark);
  padding:16px 18px; margin-bottom:10px;
  transition:all 0.2s; cursor:pointer;
}
.entry:hover,.entry:active{ border-left-color:var(--copper); background:#0a0600; }
.entry .e-type{
  font-size:9px; letter-spacing:0.25em; color:var(--copper);
  text-transform:uppercase; margin-bottom:6px;
}
.entry .e-name{
  font-family:var(--head); font-weight:900; font-size:22px;
  color:var(--white); text-transform:uppercase; line-height:1; margin-bottom:6px;
}
.entry .e-status{
  font-size:10px; color:var(--dim); letter-spacing:0.1em;
}
.entry .e-status .pending{ color:var(--red); }
.entry .e-status .live{ color:var(--ok); }

/* ---- document frame (shared page body container) ---- */
.frame{
  max-width:680px;
  margin:0 auto;
  padding:56px 22px 120px;
}

/* ---- release / archive-item page (used by every filed song page) ---- */
.stamp{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  margin-bottom:18px;
}
.stamp-type{ color:var(--copper); }
.stamp-status{ color:var(--dim); }

.rel-title{
  font-family:var(--head); font-weight:900;
  font-size:clamp(34px,9vw,58px);
  line-height:0.92;
  color:var(--white);
  text-transform:uppercase;
  margin-bottom:14px;
}
.rel-dek{
  font-size:13px; line-height:1.7;
  color:var(--text);
  max-width:56ch;
  margin-bottom:40px;
}

.artifact{
  border:1px solid #efefef;
  margin-bottom:40px;
}
.artifact-img{
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  padding:20px; text-align:center;
  font-size:11px; letter-spacing:0.1em; line-height:1.6;
  color:var(--dim);
    repeating-linear-gradient(45deg, #0a0a0a 0 2px, #050505 2px 12px);
  border-bottom:1px solid #efefef;
}
.artifact-cap{
  font-size:11px; line-height:1.7;
  color:var(--text);
  padding:14px 16px;
}

.act{
  border-left:2px solid #efefef;
  padding:4px 0 4px 20px;
  margin-bottom:36px;
}
.act-label{
  font-size:12px; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--copper); margin-bottom:10px;
}
.act-copy{
  font-size:14px; line-height:1.8;
  color:var(--text);
  max-width:58ch;
}

.lyric-line{
  display:block;
  font-style:italic;
  color:var(--copper-light);
  border-left:2px solid var(--copper-dark);
  padding-left:14px;
  margin:16px 0;
  font-size:13px; line-height:1.7;
}

/* modifier: the rare act section that deliberately breaks archive-cold register */
.act--counter{ border-left-color:var(--ok); }
.act--counter .act-label{ color:var(--ok); }
.act--counter .lyric-line{ border-left-color:var(--ok); color:#8fb89a; }

.filing{
  border-top:1px solid #efefef;
  margin-top:8px; margin-bottom:40px;
  font-size:12px;
}
.filing-row{
  display:flex; justify-content:space-between; gap:16px;
  padding:12px 0;
  border-bottom:1px solid #efefef;
}
.filing-row span:first-child{
  color:var(--dim); text-transform:uppercase; letter-spacing:0.15em; font-size:10px;
}
.filing-row span:last-child{ color:var(--text); text-align:right; }