/* ============================================================
   AMBIENT TAI CHI — stylesheet
   slow movement · live ambient music · beginners welcome
   Deep dusk canvas · jade + warm amber · calm serif + mono grid
   ============================================================ */

:root {
  --bg:     #0b100e;   /* deep dusk green-black          */
  --bg2:    #101714;   /* panel tone                     */
  --fg:     #e9eee9;   /* soft mist white                */
  --dim:    #7f8d86;   /* sage grey                      */
  --jade:   #6fae94;   /* accent — jade                  */
  --jade-d: #4f8a72;   /* deeper jade (hover)            */
  --amber:  #d9a86b;   /* warm amber — the lantern tone  */
  --line:   #1d2823;   /* hairlines                      */
  --max:    80rem;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --disp: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--jade); color: #06110c; }

a { color: var(--jade); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--amber); }

img { max-width: 100%; display: block; }

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

/* ============================================================
   Top bar / nav
   ============================================================ */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(8px);
}
.top .bar {
  max-width: var(--max); margin: 0 auto; padding: 1rem 1.5rem;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .35rem;
  text-align: center;
}
.brand {
  display: inline-flex; align-items: center; gap: .65rem;
  color: var(--fg);
  flex: 0 0 auto;
}
.brand:hover { color: var(--fg); }
/* the mark doubles as the sound toggle — it turns while the drone plays */
.brand-mark {
  color: var(--jade);
  font-size: 1.2rem; line-height: 1;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  transition: transform 1.6s ease-in-out, color .3s ease;
}
.brand-mark:hover { transform: rotate(180deg); color: var(--amber); }
.brand-mark[aria-pressed="true"] {
  color: var(--amber);
  animation: brandturn 24s linear infinite;
}
@keyframes brandturn { to { transform: rotate(360deg); } }
/* the wordmark doubles as the sound toggle — amber while the drone plays */
.mega button {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; line-height: inherit; text-align: inherit;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  transition: color .6s ease;
}
.mega button:hover { color: var(--jade); }
.mega button[aria-pressed="true"] { color: var(--amber); }
.brand-name {
  font-family: var(--mono); font-weight: 700;
  font-size: .78rem; letter-spacing: .28em;
  text-transform: lowercase;
}

footer.site nav { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
footer.site nav a {
  font-family: var(--mono);
  font-size: .76rem; font-weight: 400;
  letter-spacing: .1em; text-transform: lowercase;
  color: var(--dim);
  padding: .35rem .55rem;
}
footer.site nav a:hover { color: var(--amber); }
footer.site nav a.on { color: var(--jade); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(3rem, 9vw, 7rem) 0 clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}
/* slow drifting glow — ambient light behind everything */
.hero::before {
  content: "";
  position: absolute; inset: -25%;
  background:
    radial-gradient(38% 48% at 28% 38%, rgba(111, 174, 148, .13), transparent 70%),
    radial-gradient(32% 44% at 74% 62%, rgba(217, 168, 107, .09), transparent 70%);
  animation: drift 26s ease-in-out 4 alternate; /* everything rests after ~2 min */
  pointer-events: none;
}
@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.06); }
}
.hero .wrap { position: relative; text-align: center; }

.mega {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2.4rem, 6.5vw, 5rem);
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: lowercase;
  margin: 0;
  color: var(--fg);
}
/* hero lockup — ascii figure + wordmark side by side */
.hero-lockup {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  flex-wrap: wrap;
  margin: .75rem 0 0;
}
.hero-lockup .mega { margin: 0; }

/* the ascii figure — breathes, slowly; a tap sets it breathing again */
.figure-stack { position: relative; flex: 0 0 auto; cursor: pointer; }
.ascii-figure {
  font-family: var(--mono);
  text-align: left; /* keep the figure's own lines aligned inside the centered lockup */
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  line-height: 1.25;
  color: var(--jade);
  margin: 0;
  flex: 0 0 auto;
  transform-origin: 50% 100%;
  animation: breathe 8s ease-in-out 15; /* 15 × 8s — rests after 2 min */
  transition: opacity .9s ease; /* dissolve between poses */
}
.ascii-figure .ball { color: var(--amber); }
/* second layer of a stack — sits on top, starts invisible */
.ghost { position: absolute; inset: 0; opacity: 0; }
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

/* the ambient wave — the music, made visible */
.wave {
  font-family: var(--mono);
  font-size: clamp(.75rem, 1.5vw, .95rem);
  line-height: 1;
  color: var(--jade);
  opacity: .45;
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
  white-space: pre;
  overflow: hidden;
  transition: opacity 2s ease;
  cursor: pointer;
}
.wave.live { opacity: .9; }

