/* Totemphonia v2 · Field Recordings: the archive and the rooms. Each is exactly one screen (Kilian). */

[data-world="bolivia"] { --c: var(--w-bolivia); }
[data-world="colombia"] { --c: var(--w-colombia); }
[data-world="berlin"] { --c: var(--w-berlin); }
[data-world="betlem"] { --c: var(--w-betlem); }
/* as text on paper the two light colours go a shade deeper (same hue), so they still read (AA for large text) */
html[data-world="bolivia"] { --c-text: color-mix(in srgb, var(--w-bolivia) 80%, var(--ink-0)); }
html[data-world="betlem"] { --c-text: color-mix(in srgb, var(--w-betlem) 85%, var(--ink-0)); }

/* ---------- Archive: four halftones in their colours, one screen ---------- */
/* rows: header space · the title, centred in the free space · the four places · a bottom margin.
   Everything is sized from the viewport HEIGHT, so changing the window width does not move the title. */
.archive {
  --em: min(23svh, 30vw, 16.5rem); --hdr: 4.25rem;
  height: 100svh; min-height: 30rem; overflow: clip;
  display: grid; grid-template-rows: var(--hdr) 1fr auto clamp(1.5rem, 8svh, 5rem); justify-items: center;
  padding: 0 var(--gutter);
}
.archive__title { grid-row: 2; align-self: center; }
.archive__title { font-family: var(--f-voice); font-weight: 300; font-size: clamp(2rem, 6.2svh, 3.75rem); line-height: 1.04; letter-spacing: -0.02em; } /* height-based: steady across widths */
.archive__grid { grid-row: 3; display: grid; grid-template-columns: repeat(2, var(--em)); gap: clamp(1.2rem, 4svh, 2.8rem) clamp(3rem, 14svh, 9rem); }
.archive__item { display: grid; justify-items: center; gap: clamp(0.5rem, 1.6svh, 1.1rem); }
.archive__em { position: relative; width: var(--em); aspect-ratio: 1; transition: scale 0.9s var(--settle); }
.archive__g3 {
  position: absolute; inset: 0; background: var(--c);
  -webkit-mask: var(--g3) center / contain no-repeat; mask: var(--g3) center / contain no-repeat;
}
.archive__em::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--c); opacity: 0; pointer-events: none; }
.archive__item:focus-visible .archive__em { scale: 1.03; }
@media (hover: hover) { .archive__item:hover .archive__em { scale: 1.03; } }
.archive__item:focus-visible .archive__em::after { animation: tp-call 2.4s var(--settle); }
@media (hover: hover) { .archive__item:hover .archive__em::after { animation: tp-call 2.4s var(--settle); } }
.archive__name {
  font-family: var(--f-voice); font-weight: 300; font-size: clamp(1.1rem, 2.9svh, 1.9rem); letter-spacing: -0.01em; /* height-based too */
  background: linear-gradient(currentColor, currentColor) no-repeat 50% 100% / 0% 1px; transition: background-size 0.7s var(--settle);
}
.archive__item:focus-visible .archive__name { background-size: 100% 1px; }
@media (hover: hover) { .archive__item:hover .archive__name { background-size: 100% 1px; } }
.archive__item:focus-visible { outline: none; }
.archive__item:focus-visible .archive__em { outline: 1.5px solid var(--ink); outline-offset: 8px; border-radius: 50%; }
@keyframes tp-call { 0% { opacity: 0.6; scale: 1; } 100% { opacity: 0; scale: 1.5; } }

/* ---------- Room: Kilian's v1 Chladni plate fills the screen; the design sits on top ---------- */
.place { position: relative; height: 100svh; min-height: 30rem; overflow: clip; }
#canvas-container { position: fixed; inset: 0; z-index: 0; }
#canvas-container canvas { display: block; width: 100% !important; height: 100% !important; }
.place > .crumb, .place > .room__text, .place > .room__photo, .place > .tracks { position: absolute; z-index: 1; }
.crumb { top: calc(var(--gutter) * 3.1); left: var(--gutter); font-size: var(--t-ui); color: var(--muted); padding: 0.3rem 0; }
.crumb::before { content: '← '; }
.crumb { background: linear-gradient(currentColor, currentColor) no-repeat 0 85% / 0% 1px; transition: color 0.3s, background-size 0.6s var(--settle); }
.crumb:focus-visible { color: var(--ink); background-size: 100% 1px; }
@media (hover: hover) { .crumb:hover { color: var(--ink); background-size: 100% 1px; } }

/* the tracks sit permanently above the bar's reserved slot */
.tracks {
  left: var(--gutter); right: var(--gutter); bottom: calc(var(--bar-h) + 0.4rem);
  display: flex; flex-wrap: wrap; gap: 0.6rem clamp(1.5rem, 4vw, 4rem); align-items: baseline;
}
.room__text { left: var(--gutter); bottom: calc(var(--bar-h) + 6.4rem); }
.room__title { font-family: var(--f-voice); font-weight: 700; font-size: clamp(2.5rem, 1.45rem + 3.7vw, 5rem); line-height: 1.02; letter-spacing: -0.025em; margin-left: -0.04em; color: var(--c-text, var(--c)); }
.room__line { margin-top: 0.9rem; max-width: 30ch; }
.room__coords { margin-top: 0.8rem; font-family: var(--f-data); font-size: var(--t-data); color: var(--muted); }
/* the photo: large and present, filling the right side between header and tracks */
.room__photo {
  right: var(--gutter); top: calc(var(--gutter) * 3.1);
  height: calc(100svh - var(--gutter) * 3.1 - var(--bar-h) - 7rem); max-width: 44vw;
}
.room__photo img { height: 100%; width: auto; max-width: 100%; object-fit: cover; display: block; }

.track { display: inline-flex; align-items: baseline; gap: 0.7rem; padding: 0.3rem 0; text-align: left; }
.track__title {
  font-family: var(--f-voice); font-weight: 300; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.45rem); line-height: 1.1;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px; transition: background-size 0.7s var(--settle), color 0.5s var(--settle);
}
.track[aria-pressed="true"] .track__title { color: var(--c-text, var(--c)); } /* the one playing wears the place's colour */
.track__dur { font-family: var(--f-data); font-size: var(--t-data); color: var(--muted); font-variant-numeric: tabular-nums; }
.track:focus-visible .track__title, .track[aria-pressed="true"] .track__title { background-size: 100% 1px; }
@media (hover: hover) { .track:hover .track__title { background-size: 100% 1px; } }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .archive { --em: min(36vw, 21svh); }
  .room__text { bottom: auto; top: calc(var(--gutter) * 5.2); right: calc(46vw + var(--gutter) * 1.6); }
  .room__title { font-size: min(2.5rem, 8.6vw); } /* the place name fits its column beside the photo */
  .room__line { max-width: none; }
  .room__photo { width: 46vw; height: auto; max-width: none; top: calc(var(--gutter) * 5.4); }
  .room__photo img { width: 100%; height: auto; }
  .tracks { flex-direction: column; gap: 0.15rem; }
  .track { width: 100%; justify-content: space-between; }
}