/* Clock holding pages, round 3 (c-1 to c-5). Calmer than watch.css: plain hands, quiet suits, ears always up. */
html, body, a, button { cursor: none; }
@media (hover: none) { html, body, a, button { cursor: auto; } .cur { display: none; } }

/* cursor: a dot that becomes a talking bubble over the contact buttons */
.cur { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; transition: opacity .3s; }
.cur .d { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--fg); transition: scale .25s; }
.cur .b { position: absolute; left: 10px; bottom: 10px; white-space: nowrap; padding: 9px 14px; border-radius: 16px 16px 16px 4px; background: var(--fg); color: var(--bg);
  font: 400 13px/1 var(--sans); letter-spacing: .01em; transform-origin: 0 100%; scale: 0; transition: scale .3s cubic-bezier(.3,1.5,.5,1); }
.cur.talk .d { scale: .6; } .cur.talk .b { scale: 1; }
.cur.gone { opacity: 0; }

main.c { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); padding: 64px clamp(16px, 6vw, 96px); }
.txt { display: grid; gap: 20px; max-width: 540px; }
.txt h1 { font-size: clamp(52px, 7.4vw, 104px); line-height: .95; }
.txt .late { font: italic 300 clamp(22px, 2.4vw, 30px)/1.1 var(--serif); color: var(--dim); margin-top: -6px; }
.txt p { color: var(--dim); max-width: 46ch; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags i { font-style: normal; font-size: 12px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); }
.meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); font-variant-numeric: tabular-nums; }

/* clock base */
.clk { position: relative; justify-self: center; width: min(80vw, 420px); aspect-ratio: 1; }
.clk .case { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line); }
.clk .mark { position: absolute; width: 0; height: 0; }
.clk .mark > * { position: absolute; translate: -50% -50%; }
.clk .suit { display: block; width: 18px; height: 18px; color: var(--fg); opacity: .8; }
.clk .suit svg { display: block; width: 100%; height: 100%; }
.clk .pip { display: block; width: 3px; height: 3px; border-radius: 50%; background: var(--dim); }
.clk .bar { display: block; width: 1px; height: 9px; background: var(--dim); }
.hand { position: absolute; left: 50%; bottom: 50%; width: 2px; margin-left: -1px; transform-origin: 50% 100%; background: var(--fg); border-radius: 2px; }
.hh { height: 24%; width: 3px; margin-left: -1.5px; } .mh { height: 36%; } .sh { height: 40%; width: 1px; margin-left: -.5px; background: var(--grey); }
.pin { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--fg); }
.bun { position: absolute; color: var(--fg); }
.clk .crown { position: absolute; left: 50%; top: -18px; width: 16px; height: 13px; margin-left: -8px; border: 1px solid var(--line); border-radius: 3px 3px 1px 1px; }

/* c-1 · subdial: rabbit lives in the small seconds dial at six o'clock */
.v-sub .bun { left: 50%; top: 58%; width: 18%; height: 21%; translate: -50% 0; }
.v-sub .subring { position: absolute; left: 50%; top: 66%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px solid var(--line); }

/* c-2 · centre: big rabbit in the middle, hands pass behind it */
.v-center .bun { left: 50%; top: 50%; width: 30%; height: 34%; translate: -50% -56%; z-index: 2; }
.v-center .hand { opacity: .55; }

/* c-3 · peek: rabbit sits behind the watch, ears over the rim */
.v-peek .bun { left: 50%; top: -14%; width: 26%; height: 30%; translate: -50% 0; z-index: -1; }
.v-peek .case { background: var(--bg); }
.v-peek .crown { display: none; }

/* c-4 · card: the case is a playing card, suits in the corners */
.v-card { aspect-ratio: 5 / 7; width: min(70vw, 340px); }
.v-card .case { border-radius: 18px; }
.v-card .dial { position: absolute; left: 10%; right: 10%; top: 50%; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; border: 1px solid var(--line); }
.v-card .corner { position: absolute; display: grid; justify-items: center; gap: 4px; font: 400 14px/1 var(--serif); color: var(--dim); }
.v-card .corner .suit { width: 14px; height: 14px; }
.v-card .tl { top: 16px; left: 16px; } .v-card .br { bottom: 16px; right: 16px; rotate: 180deg; }
.v-card .bun { left: 50%; top: 55%; width: 16%; height: 13%; translate: -50% 0; }
.v-card .crown { display: none; }

/* c-5 · orbit: no hands; a spade travels the rim as the seconds and the rabbit's eyes follow it */
.v-orbit .runner { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.v-orbit .runner .suit { position: absolute; width: 20px; height: 20px; translate: -50% -50%; opacity: 1; }
.v-orbit .bun { left: 50%; top: 50%; width: 32%; height: 36%; translate: -50% -55%; }
.v-orbit .time { position: absolute; left: 0; right: 0; bottom: 22%; text-align: center; font: 300 15px/1 var(--serif); color: var(--dim); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

@media (max-width: 820px) { main.c { grid-template-columns: 1fr; padding-top: 72px; } .clk { width: min(72vw, 300px); order: -1; } .v-card { width: min(56vw, 240px); } }