/* =========================================================================
   We Don't Have a Name Yet
   Palette: cyanotype-blue ground, paper-grain texture, deep blue instruments.
   Type: Space Grotesk (display) / Inter (body) / IBM Plex Mono (terminal+data)
   ========================================================================= */

:root {
  --egg-top:      #093973;   /* cyanotype wash, top — 10% darker */
  --egg:          #062a59;   /* cyanotype, middle — 10% darker */
  --egg-deep:     #041637;   /* cyanotype, deep bottom — 10% darker */

  --slate-900:    #06182f;   /* scope — deepest */
  --slate-800:    #0c2748;   /* conversation panels */
  --slate-700:    #143a63;
  --line:         rgba(255, 255, 255, 0.10);
  --line-strong:  rgba(255, 255, 255, 0.18);

  --white:        #ffffff;
  --prog:         #e8fbfb;   /* luminous cyanotype highlight */
  --grey-egg:     #ffffff;   /* tagline, footer, labels */
  --grey-slate:   #ffffff;   /* timestamps, summaries */

  --maxw: 760px;
  --gap:  clamp(16px, 4vw, 28px);

  --f-display: "Space Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-body);
  color: var(--grey-egg);
  background: linear-gradient(180deg, var(--egg-top) 0%, var(--egg) 42%, var(--egg-deep) 100%);
  background-attachment: fixed;
  position: relative;
}

/* paper-grain texture over the ground (static, no tiling seam) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../assets/img/clouds.png") center / cover no-repeat;
  opacity: 0.35;
  mix-blend-mode: soft-light;
  z-index: 0;
  pointer-events: none;
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(19.6px, 4.2vw, 44.8px) var(--gap) 0;  /* top gap reduced 30% */
}

/* ----------------------------- header ----------------------------------- */
/* the whole header (title + tagline + social) shrinks 25% as one block */
.masthead { text-align: center; margin-bottom: 0; zoom: 0.75; }

.masthead h1 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.98;
  font-size: clamp(29px, 6.8vw, 58px);
  color: var(--white);
  margin: -0.5em 0 10px;   /* nudged up half a font-height */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 18px rgba(31, 42, 49, 0.12);
}
.masthead .tagline {
  font-size: clamp(15.75px, 2.7vw, 19.13px);   /* −25% */
  line-height: 1.5;
  color: var(--grey-egg);
  max-width: 46ch;
  margin: 0 auto;
}

/* host + discord bar */
.bar {
  display: flex;
  align-items: center;            /* centers Discord on the image centers (handles float) */
  justify-content: center;
  gap: clamp(40px, 8vw, 64px);    /* hosts pushed outward */
  margin-top: -4px;               /* nested up under the tagline, clear of its text */
}
.host {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--grey-egg);
  transition: transform 0.18s ease;
}
.host:first-child { transform: translateX(-15%); }   /* outward another 15% */
.host:last-child  { transform: translateX(15%); }
.host:first-child:hover { transform: translateX(-15%) translateY(-3px); }
.host:last-child:hover  { transform: translateX(15%) translateY(-3px); }
.host img {
  width: clamp(37.8px, 9.1vw, 47.6px);     /* −30% */
  height: clamp(37.8px, 9.1vw, 47.6px);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 18px rgba(31, 42, 49, 0.18);
  display: block;
}
.host .handle {
  position: absolute;             /* floated below the image so it doesn't shift the bar's centre */
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: 14.28px;             /* −30% */
  letter-spacing: 0.02em;
}
.host:hover .handle, .host:focus-visible .handle { color: var(--prog); }

.discord {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--slate-900);
  color: var(--white);
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(31, 42, 49, 0.22);
  transition: transform 0.18s ease, background 0.18s ease;
}
.discord:hover { transform: translateY(-2px); background-color: var(--slate-800); }
.discord svg { width: 18px; height: 18px; fill: var(--white); }
.discord img {
  width: 24px;
  height: 24px;
  border-radius: 6px;   /* use 50% for a circle */
  object-fit: cover;
  display: block;
}

/* ----------------------- scope field (full viewport) -------------------- */
/* A fixed <canvas> behind everything: a fluid colour field masked by the ASCII
   figure, painted per-frame in scope.js. The cyanotype ground shows through the
   transparent gaps between glyphs. It does not scroll with the page. */
#scope-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ------------------------- conversations -------------------------------- */
/* The list lives in a short band pinned to the bottom of the viewport. Its top
   dissolves into the scope field (mask), leaving the centre of the screen as an
   open canvas for the effect. It scrolls internally; the page itself doesn't. */
