/* vinz.tv — site layer. Sits on top of assets/ds (the vinz3210 design system
   tokens + base). Nothing here invents new colour, radius or motion — it only
   assembles the existing tokens into reusable page furniture: nav, buttons,
   link rows, labelled rules, stats, the cycling word, live dot. */

/* ── shell ── */
.vz-shell{min-height:100vh;background:var(--bg);color:var(--text)}
.vz-container{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter)}
@media (max-width:640px){.vz-container{padding:0 var(--sp-5)}}

/* ── nav ── */
.vz-nav{position:sticky;top:0;z-index:40;background:var(--bg)}
.vz-nav.is-bordered{border-bottom:1px solid var(--line)}
.vz-nav__row{display:flex;align-items:baseline;gap:var(--sp-8);padding-top:var(--sp-7);padding-bottom:var(--sp-7);flex-wrap:wrap}
.vz-nav__links{display:flex;align-items:baseline;gap:var(--sp-6);flex-wrap:wrap}
.vz-nav__links a{border:0;font-size:var(--fs-2);color:var(--text-3)}
.vz-nav__links a:hover{color:var(--text)}
.vz-nav__links a.is-active{color:var(--text)}
.vz-nav__right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-6)}

/* wordmark — the mark is the name set in type, per brand: no logo file exists */
.vz-wordmark{display:inline-flex;align-items:baseline;color:var(--text);font-weight:600;font-size:16px;line-height:1;letter-spacing:-0.035em;white-space:nowrap;border:0}
.vz-wordmark:hover{color:var(--text)}
.vz-wordmark small{font-weight:400;color:var(--text-3);margin-left:2px}

/* ── live / status dot ── */
.vz-live{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-2);line-height:1;color:var(--text)}
.vz-live.is-off{color:var(--text-3)}
.vz-live__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:vz-blink 1.4s steps(1,end) infinite}
.vz-live.is-off .vz-live__dot{background:var(--grey-400);animation:none}

/* ── buttons ── */
.vz-btn{appearance:none;-webkit-appearance:none;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h);padding:0 16px;box-sizing:border-box;font-family:var(--font-sans);font-size:var(--fs-1);font-weight:var(--fw-regular);letter-spacing:var(--tr-body);white-space:nowrap;text-decoration:none;border-radius:0;cursor:pointer;border:1px solid transparent;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.vz-btn--lg{height:var(--control-h-lg);padding:0 22px;font-size:var(--fs-2);gap:10px}
.vz-btn--sm{height:var(--control-h-sm);padding:0 12px;font-size:var(--fs-0);gap:7px}
.vz-btn--primary{background:var(--text);color:var(--text-inv);border-color:var(--text)}
.vz-btn--primary:hover{background:var(--grey-100);border-color:var(--grey-100)}
.vz-btn--accent{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.vz-btn--accent:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.vz-btn--secondary{background:transparent;color:var(--text);border-color:var(--line-2)}
.vz-btn--secondary:hover{border-color:var(--line-strong)}
.vz-btn--ghost{background:transparent;color:var(--text-3);border-color:transparent}
.vz-btn--ghost:hover{color:var(--text)}
.vz-btn[disabled]{opacity:.35;cursor:not-allowed}

/* ── labelled rule: "text — line — count" ── */
.vz-rule-label{display:flex;align-items:center;gap:var(--sp-4)}
.vz-rule-label__text{font-size:var(--fs-2);color:var(--text-3);white-space:nowrap}
.vz-rule-label__line{flex:1;height:1px;background:var(--line)}
.vz-rule-label__meta{font-size:var(--fs-0);color:var(--text-3)}

/* ── link row (work list / linktree / blog index) ── */
.vz-rows{display:flex;flex-direction:column}
.vz-row{display:flex;align-items:baseline;gap:var(--sp-5);padding:var(--sp-5) 0;border-bottom:1px solid var(--line);color:var(--text);border-width:0 0 1px 0;text-decoration:none}
.vz-row:hover{color:var(--text)}
.vz-row:hover .vz-row__arrow{opacity:1}
.vz-row__title{font-size:var(--fs-3);flex:0 0 auto}
.vz-row__desc{color:var(--text-3);flex:1 1 auto;min-width:0}
.vz-row__meta{color:var(--text-3);font-size:var(--fs-1);white-space:nowrap}
.vz-row__arrow{color:var(--text-3);opacity:0;transition:opacity var(--dur-fast) var(--ease);margin-left:auto}

/* ── stat ── */
.vz-stat__label{font-size:var(--fs-1);color:var(--text-3);margin-bottom:8px}
.vz-stat__value{font-weight:600;font-size:var(--fs-6);letter-spacing:var(--tr-heading)}

/* ── cycling word — the signature motion: outgoing lifts and fades, incoming rises in ── */
.vz-cycle{position:relative;display:inline-block;vertical-align:top;height:1.3em;margin-bottom:-0.28em;overflow:hidden}
.vz-cycle.is-accent{color:var(--accent-text)}
.vz-cycle__word{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(.42em);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-cycle) var(--ease)}
.vz-cycle__word.is-current{opacity:1;transform:none}
.vz-cycle__word.is-prev{transform:translateY(-.42em)}

/* ── count-up ── */
.vz-count{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ── card (not a box — a label, content, and space) ── */
.vz-card__label{font-size:var(--fs-1);color:var(--text-3);margin-bottom:12px}
.vz-card.is-bordered{border:1px solid var(--line);padding:var(--pad-card)}
.vz-card.is-inset{background:var(--surface-inset);border:1px solid var(--line);padding:var(--pad-card)}

/* ── form controls ── */
.vz-field{display:flex;flex-direction:column;gap:8px}
.vz-field label{font-size:var(--fs-1);color:var(--text-3)}
.vz-input{appearance:none;-webkit-appearance:none;margin:0;height:var(--control-h);padding:0 2px;background:transparent;color:var(--text);border:0;border-bottom:1px solid var(--line-2);font-family:var(--font-sans);font-size:var(--fs-2);letter-spacing:var(--tr-body);border-radius:0;outline:none;transition:border-color var(--dur-fast) var(--ease)}
.vz-input::placeholder{color:var(--text-3)}
.vz-input:focus{border-bottom-color:var(--text)}
.vz-input-row{display:flex;gap:12px;align-items:stretch}
.vz-input-row .vz-input{flex:1}

/* ── footer ── */
.vz-footer{border-top:1px solid var(--line)}
.vz-footer .vz-container{display:flex;align-items:baseline;gap:var(--sp-6);padding-top:var(--sp-7);padding-bottom:var(--sp-7);font-size:var(--fs-0);color:var(--text-3);flex-wrap:wrap}
.vz-footer .vz-container>*:last-child{margin-left:auto}
.vz-footer a{border:0;color:var(--text-3)}
.vz-footer a:hover{color:var(--text)}

/* ── misc text ── */
.vz-prose p{color:var(--text-2)}
.vz-prose a{color:var(--text);border-bottom:1px solid var(--line-2)}
.vz-prose a:hover{color:var(--accent-text);border-bottom-color:var(--accent)}
.vz-eyebrow{font-size:var(--fs-1);color:var(--text-3);margin-bottom:var(--sp-4)}
.vz-back{display:inline-flex;align-items:center;gap:6px;color:var(--text-3);border:0;font-size:var(--fs-1)}
.vz-back:hover{color:var(--text)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2)}
::-webkit-scrollbar-track{background:transparent}