/* AISTHĒTA — series site. Dark, phosphorescent, self-contained (no web fonts).
   The work embeds carry the motion; this page stays near-still (photosensitivity ethic). */

:root {
  --bg:        #04060a;
  --bg-deep:   #020407;
  --ink:       #cfe6dd;   /* phosphor off-white */
  --ink-dim:   #7f958e;
  --ink-faint: #4a5a55;
  --cyan:      #7fe6c8;
  --violet:    #b79cf0;
  --amber:     #e6a860;
  --rule:      rgba(127, 230, 200, 0.14);
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --mono: "SFMono-Regular", "Menlo", "Consolas", monospace;
  --maxw: 42rem;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  /* faint descent gradient: surface slightly warmer, deep colder — very subtle */
  background-image:
    linear-gradient(180deg, #06080d 0%, var(--bg) 22%, var(--bg-deep) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* static film grain — no animation (safe) */
.grain, body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* vignette */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

.col { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

/* ── links ── */
a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(127,230,200,0.25); transition: color .4s, border-color .4s; }
a:hover { color: #bff4e2; border-color: rgba(127,230,200,0.7); }

.gk { font-family: var(--serif); color: var(--cyan); font-style: normal; letter-spacing: 0.02em; }
em { font-style: italic; color: #e6f3ee; }
strong { font-weight: 600; color: #eaf5f0; }

/* ═══════════ THRESHOLD ═══════════ */
.threshold {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem 4rem;
  overflow: hidden;
}
.thr-inner { position: relative; z-index: 2; max-width: 40rem; }
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 2.4rem;
}
.series-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 13vw, 7.5rem);
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: #eaf6f0;
  text-shadow: 0 0 42px rgba(90, 200, 165, 0.35), 0 0 6px rgba(200, 240, 225, 0.25);
  margin-bottom: 1.8rem;
}
.thr-lede {
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  line-height: 1.7; color: var(--ink);
  max-width: 33rem; margin: 0 auto;
}
.thr-cue {
  margin-top: 3.5rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-faint);
  animation: breathe 5.5s ease-in-out infinite;   /* gentle opacity only — no flash */
}
@keyframes breathe { 0%,100% { opacity: 0.3; } 50% { opacity: 0.7; } }
.thr-glyphs {
  position: absolute; bottom: 2rem; left: 0; right: 0;
  z-index: 2;
  font-family: var(--serif);
  font-size: 1.1rem; letter-spacing: 0.3em; color: var(--ink-faint);
}

/* ═══════════ SECTIONS ═══════════ */
main { position: relative; z-index: 2; }

.band { padding: 8rem 0; border-top: 1px solid var(--rule); }
.sec-index {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 1.4rem;
}
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.9rem); letter-spacing: 0.02em;
  color: #eaf6f0; margin-bottom: 2rem; line-height: 1.2;
}
h2 { text-shadow: 0 0 30px rgba(90, 200, 165, 0.18); }
.band p, .w-body p, .idea p { margin-bottom: 1.5rem; color: var(--ink); }
.aside { color: var(--ink-dim); font-size: 0.95rem; border-left: 1px solid var(--rule); padding-left: 1.2rem; }

/* ═══════════ SPECIMENS ═══════════ */
.specimens { padding: 7rem 0 4rem; border-top: 1px solid var(--rule); }
.specimens .intro { margin-bottom: 5rem; }
.specimens .intro .sec-index { }

.work { margin: 0 auto 8rem; }
.work-head {
  max-width: 60rem; margin: 0 auto 2rem; padding: 0 1.5rem;
  display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.6rem; align-items: baseline;
}
.w-glyph {
  grid-row: 1 / 3;
  font-family: var(--serif); font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: 1;
  color: var(--cyan); text-shadow: 0 0 34px rgba(127, 230, 200, 0.4);
  align-self: center;
}
#hyle .w-glyph { color: #8fe0cc; }
#chthon .w-glyph { color: var(--violet); text-shadow: 0 0 34px rgba(183, 156, 240, 0.4); }
.w-titles h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2.2rem);
  letter-spacing: 0.16em; color: #eaf6f0;
}
.w-en { color: var(--ink-dim); letter-spacing: 0.04em; font-size: 0.62em; }
.w-tag { font-style: italic; color: var(--ink-dim); font-size: 1rem; margin-top: 0.2rem; }
.w-rung {
  grid-column: 2; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); margin-top: 0.5rem;
}

/* live embed */
.embed {
  position: relative;
  max-width: 68rem; margin: 0 auto 2rem;
  aspect-ratio: 16 / 9;
  background: #010204;
  border: 1px solid var(--rule);
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,0.6), inset 0 0 90px rgba(0,0,0,0.7);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.embed-poster {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  cursor: pointer;
  background: radial-gradient(120% 120% at 50% 40%, #0a0f14 0%, #010204 80%);
}
.poster-glyph {
  font-family: var(--serif); font-size: clamp(3rem, 10vw, 6rem); color: var(--ink-faint);
  letter-spacing: 0.1em; text-shadow: 0 0 40px rgba(60,120,100,0.3);
}
.enter {
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); background: transparent; border: 1px solid var(--rule);
  padding: 0.7rem 1.4rem; cursor: pointer; transition: border-color .4s, color .4s, background .4s;
}
.enter:hover { border-color: var(--cyan); color: #bff4e2; background: rgba(127,230,200,0.05); }
.fullscreen {
  position: absolute; right: 0.8rem; bottom: 0.7rem; z-index: 3;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim); border: 0; opacity: 0.7;
}
.fullscreen:hover { opacity: 1; color: var(--cyan); }

.w-body { }
.rungs { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-dim); line-height: 2.2; }
.rungs span { color: var(--cyan); letter-spacing: 0.14em; }

/* ═══════════ METHOD ═══════════ */
.method-list dt {
  font-family: var(--serif); font-size: 1.15rem; color: #eaf6f0; margin-top: 2.2rem; margin-bottom: 0.5rem;
  text-shadow: 0 0 24px rgba(90,200,165,0.15);
}
.method-list dt:first-child { margin-top: 0; }
.method-list dd { color: var(--ink); }

/* ═══════════ MAKING ═══════════ */
.making p { font-size: 1.05rem; }
.making p:first-of-type { color: #eaf5f0; }

/* ═══════════ COLOPHON ═══════════ */
.colophon { padding: 8rem 0 6rem; border-top: 1px solid var(--rule); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4)); }
.colo-grid {
  display: grid; grid-template-columns: 10rem 1fr; gap: 1.1rem 1.6rem;
  font-size: 0.95rem; margin-bottom: 3rem;
}
.colo-k { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-dim); padding-top: 0.2rem; }
.colo-v { color: var(--ink); }
.colo-v .dim { color: var(--ink-faint); }
.colo-foot {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem;
  padding-top: 2rem; border-top: 1px solid var(--rule);
}
.colo-sig { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.16em; color: var(--ink-faint); }

/* ═══════════ REVEAL (slow, gentle) ═══════════ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.4s ease, transform 1.4s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .thr-cue { animation: none; opacity: 0.5; }
}

/* ═══════════ responsive ═══════════ */
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .band { padding: 5.5rem 0; }
  .work { margin-bottom: 5rem; }
  .work-head { grid-template-columns: 1fr; }
  .w-glyph { grid-row: auto; }
  .w-rung { grid-column: 1; }
  .colo-grid { grid-template-columns: 1fr; gap: 0.3rem 0; }
  .colo-k { margin-top: 1rem; }
}