/* Holding page (2026-10-18): the watch picked in builder.html, with the c-series copy and bubble cursor. */
/* the dial's centre sits on the page's vertical middle, level with the copy; 120px = chain + bow + crown above the case */
.stage { --D: clamp(280px, 30vw, 420px); position: relative; justify-self: center; width: 100%; }
.stage [data-wt] { --d: var(--D) !important; }
.stage .st { position: relative; width: 100%; height: 100svh; }
.anchor { position: absolute; left: 50%; top: calc(50svh - 120px - var(--D) / 2); width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; border: 1px solid var(--dim); }
.pend { position: absolute; left: 50%; top: calc(50svh - 120px - var(--D) / 2); width: 0; height: 0; }
main.c { padding-top: 0; padding-bottom: 0; align-items: center; }
main.c .txt { padding: 64px 0; }
.txt h1 { text-transform: uppercase; letter-spacing: .01em; font-size: clamp(48px, 6.4vw, 92px); }
.txt .late { font-size: clamp(28px, 3vw, 40px); color: var(--fg); opacity: .78; }
/* keywords read as text, not as buttons */
.tags { gap: 4px 0; margin-bottom: 14px; }
.tags i { border: 0; padding: 0; border-radius: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.tags i + i::before { content: "·"; margin: 0 10px; opacity: .6; }
/* talk bubble: hangs outside the button it belongs to, pulled a little toward the cursor */
.cur .b { display: none; }
.tb { position: fixed; left: 0; top: 0; z-index: 101; pointer-events: none; white-space: nowrap; padding: 9px 14px; border-radius: 16px 16px 16px 4px; background: var(--fg); color: var(--bg);
  font: 400 13px/1 var(--sans); transform-origin: 0 100%; scale: 0; opacity: 0; transition: scale .3s cubic-bezier(.3,1.5,.5,1), opacity .2s; }
.tb.on { scale: 1; opacity: 1; }
@media (max-width: 820px) {
  .stage { --D: min(68vw, 300px); } .stage .st { height: calc(var(--D) + 200px); }
  .anchor, .pend { top: 24px; }
  main.c .txt { padding: 0 0 72px; }
}
.stage .case .suit.q { width: calc(var(--D) * .05); height: calc(var(--D) * .05); }
.lay-switch { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(128,128,128,.18); backdrop-filter: blur(8px); font: 500 11px/1 var(--sans); }
.lay-switch a { padding: 7px 10px; border-radius: 999px; text-decoration: none; opacity: .6; }
.lay-switch a[aria-current] { background: var(--fg); color: var(--bg); opacity: 1; }
/* only the hour marks: the minute ticks crowded the suits */
.stage .case .tk:not(.hr) { display: none; }