/* Totemphonia v2 · home: clearing (wave field) → six pinned stands → totem. See v2/DESIGN.md §4. */

:root { --em: clamp(170px, 31vmin, 350px); }
.em { width: 100%; height: 100%; overflow: visible; fill: currentColor; }
.ring { position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; pointer-events: none; opacity: 0; }

/* ---------- Clearing: the wave field ---------- */
.clearing {
  --pitch: 14px;
  position: relative; height: 100svh; min-height: 34rem; overflow: clip;
}
.field { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: pan-y; }
.clearing__words { position: absolute; left: var(--gutter); bottom: clamp(2rem, 7vh, 4.5rem); max-width: min(46rem, 70vw); pointer-events: none; }
.statement {
  font-family: var(--f-voice); font-weight: 300; font-size: var(--t-statement);
  line-height: 1.02; letter-spacing: -0.022em; margin-left: -0.04em;
  font-optical-sizing: auto;
}
.clearing__sub { margin-top: 1.4rem; max-width: 34ch; font-size: 0.9375rem; color: var(--muted); }
.hint { position: absolute; right: var(--gutter); bottom: clamp(2rem, 7vh, 4.5rem); font-size: var(--t-ui); color: var(--muted); pointer-events: none; }

/* ---------- Stands: each a stage of one or more frames ---------- */
.stand { position: relative; }
.stand__stage { position: relative; height: 100svh; min-height: 36rem; overflow: clip; }
.motion .frame { position: absolute; inset: 0; }
.frame { position: relative; height: 100svh; min-height: 36rem; }

.frame__em {
  position: absolute; left: 50%; top: calc(var(--h) * 100%);
  width: var(--em); aspect-ratio: 1; translate: -50% -50%;
  color: var(--ink);
}
.frame__text {
  position: absolute; top: calc(var(--h) * 100%); translate: 0 -50%;
  width: calc(50% - var(--em) / 2 - clamp(1.5rem, 4vw, 4.5rem) - var(--gutter));
  container-type: inline-size;
}
.stand--r .frame__text { left: calc(50% + var(--em) / 2 + clamp(1.5rem, 4vw, 4.5rem)); }
.stand--l .frame__text { right: calc(50% + var(--em) / 2 + clamp(1.5rem, 4vw, 4.5rem)); text-align: right; }
.stand--l .data { justify-content: flex-end; }

/* contrast: the title is the image (as large as its longest word allows), the line is quiet and small */
.frame__title { font-family: var(--f-voice); font-weight: 300; font-size: min(5.8rem, calc(100cqi / (var(--lw, 8) * 0.6))); line-height: 0.96; letter-spacing: -0.03em; }
.frame:not(.frame--lead) .frame__title { font-size: calc(var(--t-title) * 0.86); }
.frame__title a, .totem__name {
  background: linear-gradient(currentColor, currentColor) no-repeat;
  background-size: 0% 1px; background-position: 0 100%;
  transition: background-size 0.7s var(--settle);
}
/* Literata's glyph box reaches 0.31 em below the baseline while title lines are 0.96 em apart: an underline at the
   box's bottom would lie on the next line. Lifted to sit just under the letters. */
.frame__title a { background-position: 0 calc(100% - 0.22em); }
.stand--l .frame__title a { background-position: 100% calc(100% - 0.22em); }
.frame__title a:hover, .frame__title a:focus-visible, .totem__name:hover, .totem__name:focus-visible { background-size: 100% 1px; }
.frame__line { margin-top: calc(2.6rem + 1px); max-width: 36ch; font-size: 0.875rem; line-height: 1.6; color: var(--muted); } /* the rule is gone (Kilian), its space stays */
.stand--l .frame__line { margin-left: auto; }

/* Without motion (no JS, reduced motion): every frame is its own screen in its own flat colour. */
html:not(.motion) .stand__stage { height: auto; min-height: 0; overflow: visible; }
html:not(.motion) .frame[data-world="bolivia"] { --ground: var(--w-bolivia); }
html:not(.motion) .frame[data-world="colombia"] { --ground: var(--w-colombia); --ink: var(--paper); }
html:not(.motion) .frame[data-world="berlin"] { --ground: var(--w-berlin); }
html:not(.motion) .frame[data-world="betlem"] { --ground: var(--w-betlem); }
html:not(.motion) .frame:not([data-world="paper"]) {
  --mix: 92%; --muted: color-mix(in srgb, var(--ink) var(--mix), var(--ground));
  background: var(--ground); color: var(--ink);
}

/* ---------- Totem: the six entries; names alternate sides of the column, like labels on a pole ---------- */
.totem { position: relative; min-height: calc(100svh - var(--foot-h, 9rem)); padding: calc(var(--gutter) * 3.4) var(--gutter) var(--gutter); display: grid; align-content: center; }
.totem__list { display: grid; justify-content: center; gap: 0.4rem; }
.totem__row {
  display: grid; grid-template-columns: minmax(6rem, 1fr) clamp(3rem, 8.2vh, 4.6rem) minmax(6rem, 1fr);
  gap: clamp(1rem, 2.4vw, 2.2rem); align-items: center;
  width: min(48rem, calc(100vw - var(--gutter) * 2));
}
.totem__disc { grid-column: 2; grid-row: 1; position: relative; display: block; width: 100%; min-width: 0; aspect-ratio: 1; color: var(--ink); }
.totem__row--r .totem__name { grid-column: 3; grid-row: 1; justify-self: start; }
.totem__row--l .totem__name { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; background-position: 100% 100%; }
.totem__name { display: inline-block; padding: 0.22rem 0; font-family: var(--f-voice); font-weight: 300; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem); line-height: 1.2; }
.chip { display: inline-block; width: 0.85rem; height: 0.85rem; flex: none; }
[data-world="bolivia"] > a > .chip { color: var(--w-bolivia); }
[data-world="colombia"] > a > .chip { color: var(--w-colombia); }
[data-world="berlin"] > a > .chip { color: var(--w-berlin); }
[data-world="betlem"] > a > .chip { color: var(--w-betlem); }
[data-world="paper"] > a > .chip { color: var(--ink); }

/* ---------- Phone: composed for 390 px ---------- */
@media (max-width: 760px) {
  :root { --em: 60vw; }
  .clearing__words { max-width: none; right: var(--gutter); bottom: 4.6rem; }
  .hint { left: var(--gutter); right: auto; bottom: 1.6rem; }
  .frame__em { top: calc(9svh + var(--em) / 2 + var(--h) * 14svh); }
  .frame__text, .stand--l .frame__text, .stand--r .frame__text {
    left: var(--gutter); right: var(--gutter); width: auto; translate: none; text-align: center;
    top: calc(9svh + var(--em) + var(--h) * 14svh + 2.2rem);
  }
  .stand--l .data, .data { justify-content: center; }
  .frame__line, .stand--l .frame__line { margin-inline: auto; }
  .frame__title a, .stand--l .frame__title a { background-position: 50% calc(100% - 0.22em); }
  .totem__row { grid-template-columns: 1fr 2.8rem 1fr; gap: 0.9rem; }
  .totem__name { font-size: 1.05rem; }
}