/* ════════════════════════════════════════════
   EXPERIMENTS.CSS — shared styles for all
   EMMO ENNO experiment pages
   ════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,700;1,400&display=swap');

:root {
  --black:    #040506;
  --deep:     #070809;
  --panel:    #0a0b0d;
  --border:   #161820;
  --dim:      #3d4555;
  --mid:      #7e8fa3;
  --offwhite: #c8cdd8;
  --white:    #e8ecf4;
  --green:    #00ff88;
  --red:      #ff2244;
  --wrap:     860px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--deep);
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── NAV ─────────────────────────────────── */
.exp-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(4,5,6,.96);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 2rem;
  backdrop-filter: blur(8px);
}
.exp-nav-logo {
  font-family: 'Share Tech Mono', monospace;
  font-size: .75rem; letter-spacing: .3em;
  color: var(--green); text-transform: uppercase;
  text-decoration: none;
}
.exp-nav-logo span { color: var(--dim); font-size: .55rem; letter-spacing: .15em; display: block; margin-top: 2px; }
.exp-nav-links { display: flex; gap: 1.8rem; }
.exp-nav-links a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .45rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); text-decoration: none; transition: color .2s;
}
.exp-nav-links a:hover { color: var(--offwhite); text-decoration: none; }

/* ── CLASSIFICATION HEADER ───────────────── */
.exp-header {
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  padding: 3rem 2rem 2.5rem;
}
.exp-header-inner { max-width: var(--wrap); margin: 0 auto; }
.exp-classified-row {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.2rem; flex-wrap: wrap;
}
.exp-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .45rem; letter-spacing: .25em; text-transform: uppercase;
  padding: .3rem .7rem; font-weight: 700;
}
.exp-badge.classified { background: var(--red); color: #fff; }
.exp-badge.active     { background: var(--green); color: var(--black); }
.exp-badge.archived   { background: transparent; color: var(--dim); border: 1px solid var(--dim); }
.exp-file-ref {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .45rem; letter-spacing: .2em; color: var(--dim); text-transform: uppercase;
}
.exp-number {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .55rem; letter-spacing: .3em; color: var(--dim);
  text-transform: uppercase; margin-bottom: .6rem;
}
.exp-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(2.8rem, 8vw, 5rem);
  letter-spacing: .05em; color: var(--white);
  line-height: 1; margin-bottom: 1.2rem;
}
.exp-title .highlight { color: var(--green); }
.exp-meta-row {
  display: flex; gap: 2.5rem; flex-wrap: wrap; margin-top: 1rem;
}
.exp-meta-item { display: flex; flex-direction: column; gap: .2rem; }
.exp-meta-label {
  font-size: .38rem; letter-spacing: .2em; color: var(--dim); text-transform: uppercase;
}
.exp-meta-val {
  font-size: .52rem; letter-spacing: .08em; color: var(--offwhite);
}

/* ── GREEN ACCENT LINE ───────────────────── */
.accent-line {
  height: 3px; background: var(--green); width: 100%;
}

/* ── MAIN LAYOUT ─────────────────────────── */
.exp-body { max-width: var(--wrap); margin: 0 auto; padding: 3rem 2rem 5rem; }

.exp-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
  align-items: start;
}
.exp-art {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--border);
}
.exp-art img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.7) brightness(.85);
  transition: filter .4s;
}
.exp-art:hover img { filter: saturate(.9) brightness(.95); }
.exp-art-label {
  position: absolute; bottom: .5rem; left: .6rem;
  font-size: .35rem; letter-spacing: .15em; color: var(--dim);
  background: rgba(4,5,6,.8); padding: .2rem .4rem; text-transform: uppercase;
}

.exp-data-table { width: 100%; border-top: 1px solid var(--border); }
.exp-data-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .8rem 0; border-bottom: 1px solid var(--border); gap: 1rem;
}
.exp-data-key {
  font-size: .42rem; letter-spacing: .15em; color: var(--dim);
  text-transform: uppercase; flex-shrink: 0;
}
.exp-data-val {
  font-size: .48rem; letter-spacing: .05em; color: var(--offwhite);
  text-align: right;
}
.exp-data-val.green { color: var(--green); }
.exp-data-val.red   { color: var(--red); }

