/* G1 Dances — light, flat, editorial. No external fonts or CDNs. */
:root{
 --bg:#f6f5f1;--paper:#ffffff;--ink:#111111;--soft:#444444;--muted:#808080;--line:#e3e1db;--line2:#cfccc4;
 --accent:#e5482b;--tile:#4b5b73;
 --pad:clamp(16px,4vw,56px);--max:1600px;
 font-family:"Helvetica Neue",Helvetica,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 color:var(--ink);background:var(--bg);color-scheme:light;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-underline-offset:3px}button,input,select{font:inherit;color:inherit}button{cursor:pointer}
[hidden]{display:none!important}
.skip-link{position:absolute;left:-1000px;top:0}.skip-link:focus{left:10px;top:10px;z-index:40;padding:10px;background:#fff}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.visually-hidden-select{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;border:0!important;padding:0!important;margin:-1px!important}

/* header */
.topline{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 var(--pad);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.wordmark{font-size:15px;font-weight:700;letter-spacing:-.01em;text-decoration:none}
.topnav{display:flex;gap:clamp(14px,2.4vw,28px);font-size:14px}
.topnav a{text-decoration:none;color:var(--soft)}.topnav a:hover{color:var(--ink);text-decoration:underline}

main{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* hero */
.hero{max-width:var(--max);margin:0 auto;padding:clamp(32px,6vw,80px) var(--pad) 0}
.hero-copy{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px 48px;align-items:end;margin-bottom:clamp(20px,3vw,36px)}
.hero h1{grid-row:span 2;margin:0;white-space:nowrap;font-size:clamp(52px,8.6vw,168px);line-height:.86;letter-spacing:-.055em;font-weight:700}
.lede{margin:0;max-width:440px;font-size:clamp(16px,1.35vw,20px);line-height:1.45;color:var(--soft)}
.hero-links{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin:0}
.dataset-button{display:inline-flex;align-items:center;height:46px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-size:15px;font-weight:600;transition:background .15s}
.dataset-button:hover{background:var(--accent)}
.text-link{font-size:15px;font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px}
.text-link:hover{color:var(--accent)}
.hero-frame{position:relative;aspect-ratio:16/9;max-height:78vh;width:100%;overflow:hidden;border-radius:10px;background:var(--tile) url(../media/hero_poster.jpg) center/cover no-repeat}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* gallery */
#gallery{padding-top:clamp(48px,7vw,96px);scroll-margin-top:56px}
.gallery-head{display:none}
.style-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(18px,2.4vw,28px)}
.chip{height:38px;padding:0 16px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--ink);font-size:14px;font-weight:500;transition:background .12s,border-color .12s}
.chip .gdot{display:none}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.gallery-status{margin:0;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}

.motion-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,18vw,260px),1fr));gap:clamp(10px,1.4vw,20px)}
.motion-card{position:relative;min-width:0;background:transparent;border:0}
.card-open{position:relative;display:block;width:100%;aspect-ratio:16/10;border:0;padding:0;overflow:hidden;border-radius:8px;background:var(--tile)}
.card-open img,.card-open video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transition:opacity .3s}
.card-open video{opacity:0;pointer-events:none}.card-open.previewing video{opacity:1}.card-open.previewing img{opacity:0}

.card-play{display:none}
.card-info{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 2px 0}
.card-title{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600}
.card-title .gdot{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--g,#999);flex:none}
.card-title small,.card-right{display:none}
.load-more{display:block;height:1px;margin:0 auto;padding:0;border:0;opacity:0;pointer-events:none}
.empty,.error-state{grid-column:1/-1;padding:40px 0;text-align:center;color:var(--muted);font-size:15px}.error-state{color:var(--accent)}

/* footer */
.site-footer{max-width:var(--max);margin:clamp(48px,6vw,90px) auto 0;padding:24px var(--pad) 40px;border-top:1px solid var(--line)}
.site-footer details{padding:4px 0}
.site-footer summary,.compare-notes summary{cursor:pointer;list-style:none;font-size:14px;font-weight:600}
.site-footer summary::-webkit-details-marker,.compare-notes summary::-webkit-details-marker{display:none}
.site-footer summary:after,.compare-notes summary:after{content:"+";float:right;font-weight:400}
.site-footer details[open]>summary:after,.compare-notes[open]>summary:after{content:"−"}
.footer-content{max-width:820px;color:var(--soft);font-size:14px;line-height:1.7}
.footer-content p{margin:12px 0}.footer-content a,.inline-button{color:var(--ink)}
.inline-button{padding:0;border:0;background:none;text-decoration:underline;text-underline-offset:3px;font-size:inherit}
.footer-line{margin:18px 0 0;color:var(--muted);font-size:13px}

/* player */
dialog{width:min(1180px,96vw);max-height:96vh;overflow:auto;padding:0;border:0;border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 24px 80px #0004}
dialog::backdrop{background:#111111b8}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px 12px}
.dialog-kicker{margin:0 0 4px;color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.dialog-head h2{margin:0;font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.02em}
.dialog-head p:last-child{margin:4px 0 0;color:var(--muted);font-size:13px}
.close-dialog{width:40px;height:40px;border:1px solid var(--line2);border-radius:50%;background:transparent;font-size:22px;line-height:1;flex:none}
.close-dialog:hover{border-color:var(--ink)}
.mode-switch{display:inline-flex;gap:0;margin:0 22px 14px;border:1px solid var(--line2);border-radius:999px;overflow:hidden}
.mode-switch button{padding:8px 18px;border:0;background:transparent;font-size:14px;font-weight:500}
.mode-switch button[aria-pressed="true"]{background:var(--ink);color:#fff}
.video-error{margin:0 22px 12px;padding:10px 12px;border-radius:8px;background:#fdecea;color:#a3301b;font-size:13px}
.stage{position:relative;aspect-ratio:16/9;min-height:220px;margin:0 22px;overflow:hidden;border-radius:8px;background:#111}
.single-view{width:100%;height:100%;display:flex;flex-direction:column}
.media-heading{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#1b1b1b;color:#ddd;font-size:12px;font-weight:600;flex:none}
.media-heading small{color:#999;font-size:11px;font-weight:400}
.single-view video{flex:1;width:100%;height:calc(100% - 30px);min-height:0;object-fit:contain;background:#111}
.compare-view{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 26px;background:#111}
.compare-media{display:flex;min-width:0;min-height:0;flex-direction:column;border-right:1px solid #333}
.compare-media:last-of-type{border:0}
.compare-media video{flex:1;width:100%;height:calc(100% - 30px);min-height:0;object-fit:contain;background:#111}
.compare-caption{grid-column:1/-1;display:flex;align-items:center;justify-content:center;margin:0;background:#1b1b1b;color:#aaa;font-size:11px}
.dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px}
.selected-facts{display:flex;align-items:center;gap:8px;color:var(--soft);font-size:14px;text-transform:capitalize}
.selected-facts i{font-style:normal;color:var(--line2)}
.action-buttons{display:flex;align-items:center;gap:8px}
.arrow-button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line2);border-radius:50%;background:transparent;font-size:16px}
.arrow-button:hover{border-color:var(--ink)}.arrow-button:disabled{opacity:.35;cursor:default}
.download-button{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-size:14px;font-weight:600}
.download-button:hover{background:var(--accent)}
.hd-link{margin:0 6px;font-size:14px}
.compare-notes{margin:0 22px 18px;padding:12px 0 0;border-top:1px solid var(--line)}
.compare-notes p{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
video{color-scheme:dark}

@media(max-width:900px){
 .hero-copy{grid-template-columns:1fr;align-items:start}
 .hero h1{grid-row:auto}
 .topnav a:not(:last-child){display:none}
}
@media(max-width:640px){
 .hero-frame{aspect-ratio:16/9;max-height:none;border-radius:8px}
 .style-chips{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding:0 var(--pad) 2px;scrollbar-width:none}
 .style-chips::-webkit-scrollbar{display:none}.chip{flex:none}
 .motion-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .dialog-head{padding:14px 14px 10px}.mode-switch{margin:0 14px 10px}.stage{margin:0 10px;min-height:180px}
 .dialog-actions{flex-direction:column;align-items:flex-start;padding:12px 14px}.action-buttons{width:100%}.download-button{margin-left:auto}
 .compare-notes{margin:0 14px 14px}
}
@media(min-width:1800px){:root{--max:1760px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.hero-video{display:none}}
.topline{padding-inline:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)))}

.gallery-toolbar{position:sticky;top:56px;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:18px}
.gallery-mode.mode-switch{display:flex;width:max-content;margin:0;flex:none}
.player-toolbar{position:sticky;top:0;z-index:3;background:var(--paper);padding-bottom:1px;border-bottom:1px solid var(--line);margin-bottom:14px}
@media(max-width:640px){.gallery-mode button{padding:8px 13px}}


.see-all{display:table;margin:32px auto 0;padding:13px 24px;border:1px solid var(--ink);border-radius:999px;font-size:15px;font-weight:600;text-decoration:none}.see-all:hover{background:var(--ink);color:var(--bg)}
.library-back{display:inline-block;margin-bottom:6px;font-size:14px;color:var(--soft);text-decoration:none}.library-back:hover{text-decoration:underline}
.all-motions .hero{display:none}.all-motions #gallery{padding-top:28px}

/* ---- favorites row (House / Break / Waack), big autoplay tiles ---- */
.spotlight{max-width:var(--max);margin:0 auto;padding:clamp(40px,6vw,80px) var(--pad) 0}
.spotlight h2{margin:0 0 clamp(14px,2vw,22px);font-size:clamp(26px,3vw,40px);font-weight:700;letter-spacing:-.03em}
.spot-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.spot-tile{position:relative;display:block;aspect-ratio:3/4;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--tile);cursor:pointer}
.spot-tile img,.spot-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spot-tile video{opacity:0;transition:opacity .4s}.spot-tile.playing video{opacity:1}
.spot-tile:after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(transparent,#0007);pointer-events:none}
.spot-name{position:absolute;left:16px;bottom:14px;z-index:1;color:#fff;font-size:clamp(20px,2.2vw,30px);font-weight:700;letter-spacing:-.02em}
.more-on-hf{margin:28px 0 0;text-align:center;font-size:15px;font-weight:600}
.more-on-hf a{text-decoration:underline;text-decoration-thickness:1.5px}
@media(max-width:640px){.spot-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.spot-tile{aspect-ratio:2/3;border-radius:8px}.spot-name{left:8px;bottom:8px;font-size:14px}}

/* grid cards: fill the tile with the (already robot-centred) video, whole body stays visible */
.card-open{aspect-ratio:4/3!important}
.card-open img,.card-open video{object-fit:cover!important;transform:none!important}
.motion-card:hover .card-open img,.motion-card:hover .card-open video{transform:scale(1.04)!important}
.spotlight{padding-left:0;padding-right:0}
.card-open img,.card-open video{transform:none!important}
.motion-card:hover .card-open img,.motion-card:hover .card-open video{transform:scale(1.04)!important;transform-origin:50% 60%!important}
/* v8: one simple grid, no filters */
#style-chips,.style-chips,#see-all,.see-all,#spotlight{display:none!important}
/* v9: no gallery controls or labels; styles + source as one plain line */
.gallery-toolbar,.gallery-mode,.gallery-status,#library-back{display:none!important}
.about-line{max-width:var(--max);margin:0 auto;padding:clamp(28px,4vw,48px) 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 48px;color:var(--soft);font-size:clamp(15px,1.25vw,18px);line-height:1.5}
.about-line p{margin:0;max-width:620px}
.about-line .credit{color:var(--muted)}
.about-line a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px}
#gallery{padding-top:clamp(28px,4vw,48px)!important}
.motion-cards{gap:clamp(8px,1vw,14px)!important}
@media(max-width:900px){.about-line{grid-template-columns:1fr}}

/* 2026-11-11: no labels under cards (user: repetitive); videos are never zoomed (no cut heads) */
.card-info{display:flex!important;padding:6px 2px 0}
.card-title{display:flex!important;justify-content:space-between;width:100%;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.card-title{align-items:baseline}
.card-num{font-size:17px;font-weight:800;letter-spacing:-.02em;color:inherit}
.card-style{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;color:color-mix(in srgb,var(--g) 55%,#000);background:color-mix(in srgb,var(--g) 18%,transparent)}
/* style headings: one word per group instead of a label on every card */
.style-head{grid-column:1/-1;margin:clamp(18px,3vw,34px) 0 0;font-size:clamp(22px,2.6vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:inherit}
.style-head:first-child{margin-top:0}
.motion-cards{grid-template-columns:repeat(5,minmax(0,1fr))!important}
@media (max-width:900px){.motion-cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:640px){.motion-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* v1.2 fixes: whole 16:9 frame visible in cards and hero, no crop/zoom; clear credits block */
.card-open{aspect-ratio:16/9!important}
.card-open img,.card-open video{object-fit:cover!important;transform:none!important}
.motion-card:hover .card-open img,.motion-card:hover .card-open video{transform:none!important}
.hero-frame{aspect-ratio:16/9!important;max-height:none!important;width:min(100%,calc(80vh * 16 / 9));margin-inline:auto}
.hero-video{object-fit:contain!important}
.credits-block{max-width:var(--max);margin:clamp(40px,5vw,72px) auto 0;padding:0 var(--pad)}
.credits-block h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin:0 0 18px}
.credits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 28px;border-top:1px solid var(--line);padding-top:18px}
.credits-grid dt{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 4px}
.credits-grid dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.credits-grid dd a{color:var(--ink)}
.credits-note{margin:22px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:10px;font-size:14px;line-height:1.6;color:var(--soft)}
.card-open img,.card-open video{inset:-1px!important;width:calc(100% + 2px)!important;height:calc(100% + 2px)!important}
.card-open,.hero-frame{background-color:#ececeb!important}
.credits-note{font-size:17px!important;line-height:1.65!important;color:var(--ink)!important;padding:18px 20px!important}
.credits-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px 32px!important}.credits-grid dd{font-size:17px!important}.credits-grid dt{font-size:13px!important}@media(max-width:700px){.credits-grid{grid-template-columns:1fr!important}}

/* 2026-11-12 launch pass: stats strip, secondary hero button, use-it block */
.ghost-button{display:inline-flex;align-items:center;height:46px;padding:0 22px;border:1.5px solid var(--ink);border-radius:999px;text-decoration:none;font-size:15px;font-weight:600;transition:background .15s,color .15s}
.ghost-button:hover{background:var(--ink);color:#fff}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 24px;padding:clamp(28px,4vw,56px) 0 0}
.stat b{display:block;font-size:clamp(40px,6vw,104px);font-weight:700;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:8px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.about-line{padding-top:clamp(20px,2.6vw,32px)!important}
.more-on-hf{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 32px}
.use-block{max-width:var(--max);margin:clamp(40px,5vw,72px) auto 0;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:20px 48px;align-items:start;scroll-margin-top:72px}
.use-block h2{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin:0 0 14px}
.use-block p{margin:0 0 10px;max-width:520px;font-size:17px;line-height:1.55}
.use-block .use-note{color:var(--muted);font-size:15px}
.code-card{position:relative;min-width:0;border-radius:10px;background:#111;color:#f1f0ec;overflow:hidden}
.code-card pre{margin:0;padding:50px 22px 20px;overflow-x:auto;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.copy-code{position:absolute;top:10px;right:10px;height:30px;padding:0 12px;border:1px solid #444;border-radius:999px;background:#1b1b1b;color:#ddd;font-size:12px;font-weight:600}
.copy-code:hover{border-color:#aaa;color:#fff}
@media(max-width:900px){.use-block{grid-template-columns:1fr}}
@media(max-width:640px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.code-card pre{font-size:12px;padding:48px 16px 16px}}