/* momentarily stilled by js to re-arm the hero's css animations */
.hero.still::before, .hero.still .ascii-figure { animation: none; }

/* hero kicker (under the H1) */
.kicker {
  display: inline-block;
  margin: 1.8rem 0 0;
  font-family: var(--mono); font-weight: 400;
  font-size: clamp(.85rem, 2vw, 1.05rem);
  letter-spacing: .22em; text-transform: lowercase;
  color: var(--fg);
}
.kicker .mk { color: var(--amber); }

@media (max-width: 480px) {
  .top .bar { padding: .75rem 1rem; }
  .brand-name { font-size: .7rem; letter-spacing: .2em; }
  footer.site nav a { font-size: .7rem; padding: .3rem .4rem; }
}

/* ============================================================
   Spec sheet (event data block)
   ============================================================ */
.spec { max-width: 46rem; margin: 0 auto; }
.spec .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .4rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.spec .k {
  font-family: var(--mono);
  font-size: .74rem; font-weight: 400;
  letter-spacing: .3em; text-transform: lowercase;
  color: var(--jade);
}
.spec .v {
  font-family: var(--disp);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.25;
  color: var(--fg);
}
.spec .v a { color: var(--fg); border-bottom: 1px solid var(--jade); }
.spec .v a:hover { color: var(--jade); }
.spec .v .names { color: var(--fg); }
.spec .v .names b { color: var(--amber); font-weight: 500; }
@media (max-width: 640px) {
  .spec .row { grid-template-columns: 1fr; gap: .35rem; padding: 1.1rem 0; }
}

section.block { padding: clamp(2.5rem, 6vw, 4.5rem) 0; text-align: center; }
.section-label {
  font-family: var(--mono);
  font-size: .74rem; font-weight: 400;
  letter-spacing: .3em; text-transform: lowercase;
  color: var(--jade);
  margin: 0 0 2rem;
}
.section-label::before { content: "~ "; color: var(--amber); }

.lead {
  font-family: var(--mono);
  font-weight: 400;
  font-size: clamp(.9rem, 1.6vw, 1.05rem);
  line-height: 1.85;
  letter-spacing: .02em;
  color: var(--fg);
  max-width: 58ch;
  margin: 0 auto 1.2rem;
}
.lead:last-child { margin-bottom: 0; }

hr.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ============================================================
   The room — ascii scene (musician + practitioners)
   ============================================================ */
.scene-stack { position: relative; display: inline-block; max-width: 100%; cursor: pointer; }
.scene {
  display: inline-block;
  text-align: left; /* the art must keep its own alignment inside the centered page */
  font-family: var(--mono);
  font-size: clamp(.42rem, 1.7vw, 1rem); /* always fits — ~73ch of Space Mono stays inside the wrap */
  line-height: 1.4;
  color: var(--jade);
  margin: 0;
  max-width: 100%;
  transform-origin: 50% 100%;
  animation: breathe 10s ease-in-out 12; /* 12 × 10s — rests after 2 min */
  transition: opacity .9s ease; /* dissolve between states */
}
.scene .amb { color: var(--amber); }
.scene .air { color: var(--dim); }
.scene .gnd { color: var(--dim); opacity: .5; }

/* ============================================================
   The pond — the whole page seen from above, a drop falling in.
   Fixed behind everything; rings spread from the centre of the
   screen out past its edges.
   ============================================================ */
.pond {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.pond .ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 175vmax; /* wide enough that rings leave the screen before they die */
  aspect-ratio: 1;
  margin: -87.5vmax 0 0 -87.5vmax;
  border: 1px solid var(--jade);
  border-radius: 50%;
  opacity: 0;
  /* 23s — just off the 24s breath, so the two slowly drift in and out of phase */
  animation: ripple 23s cubic-bezier(.2, .6, .4, 1) 5; /* 5 drops each, then still water */
}
.pond .ripple:nth-child(2) { animation-delay: 5.75s; }
.pond .ripple:nth-child(3) { animation-delay: 11.5s; border-color: var(--amber); }
.pond .ripple:nth-child(4) { animation-delay: 17.25s; }
@keyframes ripple {
  0%   { transform: scale(.015); opacity: 0; }
  6%   { opacity: .3; }
  100% { transform: scale(1); opacity: 0; }
}
/* the mark at the centre of the pond — surfaces, then sinks away */
.pond .pond-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  line-height: 1;
  color: var(--jade);
  opacity: 0;
  animation: pondmark 24s ease-in-out 5; /* sinks for good after 2 min */
}
/* the mark waits below the surface until the page has emptied,
   surfaces alone, then sinks before the page returns */