/* ── STREAM LINKS ────────────────────────── */
.stream-row {
  display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem;
}
.stream-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .42rem; letter-spacing: .15em; text-transform: uppercase;
  padding: .5rem 1rem; border: 1px solid; text-decoration: none;
  transition: all .2s; display: inline-block;
}
.stream-btn:hover { text-decoration: none; }
.stream-btn.spotify { color: #1ed760; border-color: rgba(30,215,96,.3); }
.stream-btn.spotify:hover { background: rgba(30,215,96,.08); }
.stream-btn.apple { color: #fc3c44; border-color: rgba(252,60,68,.3); }
.stream-btn.apple:hover { background: rgba(252,60,68,.08); }
.stream-btn.bandcamp { color: #1da0c3; border-color: rgba(29,160,195,.3); }
.stream-btn.bandcamp:hover { background: rgba(29,160,195,.08); }

/* ── SECTIONS ────────────────────────────── */
.exp-section { margin-bottom: 3rem; }
.exp-section-label {
  font-size: .4rem; letter-spacing: .3em; color: var(--green);
  text-transform: uppercase; margin-bottom: .5rem;
}
.exp-section-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.1rem; letter-spacing: .1em; color: var(--white);
  text-transform: uppercase; margin-bottom: 1.5rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--border);
}
.exp-section p {
  font-size: .58rem; line-height: 2; color: var(--mid);
  margin-bottom: 1rem;
}
.exp-section p strong { color: var(--offwhite); font-weight: 700; }

/* ── INSTRUMENT LOG ──────────────────────── */
.instrument-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .6rem; margin-top: .5rem;
}
.instrument-item {
  border: 1px solid var(--border); padding: .7rem 1rem;
  background: var(--panel);
}
.instrument-role {
  font-size: .35rem; letter-spacing: .2em; color: var(--dim);
  text-transform: uppercase; margin-bottom: .2rem;
}
.instrument-name {
  font-size: .48rem; color: var(--offwhite); letter-spacing: .05em;
}

/* ── TRACK LIST ──────────────────────────── */
.track-list { margin-top: .5rem; }
.track-item {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--border);
}
.track-num {
  font-size: .4rem; letter-spacing: .2em; color: var(--dim);
  width: 24px; flex-shrink: 0;
}
.track-name {
  font-size: .58rem; color: var(--offwhite); letter-spacing: .06em;
  text-transform: uppercase; flex: 1;
}
.track-note {
  font-size: .4rem; color: var(--dim); letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── FAQ ─────────────────────────────────── */
.faq-list { margin-top: .5rem; }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.2rem 0; gap: 1rem; text-align: left;
}
.faq-q-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .55rem; letter-spacing: .08em;
  color: var(--offwhite); line-height: 1.5;
}
.faq-q-arrow {
  font-size: .5rem; color: var(--green); flex-shrink: 0;
  transition: transform .25s;
}
.faq-item.open .faq-q-arrow { transform: rotate(90deg); }
.faq-a {
  display: none;
  font-size: .52rem; line-height: 2; color: var(--mid);
  padding: 0 0 1.2rem 0; max-width: 640px;
}
.faq-item.open .faq-a { display: block; }

/* ── EXPERIMENT NAV ──────────────────────── */
.exp-nav-footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
}
.exp-nav-prev, .exp-nav-next {
  display: flex; flex-direction: column; gap: .3rem;
}
.exp-nav-next { align-items: flex-end; }
.exp-nav-dir {
  font-size: .38rem; letter-spacing: .2em; color: var(--dim); text-transform: uppercase;
}
.exp-nav-name {
  font-family: 'Share Tech Mono', monospace;
  font-size: .85rem; letter-spacing: .08em; color: var(--green);
  text-decoration: none; transition: color .2s;
}
.exp-nav-name:hover { color: var(--white); text-decoration: none; }

/* ── FOOTER ──────────────────────────────── */
.exp-footer {
  border-top: 1px solid var(--border);
  background: var(--panel);
  padding: 1.5rem 2rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
}
.exp-footer-copy {
  font-size: .38rem; letter-spacing: .15em; color: var(--dim);
  text-transform: uppercase;
}
.exp-footer-back {
  font-size: .38rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--dim); text-decoration: none; transition: color .2s;
}
.exp-footer-back:hover { color: var(--green); text-decoration: none; }

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 620px) {
  .exp-nav { padding: .8rem 1.2rem; }
  .exp-nav-logo span { display: none; }
  .exp-nav-links { gap: .4rem; }
  /* Bigger tap targets + slightly larger type for touch screens */
  .exp-nav-links a { font-size: .5rem; padding: .6rem .5rem; }
  .exp-header { padding: 2rem 1.2rem 1.8rem; }
  .exp-body { padding: 2rem 1.2rem 4rem; }
  .exp-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .exp-art { max-width: 320px; }
  .exp-meta-row { gap: 1.2rem 1.5rem; }
  .exp-meta-label { font-size: .42rem; }
  .exp-meta-val { font-size: .56rem; }
  .stream-btn { font-size: .5rem; padding: .8rem 1.2rem; }
  .exp-data-key { font-size: .46rem; }
  .exp-data-val { font-size: .54rem; }
  .exp-section p { font-size: .62rem; }
  .faq-q-text { font-size: .58rem; }
  .faq-a { font-size: .56rem; }
  .instrument-role { font-size: .4rem; }
  .instrument-name { font-size: .52rem; }
  .track-name { font-size: .6rem; }
  .exp-footer { flex-direction: column; align-items: flex-start; }
  .exp-nav-footer { flex-direction: column; }
  .exp-nav-next { align-items: flex-start; }
  .exp-nav-name { padding: .4rem 0; display: inline-block; }
}