/* Gio system 2026 - components. Depends on tokens.css. No motion here (see motion.css). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--text);font:400 var(--fs-body)/var(--lh-text) var(--font-text);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--link)}
h1,h2,h3,p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.section{background:var(--ground);color:var(--on-ground);padding-block:var(--s-8)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--ink);color:#fff;padding:.75rem 1rem;border-radius:var(--r-sm);z-index:20}
.skip:focus{left:.5rem}

/* Focus: 3 px ring, colour follows the ground so it always has >= 3:1. */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* h3 fix: no border-radius on focus (it squared rounded cards); warm grounds reset --focus in tokens.css,
   so the old .ground-cobalt descendant override (white ring on a yellow card inside cobalt) is gone. */
[class*="ground-"]:not(.section):focus-visible{outline-color:var(--ring)}

/* Display type, slanted like the covers. Slant is on the element, so pair
   with padding-right to stop the last letter clipping. */
.display{font-family:var(--font-display);font-weight:400;text-transform:uppercase;line-height:var(--lh-display);letter-spacing:0}
.slant{display:inline-block;transform:skewX(var(--slant));transform-origin:0 100%;padding-right:.12em}
.h-hero{font-size:var(--fs-hero)}
.h-2{font-size:var(--fs-h2)}
.lead{font-size:var(--fs-lead);line-height:1.4;font-weight:500;max-width:32em}
.time{color:var(--time)}

/* Section header: a big Anton word and one sentence. No kicker, no rule. */
.sec-head{display:grid;gap:var(--s-3);margin-bottom:var(--s-6);max-width:44rem}
.sec-head p{font-size:var(--fs-lead);line-height:1.4}

/* Buttons: 44 px minimum, label always text. Flat, no gradients. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--tap);height:3.375rem;padding:0 var(--s-5);border:3px solid var(--action);border-radius:var(--r-md);background:var(--action);color:var(--on-action);font:600 1.125rem/1 var(--font-text);text-decoration:none;cursor:pointer}
.ground-cream .btn:not(.btn--secondary){border-color:var(--ink)}

/* GIO soft tab: bottom-left of covers, a darker shade of its ground. */
.gio-tab{display:inline-block;background:var(--tab);color:var(--on-tab);font:400 1.375rem/1 var(--font-display);text-transform:uppercase;padding:.55rem .85rem .5rem;border-radius:var(--r-tab);text-decoration:none}
a.gio-tab{min-height:var(--tap);display:inline-flex;align-items:center}

/* The nothing-in-bottom-right rule of the covers (YouTube duration badge). */

.vcard{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-lg);background:var(--ground);color:var(--on-ground);text-decoration:none;overflow:hidden;isolation:isolate}
.vcard__img{aspect-ratio:16/9;width:100%;object-fit:cover}
.vcard__body{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4)}
.vcard__min{font:400 3.25rem/1 var(--font-display);color:var(--time);transform:skewX(var(--slant));padding-right:.1em;display:flex;align-items:baseline;gap:.1em;min-width:3.4ch}
.vcard__min small{font-size:.38em;color:var(--on-ground)}
.vcard__title{font:600 1.0625rem/1.25 var(--font-text)}
.vcard__go{font:600 var(--fs-small)/1.3 var(--font-text);color:var(--on-ground-2)}

/* Counter: number is real text for assistive tech; the visible digits come
   from a CSS counter so motion.css can tick them. Static value is --n. */
.tick{counter-reset:t var(--n,0)}
.tick__n::before{content:counter(t) / ""}

.counter{display:inline-flex;align-items:baseline;gap:.3em;font:400 3rem/1 var(--font-display);color:var(--time);transform:skewX(var(--slant));padding-right:.1em}
.counter small{font:600 var(--fs-small)/1 var(--font-text);color:var(--on-ground);transform:skewX(calc(var(--slant) * -1))}

/* Ticker: real content only, pausable (WCAG 2.2.2), static list without motion. */
.ticker{position:relative;background:var(--ink);color:var(--white);overflow:hidden}
.ticker__row{display:flex;align-items:center;gap:var(--s-4)}
.ticker__view{flex:1;min-width:0;overflow:hidden}
.ticker__track{display:flex;width:max-content}
.ticker__list{display:flex;gap:var(--s-6);list-style:none;margin:0;padding:var(--s-3) var(--s-6) var(--s-3) 0}
.ticker__list li{white-space:nowrap;font:400 1.375rem/1 var(--font-display);text-transform:uppercase}
.ticker__list b{color:var(--yellow);font-weight:400;margin-right:.4em}
.ticker__dup{display:none}

/* Footer */
.footer{background:var(--ink);color:var(--white);padding-block:var(--s-7)}
.footer__in{display:grid;gap:var(--s-5)}
.footer a{color:var(--white);display:inline-flex;align-items:center;min-height:var(--tap)}
.footer__nav{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);list-style:none;margin:0;padding:0}
.footer p{max-width:36rem}

.nav{display:flex;gap:var(--s-2) var(--s-5);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:600;color:var(--ink)}
.hero{padding-block:var(--s-6) 0;overflow:hidden}
.hero__in{display:grid;gap:var(--s-5);align-items:end}