@keyframes pondmark {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
  35%      { opacity: 0; }
  45%, 55% { opacity: .5; }
  50%      { transform: translate(-50%, -50%) scale(1.04); }
  65%      { opacity: 0; }
}
/* yin and yang — the page breathes out while the mark breathes in.
   Same 24s clock as pondmark, opposite phase. */
.top, section, footer.site {
  animation: counterbreath 24s ease-in-out 5; /* settles at full opacity after 2 min */
}
@keyframes counterbreath {
  0%, 100% { opacity: 1; }
  42%, 58% { opacity: .3; }
}
/* a hand on the water — mouse movement brings the page to the surface
   (js adds .awake while the visitor is active, removes it when they rest) */
body.awake .top, body.awake section, body.awake footer.site { animation: none; }
body.awake .pond .pond-mark { animation: none; }

/* ============================================================
   Archive
   ============================================================ */
.archive { border-top: 1px solid var(--line); }
.archive-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 3rem 0;
  border-bottom: 1px solid var(--line);
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}
.archive-entry .aside .edition {
  font-family: var(--mono);
  font-size: .74rem; letter-spacing: .3em; text-transform: lowercase;
  color: var(--jade); margin: 0 0 .6rem;
}
.archive-entry .aside .when {
  font-family: var(--disp); font-weight: 500;
  font-size: 2.2rem; line-height: 1; margin: 0 0 1rem;
}
.archive-entry .aside .venue { font-family: var(--mono); color: var(--dim); font-size: .82rem; }
.archive-entry .aside .venue a { color: var(--jade); }
.archive-entry .main h2 {
  font-family: var(--disp); font-weight: 500;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.05;
  margin: 0 0 1rem;
}
.archive-entry .main p { color: var(--fg); margin: 0 auto 1.1rem; max-width: 60ch; }
.archive-entry .lineup { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.archive-entry .lineup li {
  font-family: var(--mono); font-size: .76rem;
  letter-spacing: .08em; text-transform: lowercase;
  padding: .3rem .7rem; border: 1px solid var(--line); color: var(--fg);
}
.archive-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.archive-photos img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border: 1px solid var(--line);
  filter: grayscale(.4) sepia(.12) contrast(1.02);
  transition: filter .6s ease;
}
.archive-photos img:hover { filter: none; }

.archive-empty {
  border: 1px solid var(--line);
  padding: clamp(3rem, 9vw, 7rem) 1.5rem;
  text-align: center;
}
.archive-empty h2 {
  font-family: var(--disp); font-weight: 400; font-style: italic;
  font-size: clamp(2rem, 7vw, 4.5rem); line-height: 1;
  margin: 0;
  color: var(--dim);
}
@media (max-width: 720px) {
  .archive-entry { gap: 1.25rem; padding: 2.5rem 0; }
  .archive-photos { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: .78rem; letter-spacing: .16em; text-transform: lowercase;
  padding: .8rem 1.4rem;
  border: 1px solid var(--jade);
  color: var(--jade);
  background: transparent;
  transition: background .3s ease, color .3s ease;
}
.btn:hover { background: var(--jade); color: #06110c; }

/* ============================================================
   Footer
   ============================================================ */
footer.site {
  padding: 2.5rem 0;
  color: var(--dim);
}
footer.site .wrap {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .18em; text-transform: lowercase;
}
footer.site a { color: var(--dim); }
footer.site a:hover, footer.site a[aria-current="page"] { color: var(--jade); }

/* ============================================================
   Motion preferences — reduced motion gets a 30-second taste,
   then the page comes to rest (class added by ambient.js)
   ============================================================ */
body.rest, body.rest *, body.rest *::before, body.rest *::after {
  animation: none !important; transition: none !important;
}
/* the pond as a still image — concentric rings at rest */
body.rest .pond .ripple { opacity: .1; }
body.rest .pond .ripple:nth-child(1) { transform: scale(.18); }
body.rest .pond .ripple:nth-child(2) { transform: scale(.42); }
body.rest .pond .ripple:nth-child(3) { transform: scale(.66); }
body.rest .pond .ripple:nth-child(4) { transform: scale(.9); }
body.rest .pond .pond-mark { opacity: .16; }