/* Culture Desk living scene. Colour, space, line, radius and size tokens come from tokens/culture-desk.css, the
   brand kit's token file served with its comments removed (the pinned byte copy is kit/tokens/culture-desk.css,
   in brand-kit.lock.json); this file names only the scene's own roles. */
:root {
  --cd-strip-h: var(--cd-space-64);   /* the strip under the scene: room for the hover ledge and the focus ring */
  --cd-strip-pad: var(--cd-space-16);
  --cd-font-body: var(--cd-type-body-family);
}

html, body { margin: 0; height: 100%; }
body {
  background: var(--cd-color-ground);
  color: var(--cd-color-text);
  font-family: var(--cd-font-body);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.vh, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; left: var(--cd-space-16); top: var(--cd-space-16); z-index: 500;
  padding: var(--cd-space-8) var(--cd-space-16);
  background: var(--cd-color-surface); color: var(--cd-color-text);
  border: var(--cd-line-screen) solid var(--cd-color-outline); border-radius: var(--cd-radius-pill);
  outline: var(--cd-line-screen) solid var(--cd-color-focus-ring); outline-offset: var(--cd-line-screen);
}

.stage { position: fixed; inset: 0; }
.scene {
  position: absolute; left: 0; top: 0; right: 0; bottom: calc(var(--cd-strip-h) + env(safe-area-inset-bottom));
  overflow: hidden; background: var(--cd-color-ground);
  touch-action: none;
}

/* Before the live scene takes over, the still is framed as its first frame: right-aligned on desktop (the span
   from the turntable to the tapes), centred on him on phones (the phone still is the crop around him). */
.poster img {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 60%;
  user-select: none; -webkit-user-drag: none;
}
.poster.is-placed img { object-fit: fill; }
/* Phones (portrait): the scene runs full height and the strip sits over the floor of the crop. */
@media (max-aspect-ratio: 3/4) {
  .scene { bottom: 0; }
  .poster img { object-position: 50% 0; }
}
.gl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; }
.gl.is-live { visibility: visible; }
.poster.is-hidden { visibility: hidden; }

/* Hotspots: invisible controls over the art. The art itself is the affordance; the ring shows focus. */
.hotspots { position: absolute; inset: 0; }
html:not(.js) .hotspots, .no-live .hotspots { display: none; }
/* while the still shows (loading, or a dropped drawing surface) the live-only controls step out of the way */
.still .hotspots { visibility: hidden; }
.hs {
  position: absolute; display: block; margin: 0; padding: 0; border: 0;
  background: transparent; border-radius: var(--cd-radius-screen);
  cursor: pointer; touch-action: none;
  min-width: var(--cd-size-target-min); min-height: var(--cd-size-target-min);
}
.hs-sky { cursor: grab; border-radius: 0; }
.hs-sky.is-dragging { cursor: grabbing; }
.hs:focus:not(:focus-visible) { outline: none; }
.hs:focus-visible {
  outline: var(--cd-line-screen) solid var(--cd-color-focus-ring);
  outline-offset: var(--cd-line-screen);
  box-shadow: 0 0 0 var(--cd-line-screen) var(--cd-color-ground);   /* cream band under the ring: readable on the art */
}
.hs-sky:focus-visible { outline-offset: calc(-3 * var(--cd-line-screen)); box-shadow: inset 0 0 0 calc(2 * var(--cd-line-screen)) var(--cd-color-ground); }

/* The strip */
.strip {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--cd-strip-h) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--cd-space-16);
  /* clear of the notch, the island and the home bar on phones held either way */
  padding: 0 max(var(--cd-strip-pad), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--cd-strip-pad), env(safe-area-inset-left));
  box-sizing: border-box;
  background: var(--cd-color-ground); color: var(--cd-color-text);
  border-top: var(--cd-line-screen) solid var(--cd-color-outline);
}
.mark { margin: 0; line-height: 0; flex: none; }
.mark svg { display: block; height: calc(var(--cd-space-8) + var(--cd-space-4)); width: auto; }
.bio { margin: 0; font-size: var(--cd-type-small-size); line-height: var(--cd-type-small-line); font-weight: var(--cd-type-small-weight); flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; }
.tools { display: flex; align-items: center; gap: var(--cd-space-4); margin-left: auto; flex: none; }

.ctl {
  position: relative; box-sizing: border-box; flex: none;
  width: var(--cd-size-control-s); height: var(--cd-size-control-s);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; color: var(--cd-color-text);
  background: var(--cd-color-surface);
  border: var(--cd-line-screen) solid var(--cd-color-outline); border-radius: var(--cd-radius-pill);
  box-shadow: var(--cd-space-4) var(--cd-space-4) 0 0 var(--cd-color-shadow);
  cursor: pointer; text-decoration: none; font: inherit;
}
.ctl::after { content: ""; position: absolute; inset: calc((var(--cd-size-control-s) - var(--cd-size-target-min)) / 2); }
.ctl:hover { background: var(--cd-color-surface-hover); box-shadow: var(--cd-space-8) var(--cd-space-8) 0 0 var(--cd-color-shadow); }
.ctl:active { box-shadow: none; transform: translate(var(--cd-space-4), var(--cd-space-4)); }
.ctl:focus:not(:focus-visible) { outline: none; }
.ctl:focus-visible { outline: var(--cd-line-screen) solid var(--cd-color-focus-ring); outline-offset: 0; }   /* the ring stays inside the strip */
.ctl:disabled, .ctl[aria-disabled="true"] {
  background: var(--cd-color-disabled-fill); color: var(--cd-color-disabled-text);
  border-style: dashed; border-color: var(--cd-color-disabled-outline); box-shadow: none; cursor: default; transform: none;
}
.i { width: var(--cd-size-icon-20); height: var(--cd-size-icon-20); fill: currentColor; }
html:not(.js) .js-only, .no-live .js-only { display: none; }
.still .js-only { visibility: hidden; }

/* Day/night toggle: shows what a press does (moon by day, sun by night); paused state shows play. */
#ctl-night .i-sun, #ctl-pause .i-play { display: none; }
#ctl-night[aria-pressed="true"] .i-sun { display: block; }
#ctl-night[aria-pressed="true"] .i-moon { display: none; }
#ctl-pause.is-paused .i-play { display: block; }
#ctl-pause.is-paused .i-pause { display: none; }

@media (min-width: 40rem) {
  :root { --cd-strip-pad: var(--cd-space-32); }
  .strip { gap: var(--cd-space-24); }
  .mark svg { height: var(--cd-space-16); }
  .bio { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; text-overflow: clip; }
  .tools { gap: var(--cd-space-8); }
}
@media (min-width: 64rem) {
  :root { --cd-strip-pad: var(--cd-space-48); }
  .mark svg { height: var(--cd-space-24); }
}

@media (forced-colors: active) {
  .ctl { border-color: ButtonBorder; box-shadow: none; }
  .hs:focus-visible { outline-color: Highlight; }
}