#conv-region {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(94vw, var(--maxw));
  height: 42vh;                 /* list window −30% */
  z-index: 2;
  overflow-y: auto;
  padding: 9vh 4px 14px;        /* top room so the 1st conversation clears the dissolve */
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 74%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 74%, transparent 100%);
}
#conv-region::-webkit-scrollbar { display: none; }

.list-label { display: none; }   /* label removed in the immersive layout */
.site-foot  { display: none; }   /* footer credit hidden in the immersive layout */

.conv-list { display: flex; flex-direction: column; gap: 14px; }
.loadmore, .sentinel { display: none; }

.conv-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: center;
  background: rgba(9, 26, 48, 0.52);          /* translucent — scope shows through */
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease;
  scroll-margin-top: 18px;
}
.conv-card.in { opacity: 1; transform: none; }
.conv-card.playing {
  background: rgba(11, 32, 58, 0.62);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--prog);
}

.conv-cover {
  width: 92px; height: 92px;
  border-radius: 9px;
  object-fit: cover;
  display: block;
  background: var(--slate-900);
}

.conv-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }

/* bottom bar: No. (left) · controls (centred) · link + date (right) */
.conv-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.conv-foot .controls { justify-self: center; }
.conv-tail { justify-self: end; display: inline-flex; align-items: center; gap: 7px; }
.conv-number {
  justify-self: start;
  font-family: var(--f-mono); font-size: 13px; color: var(--grey-slate);
  letter-spacing: 0.06em;
}
.conv-date { font-family: var(--f-mono); font-size: 13px; color: var(--grey-slate); }

/* copy-link button + deep-link highlight */
.btn-link {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 24px; height: 24px; border-radius: 7px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--grey-slate);
  transition: background 0.16s ease, color 0.16s ease;
}
.btn-link svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.btn-link:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }
.btn-link.copied { color: var(--prog); }

@keyframes linkpulse {
  0%   { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(232, 251, 251, 0); }
  18%  { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(232, 251, 251, 0.9); }
  100% { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(232, 251, 251, 0); }
}
.conv-card.linked { animation: linkpulse 1.8s ease-out 1; }

.conv-title {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(19px, 3.09vw, 22.6px); line-height: 1.1;
  color: var(--white); margin: 0;
}
.conv-title .guest { color: var(--grey-slate); font-weight: 500; }

/* waveform: white lines, translucent trough so the field shows behind it */
.wave-box {
  background: rgba(4, 18, 44, 0.5);
  border-radius: 7px;
  padding: 5px 9px;
  margin-bottom: 2px;
}
.wave { width: 100%; height: 34px; cursor: pointer; }
.wave-loading {
  height: 34px; display: flex; align-items: center;
  font-family: var(--f-mono); font-size: 13px; color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.08em;
}

/* transport controls (centred cluster) */
.controls {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 13px; color: var(--grey-slate);
}
.controls button {
  appearance: none; border: 1px solid var(--line-strong);
  background: transparent; color: var(--white);
  border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.1s ease;
}
.controls button:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--line-strong); }
.controls button:active { transform: scale(0.94); }
.btn-play { width: 32px; height: 32px; border-radius: 50%; }
.btn-play svg { width: 13px; height: 13px; fill: var(--white); }
.btn-skip { width: 28px; height: 28px; }
.btn-skip svg { width: 14px; height: 14px; fill: none; stroke: var(--white); stroke-width: 1.6; }
.btn-speed {
  height: 28px; padding: 0 9px; min-width: 42px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.02em;
}
.time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.time .sep { opacity: 0.45; margin: 0 3px; }

/* infinite-scroll sentinel + status */
.sentinel { height: 1px; }
.loadmore {
  text-align: center; font-family: var(--f-mono); font-size: 19.2px;
  letter-spacing: 0.08em; color: var(--grey-egg);
  padding: 26px 0 4px; min-height: 20px;
}

.site-foot {
  margin-top: 56px; text-align: center;
  font-family: var(--f-mono); font-size: 17.25px; letter-spacing: 0.04em;
  color: var(--grey-egg);
}
.site-foot a { color: var(--grey-egg); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------ a11y ------------------------------------ */
:focus-visible { outline: 2px solid var(--prog); outline-offset: 2px; border-radius: 4px; }
.conv-card :focus-visible { outline-color: var(--prog); }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .conv-card { transition: opacity 0.2s ease; transform: none; }
  .conv-card.linked { animation: none; outline: 2px solid var(--prog); outline-offset: 2px; }
}

/* ----------------------------- responsive ------------------------------- */
@media (max-width: 560px) {
  .conv-card { grid-template-columns: 64px 1fr; }
  .conv-cover { width: 64px; height: 64px; }
}