.tzpage { background: var(--bg); }
.tag--link { text-decoration: none; }
.tag--link:hover { color: #fff; }

.vc { position: relative; text-align: center; padding: clamp(110px, 18vh, 170px) var(--gutter) clamp(64px, 10vh, 110px);
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(173,69,86,.5), rgba(153,116,61,.12) 60%, transparent 100%),
    linear-gradient(189deg, #1f1f38 .55%, #18182d 35%, #111222 70%, #0d0b21 100%); }
.vc__eyebrow { margin: 0 0 14px; font: 700 clamp(12px, 1.4vw, 15px)/1 var(--head); letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: var(--pink); }
.vc__title { margin: 0 0 clamp(24px, 4vh, 40px); font: 700 clamp(26px, 4.6vw, 54px)/1.1 var(--head); letter-spacing: .08em; text-transform: uppercase; }
.vc__clock { font: 400 clamp(54px, 13vw, 168px)/1 var(--head); letter-spacing: .02em; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "lnum" 1, "tnum" 1; text-shadow: 0 6px 50px rgba(255,120,150,.3); }
.vc__clock .ampm { font-size: .3em; letter-spacing: .1em; margin-left: .35em; opacity: .75; }
.vc__date { margin: 14px 0 0; font: 600 clamp(13px, 1.6vw, 17px)/1.3 var(--head); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.vc__diff { margin: 22px auto 0; display: inline-block; padding: 9px 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-size: 14px; }
.vc__diff:empty { display: none; }
.vc__line { margin: 26px auto 0; max-width: 46ch; font-size: clamp(15px, 1.8vw, 18px); color: rgba(255,255,255,.82); min-height: 3.2em; }

.rel { padding: clamp(56px, 8vw, 100px) 0 clamp(64px, 9vw, 110px); background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.rel .heading { font-size: clamp(22px, 3.6vw, 40px); letter-spacing: .14em; padding-left: .14em; }
.rel__intro { max-width: 58ch; margin: -14px auto 28px; text-align: center; color: var(--muted); }

.you { margin: 0 auto 34px; max-width: 720px; padding: 22px 24px; text-align: center; border: 1px solid rgba(255,178,198,.5); border-radius: 6px; background: rgba(255,178,198,.06); }
.you__label { margin: 0; font: 700 12px/1 var(--head); letter-spacing: .26em; text-transform: uppercase; color: var(--pink); }
.you__when { margin: 12px 0 4px; font: 600 clamp(20px, 3.2vw, 30px)/1.2 var(--head); letter-spacing: .06em; font-feature-settings: "lnum" 1; }
.you__left { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }

.regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.region { padding: 22px 22px 14px; border: 1px solid var(--faint); border-radius: 6px; background: rgba(255,255,255,.02); }
.region h3 { margin: 0 0 8px; font: 700 12px/1 var(--head); letter-spacing: .26em; text-transform: uppercase; color: var(--pink); }
.region ul { list-style: none; margin: 0; padding: 0; }
.region li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.07); font-feature-settings: "lnum" 1, "tnum" 1; }
.region li:first-child { border-top: 0; }
.city { font: 600 14px/1.25 var(--head); letter-spacing: .08em; text-transform: uppercase; }
.city small { display: block; margin-top: 3px; font: 400 12px/1.2 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.when { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.when small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.region li.is-you { margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 4px; background: rgba(255,178,198,.1); }
.region li.is-vc .city { color: var(--pink); }
.rel__note { margin: 28px auto 0; max-width: 60ch; text-align: center; font-size: 13px; color: var(--muted); }
.done { color: var(--pink); }

@media (max-width: 1100px) { .regions { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }