/* Video library (videos.js): #/, #/videos, #/watch, #/playlist.
   Same quiet light look as style.css and its tokens; the video covers carry the colour. */
.vhome { background: var(--ground); }
.vhero { padding-block: 64px 44px; text-align: center; background: radial-gradient(1200px 420px at 50% -10%, var(--core-soft), transparent 70%), linear-gradient(180deg, #fff 0%, #fff 60%, var(--alt) 100%); }
.vkicker { font-size: 15px; font-weight: 600; color: var(--local-ink); letter-spacing: -0.01em; margin: 0; }
.vhero-title { font-size: clamp(34px, 6.4vw, 72px); font-weight: 700; letter-spacing: -0.036em; line-height: 1.03; max-width: 17ch; margin: 12px auto 0; }
.vhero-sub { font-size: clamp(17px, 2vw, 21px); line-height: 1.42; color: var(--ink-2); max-width: 46ch; margin: 16px auto 0; }
.vsearch { position: relative; display: flex; align-items: center; max-width: 640px; margin: 26px auto 0; background: #fff; border: 1px solid var(--rule-2); border-radius: 980px; box-shadow: var(--shadow); transition: box-shadow 160ms ease, border-color 160ms ease; }
.vsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent), var(--shadow-lift); }
.vsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 13px 14px 13px 48px; font-size: 17px; border-radius: 980px; }
.vsearch.is-big input { padding-block: 17px; font-size: 19px; }
.vsearch-icon { position: absolute; left: 19px; top: 50%; margin-top: -10px; width: 16px; height: 16px; border: 2px solid var(--ink-3); border-radius: 50%; pointer-events: none; }
.vsearch-icon::after { content: ""; position: absolute; width: 7px; height: 2px; background: var(--ink-3); right: -6px; bottom: -3px; transform: rotate(45deg); border-radius: 2px; }
.vkbd { font: 500 12px var(--f-mono); color: var(--ink-3); border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px; margin-right: 16px; background: var(--alt); }
.vasks { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 18px auto 0; max-width: 940px; }
.vasks-lab { font-size: 13px; color: var(--ink-3); margin-right: 2px; }
.vask { font-size: 14px; color: var(--link); text-decoration: none; background: #fff; border: 1px solid var(--rule); padding: 6px 12px; border-radius: 980px; transition: border-color 140ms ease, background 140ms ease; }
.vask:hover { border-color: var(--accent); background: var(--core-soft); }
.vstats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 44px; margin: 34px 0 0; }
.vstats div { display: flex; flex-direction: column; gap: 2px; }
.vstats dt { order: 2; font-size: 13px; color: var(--ink-3); }
.vstats dd { order: 1; margin: 0; font: 700 30px/1 var(--f-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.vhero-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; }
.vhero-langs a { font-size: 14px; text-decoration: none; color: var(--ink-2); background: var(--alt); padding: 5px 12px; border-radius: 980px; }
.vhero-langs a:hover { background: var(--sunk); color: var(--ink); }
.vhero-langs a.is-soon { color: var(--planned); background: var(--planned-soft); }
.vhero-langs .mono { color: var(--ink-3); margin-left: 4px; }

.vsec { padding-top: 52px; }
.vsec-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 16px; }
.vsec-head > div:first-child { flex: 1; min-width: 0; }
.vsec-head h2, .vsec-title h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.03em; }
.vsec-title { padding-top: 72px; }
.vlead { color: var(--ink-2); margin: 6px 0 0; max-width: 76ch; font-size: 15.5px; }
.vlead .mono { color: var(--ink-3); }
.vmore { font-size: 14px; color: var(--link); text-decoration: none; white-space: nowrap; }
.vmore:hover { text-decoration: underline; }
.vnote { font-size: 13px; color: var(--ink-3); margin: 10px 0 0; }
.vrail-btns { display: flex; gap: 6px; }
.vrail-btn { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--alt); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.vrail-btn:hover { background: var(--sunk); }
.vrail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.vrail > div { scroll-snap-align: start; min-width: 0; }

.vcard { display: grid; gap: 10px; align-content: start; text-decoration: none; color: inherit; border-radius: var(--radius-sm); }
.vthumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--sunk); box-shadow: var(--shadow); transition: transform 200ms ease, box-shadow 200ms ease; }
.vthumb img, .vp-thumb img, .vres-thumb img, .vpl-cover img, .vfacade img, .vplayer.is-soon > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard:hover .vthumb { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.vcard:hover .vtitle { color: var(--accent); }
.vcard.is-coming .vthumb img { filter: saturate(0.8); }
.vcover-blank { display: grid; place-items: center; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, var(--alt) 0 12px, var(--sunk) 12px 24px); color: var(--ink-3); font-weight: 600; }
.vdur { position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, 0.78); color: #fff; padding: 2px 6px; border-radius: 6px; font-size: 12px; }
.vflag { position: absolute; left: 8px; top: 8px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 980px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14); }
.vcoming .vflag, .vsoon .vflag { position: static; justify-self: start; }
.vsoon .vflag { justify-self: center; }
.vflag.vs-ready { color: var(--good); }
.vflag.vs-in_production { color: var(--production); }
.vflag.vs-planned { color: var(--planned); }
.vprog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.55); }
.vprog span { display: block; height: 100%; width: var(--p); background: var(--live); }
.vdone { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--good); color: #fff; font-size: 14px; display: grid; place-items: center; }
.vmeta { display: grid; gap: 3px; }
.vkick { font-size: 11.5px; color: var(--ink-3); }
.vtitle { font-weight: 600; font-size: 15.5px; line-height: 1.3; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 140ms ease; }
.vq { font-size: 14px; color: var(--ink-2); line-height: 1.4; margin: 0; }
.vcard .vq { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.vchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 3px 10px; border-radius: 980px; background: var(--alt); color: var(--ink-2); text-decoration: none; border: 0; }
a.vchip:hover, button.vchip:hover { background: var(--sunk); color: var(--ink); cursor: pointer; }
.vchip.vs-published { background: var(--core-soft); color: var(--accent); font-weight: 600; }
.vchip.vs-ready { background: var(--good-soft); color: var(--good); font-weight: 600; }
.vchip.vs-in_production { background: var(--warn-soft); color: var(--production); font-weight: 600; }
.vchip.vs-planned { background: var(--planned-soft); color: var(--planned); font-weight: 600; }
.vchip.is-x { background: var(--ink); color: #fff; }
button.vchip.is-x:hover { background: var(--ink-2); color: #fff; }

.vbtn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; font-size: 15px; padding: 10px 18px; border-radius: 980px; background: var(--accent); color: #fff; border: 0; transition: background 160ms ease; }
.vbtn:hover { background: var(--accent-hover); }
.vbtn.ghost { background: var(--alt); color: var(--ink); }
.vbtn.ghost:hover { background: var(--sunk); }
.vbtn[aria-pressed="true"] { background: var(--good-soft); color: var(--good); }

/* path */
.vpath-pick { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font: 600 clamp(19px, 2.4vw, 26px)/1.3 var(--f-display); letter-spacing: -0.02em; }
.vpath-pick label { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; max-width: 100%; }
.vpath-pick select { font: inherit; color: var(--accent); background-color: var(--core-soft); border: 0; border-radius: 12px; padding: 4px 36px 4px 12px; appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; max-width: 100%; }
.vpath-sum { color: var(--ink-3); margin: 18px 0 8px; }
.vpath-list, .vpl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.vpath-list a, .vpl-list a { display: grid; grid-template-columns: 30px 176px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px; border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: background 140ms ease; }
.vpath-list a:hover, .vpl-list a:hover { background: var(--alt); }
.vp-n { color: var(--ink-3); font-size: 14px; text-align: right; }
.vp-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--sunk); }
.vp-thumb .vdone { width: 20px; height: 20px; font-size: 12px; }
.vp-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; }
.vp-kick { font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vp-title { font-weight: 600; font-size: 16.5px; letter-spacing: -0.012em; line-height: 1.3; }
.vp-q { font-size: 14px; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vpl-list li.is-coming a { opacity: 0.82; }

/* tasks and stages */
.vtopics { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.vtopic { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; background: var(--alt); border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; letter-spacing: -0.01em; transition: background 140ms ease, color 140ms ease; }
.vtopic:hover { background: var(--core-soft); color: var(--accent); }
.vtopic .mono { color: var(--ink-3); font-weight: 500; }
.vstages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.vstages a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 12px; background: var(--alt); border-radius: var(--radius-sm); text-decoration: none; transition: background 140ms ease; }
.vstages a:hover { background: var(--core-soft); }
.vstages a.is-empty { opacity: 0.45; pointer-events: none; }
.vstages b { font-size: 14px; line-height: 1.25; letter-spacing: -0.01em; hyphens: auto; overflow-wrap: anywhere; }
.vstages .mono { color: var(--ink-3); font-size: 11.5px; }
.vst-n { font: 700 24px/1 var(--f-display); letter-spacing: -0.03em; margin-top: auto; }

/* coming */
.vcoming-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.vcoming { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--radius); background: var(--alt); }
.vcoming h3 { font-size: 20px; }
.vcoming p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.vcoming .mono { color: var(--ink-3); font-size: 12px; }
.vcoming.is-course { background: linear-gradient(160deg, var(--planned-soft), #fff 85%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--planned) 20%, transparent); }
.vcoming .vbtn { justify-self: start; margin-top: 6px; }

/* search page */
.vsearch-page { padding-block: 28px 64px; }
.vsp-head { display: grid; gap: 14px; }
.vsp-head .vsearch { margin: 0; max-width: none; }
.vsp-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; margin-top: 26px; align-items: start; }
.vfacets { position: sticky; top: 70px; display: grid; gap: 18px; max-height: calc(100vh - 90px); overflow: auto; padding-right: 6px; scrollbar-width: thin; }
.vfg-lab { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.vfg-clear { border: 0; background: var(--alt); border-radius: 50%; width: 18px; height: 18px; line-height: 1; cursor: pointer; color: var(--ink-2); }
.vfg-items { display: grid; gap: 2px; }
.vfacet { display: flex; justify-content: space-between; gap: 10px; text-align: left; border: 0; background: transparent; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 14.5px; color: var(--ink-2); }
.vfacet:hover { background: var(--alt); color: var(--ink); }
.vfacet .mono { color: var(--ink-3); }
.vfacet.is-on { background: var(--ink); color: #fff; }
.vfacet.is-on .mono { color: rgba(255, 255, 255, 0.7); }
.vreset { justify-self: start; }
.vres-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
.vres-head p { margin: 0; color: var(--ink-2); }
.vres-list { list-style: none; margin: 0; padding: 0; display: grid; }
.vres { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.vres-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--sunk); align-self: start; }
.vres-body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.vres-body .vkick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.vres-body h3 { font-size: 19px; letter-spacing: -0.016em; }
.vres-body h3 a { text-decoration: none; }
.vres-body h3 a:hover { color: var(--accent); }
.vwatch mark, .vsearch-page mark { background: color-mix(in oklab, #ffd60a 55%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.vmoments { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; gap: 2px; }
.vmoments a { display: grid; grid-template-columns: 44px auto minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 8px; text-decoration: none; font-size: 14px; color: var(--ink-2); }
.vmoments a:hover { background: var(--core-soft); color: var(--ink); }
.vm-t { color: var(--accent); font-weight: 600; }
.vm-k { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.vm-more a { display: block; color: var(--link); }
.vempty { padding: 40px 0; }
.vempty h3 { font-size: 22px; }
.vempty p { color: var(--ink-2); }
.vempty .vasks { justify-content: flex-start; }

/* watch page */
.vwatch { padding-block: 24px 64px; }
.vwatch-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 30px; margin-top: 14px; align-items: start; }
/* the description follows the side column in the page (so chapters come first on phones) but sits under the title on wide screens */
.vwatch-grid { grid-template-rows: auto 1fr; row-gap: 0; }
.vwatch-grid > .vwatch-main { grid-column: 1; grid-row: 1; }
.vwatch-grid > .vwatch-side { grid-column: 2; grid-row: 1 / span 2; }
.vwatch-grid > .vw-about { grid-column: 1; grid-row: 2; }
.vplayer { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow-lift); }
.vplayer iframe, .vplayer #vyt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vfacade { position: absolute; inset: 0; display: block; padding: 0; border: 0; cursor: pointer; background: #000; }
.vfacade img { opacity: 0.94; transition: opacity 160ms ease, transform 400ms ease; }
.vfacade:hover img { opacity: 1; transform: scale(1.01); }
.vplay { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(6px); transition: transform 160ms ease, background 160ms ease; }
.vplay::after { content: ""; position: absolute; left: 33px; top: 26px; border-style: solid; border-width: 16px 0 16px 26px; border-color: transparent transparent transparent #fff; }
.vfacade:hover .vplay, .vfacade:focus-visible .vplay { transform: scale(1.06); background: var(--accent); }
.vat { position: absolute; left: 14px; bottom: 14px; background: rgba(0, 0, 0, 0.75); color: #fff; padding: 4px 10px; border-radius: 980px; font-size: 13px; }
.vplayer.is-soon { background: var(--band); }
.vplayer.is-soon > img { filter: blur(3px) brightness(0.42); transform: scale(1.05); }
.vsoon { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 20px; color: #fff; }
.vsoon h2 { color: #fff; font-size: clamp(20px, 3vw, 32px); }
.vsoon p { margin: 0; max-width: 44ch; color: rgba(255, 255, 255, 0.86); }
.vsegbar { position: relative; display: flex; gap: 2px; height: 10px; margin-top: 12px; }
.vseg { flex: var(--w) 1 0; min-width: 3px; border: 0; padding: 0; background: var(--rule-2); border-radius: 3px; cursor: pointer; transition: background 140ms ease, transform 140ms ease; }
.vseg:hover, .vseg:focus-visible { background: var(--accent); transform: scaleY(1.5); }
.vseg-now { position: absolute; top: -3px; bottom: -3px; width: 2px; left: var(--p); background: var(--live); pointer-events: none; border-radius: 2px; }
.vw-head { display: grid; gap: 10px; margin-top: 20px; }
.vw-head h1 { font-size: clamp(25px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.voriginal { margin: 0; color: var(--ink-3); font-style: italic; }
.vcard-en { display: block; font-size: .8em; line-height: 1.3; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vw-q { margin: 0; font-size: 17px; color: var(--ink-2); }
.vw-q .vfg-lab { display: inline; margin-right: 6px; }
.vw-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vw-answer { border-left: 3px solid var(--accent); padding: 4px 0 4px 14px; }
.vw-answer .vfg-lab { font-size: 12px; margin: 0 0 4px; }
.vw-answer p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink); max-width: 72ch; }
.vsources { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.vsources a { color: var(--link); }
.vw-about { display: grid; gap: 14px; margin-top: 22px; }
.vw-short { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 70ch; }
.vpanel { background: var(--alt); border-radius: var(--radius-sm); padding: 16px 18px; }
.vpanel p { margin: 0; }
.vpanel.is-produces { background: var(--good-soft); }
.vlearn { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-2); }
.vcases { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.vcases a { color: var(--link); }
.vwatch-side { position: sticky; top: 70px; display: grid; gap: 18px; min-width: 0; }
.vtabs { display: flex; gap: 4px; background: var(--alt); padding: 4px; border-radius: 12px; }
.vtabs button { flex: 1; border: 0; background: transparent; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.vtabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.vtabs .mono { color: var(--ink-3); font-weight: 500; }
.vchapters, .vtr { list-style: none; margin: 0; padding: 0; max-height: min(58vh, 540px); overflow: auto; scrollbar-width: thin; display: grid; align-content: start; gap: 1px; position: relative; }
.vchapters button, .vtr button { width: 100%; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; text-align: left; border: 0; background: transparent; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.vchapters button:hover, .vtr button:hover { background: var(--alt); color: var(--ink); }
.vchapters .mono, .vtr .mono { color: var(--accent); font-weight: 600; padding-top: 1px; }
.vchapters button.is-now, .vtr li.is-now button { background: var(--core-soft); color: var(--ink); }
.vtr li.is-dim button { opacity: 0.45; }
.vtr li.is-hit button { background: color-mix(in oklab, #ffd60a 16%, transparent); opacity: 1; }
.vtr-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 6px; }
.vtr-tools input[type="search"] { flex: 1; min-width: 140px; border: 1px solid var(--rule-2); border-radius: 10px; padding: 7px 10px; font-size: 14px; background: #fff; }
.vfollow { font-size: 13px; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; }
.vtr-count { font-size: 12px; color: var(--ink-3); margin: 0 0 4px; min-height: 1em; }
.vtabpanel { margin-top: 8px; }
.vside-block h2, .vside-block h3 { font-size: 16px; margin-bottom: 10px; }
.vnext { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vnext .vcard { grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 12px; }
.vnext .vtitle { font-size: 14px; }

/* playlist */
.vplaylist { padding-block: 24px 64px; }
.vpl-head { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; align-items: center; margin: 18px 0 30px; }
.vpl-head h1 { font-size: clamp(28px, 4vw, 46px); font-weight: 700; letter-spacing: -0.034em; margin-top: 6px; }
.vpl-head > div:last-child { display: grid; gap: 10px; justify-items: start; }
.vpl-head .mono { color: var(--ink-3); margin: 0; }
.vpl-cover { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift); background: var(--sunk); }
.vpl-prog { width: 100%; max-width: 360px; height: 6px; border-radius: 6px; background: var(--sunk); overflow: hidden; }
.vpl-prog span { display: block; height: 100%; width: var(--p); background: var(--good); }

.lang-switch a[hreflang] { min-width: 30px; text-align: center; }
.nav a { white-space: nowrap; }
@media (max-width: 1280px) { .nav a { padding-inline: 9px; font-size: 13.5px; } .topbar-row { gap: 14px; } }

@media (max-width: 1100px) {
  .vstages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vrail { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
}
@media (max-width: 960px) {
  /* one column, in page order: player and title, chapters, description */
  .vwatch-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 24px; }
  .vwatch-grid > .vwatch-main, .vwatch-grid > .vwatch-side, .vwatch-grid > .vw-about { grid-column: auto; grid-row: auto; }
  .vwatch-side { position: static; }
  .vwatch-grid > .vw-about { margin-top: 0; }
  .vsp-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .vfacets { position: static; max-height: none; display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
  .vfg { min-width: 200px; }
  .vfacets > .vnote { display: none; }
  .vpl-head { grid-template-columns: minmax(0, 1fr); }
  .vrail { grid-auto-columns: calc((100% - 18px) / 2); }
}
@media (max-width: 600px) {
  .vhero { padding-block: 40px 30px; }
  .vsearch.is-big input { font-size: 16px; padding-block: 14px; }
  .vkbd { display: none; }
  .vstats { gap: 10px 26px; }
  .vstats dd { font-size: 24px; }
  .vrail { grid-auto-columns: 78%; }
  .vrail-btns { display: none; }
  .vstages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vres { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vpath-list a, .vpl-list a { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
  .vp-n { display: none; }
  .vp-title { font-size: 15px; }
  .vnext .vcard { grid-template-columns: 120px minmax(0, 1fr); }
  .vmoments a { grid-template-columns: 40px minmax(0, 1fr); }
  .vm-k { display: none; }
  .vfacets { flex-direction: column; overflow: visible; }
  .vfg { min-width: 0; }
  .vfg-items { display: flex; flex-wrap: wrap; gap: 4px; }
  .vfacet { background: var(--alt); }
}

/* phones and tablets: results first, filters behind a button; opened, they wrap instead of scrolling sideways */
.vfilt-btn { display: none; }
@media (max-width: 960px) {
  .vfilt-btn { display: inline-flex; justify-self: start; }
  .vfacets:not(.is-open) { display: none; }
  .vfacets.is-open { flex-wrap: wrap; overflow: visible; row-gap: 18px; }
}

/* single-column grids: an implicit "auto" column cannot shrink below its longest line, which pushed text
   past the edge on 320px phones. minmax(0, 1fr) lets it wrap instead. */
.vcard, .vres-body, .vwatch-side, .vcoming, .vhow-step, .st-card, .st-card .vmeta, .vpanel { grid-template-columns: minmax(0, 1fr); }
/* long compound words (Leistungsverzeichnis, Abschlagsrechnung) may break rather than push past a narrow column */
.vp-title, .vp-q, .vp-kick, .vtitle, .vq, .vres-body h3, .st-card .vtitle, h1, h2 { overflow-wrap: anywhere; hyphens: auto; }