/* VideoVault collection page (single-vvault_story; Bart's board 2026-10-31): hero, viewing path, about, keep exploring.
 * Structure only: colours and fonts come from the theme's tokens (base.css). Every part is a .vvault-module
 * size container, and the layout inside it uses @container vv, never the window (R33). */

/* One rhythm: 40px between the page's parts, each after the hero opening on a hairline. */
.vvault-front .vvault-coll{display:flex;flex-direction:column;gap:calc(var(--vv-s6) + var(--vv-s2));padding-block:var(--vv-s6) calc(var(--vv-s6) + var(--vv-s2))}
.vvault-front .vvault-coll>.vvault-section.vvault-module{margin:0;padding:0;border:0;border-radius:0;background:transparent}
.vvault-front .vvault-coll>.vvault-section.vvault-module:not(.vvault-coll-hero){padding-top:var(--vv-s6);border-top:1px solid var(--vv-line)}

/* Shared parts. */
.vvault-front .vvault-coll__kicker{margin:0;font-family:var(--vv-font-ui);font-size:.875rem;font-weight:600;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--vv-strong)}
.vvault-front .vvault-coll .vvault-module>.vvault-coll__h2,.vvault-front .vvault-coll__h2{margin:0;padding:0;border:0;font-family:var(--vv-font-display);font-size:clamp(1.75rem,1.3rem + 1.6cqi,2.375rem);font-weight:var(--vv-title-weight,700);line-height:1.1;letter-spacing:-.01em}
.vvault-front .vvault-coll__link{display:inline-flex;align-items:center;gap:var(--vv-s2);font-family:var(--vv-font-ui);font-size:1rem;font-weight:500;color:var(--vv-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.vvault-front .vvault-coll__link:is(:hover,:focus-visible){text-decoration-thickness:2px}
.vvault-front .vvault-coll__link:focus-visible{outline:3px solid var(--vv-ring,var(--vv-ink));outline-offset:2px}
.vvault-front .vvault-coll .vvault-btn{gap:var(--vv-s2);min-height:var(--vv-control-h,2.75rem);padding:var(--vv-s2) var(--vv-s5);border-width:1px;border-radius:var(--vv-radius-sm,4px);font-family:var(--vv-font-ui);font-size:1rem;font-weight:500;line-height:1.2;white-space:nowrap}
.vvault-front .vvault-coll .vvault-coll__start{--vv-btn-bg:var(--vv-strong);--vv-btn-fg:var(--vv-on-strong);--vv-btn-line:var(--vv-strong);--vv-ring:var(--vv-strong);min-height:2.875rem;padding-inline:var(--vv-s5) var(--vv-s4)}
.vvault-front .vvault-coll :is(.vvault-coll__play,.vvault-coll__topic){--vv-btn-bg:transparent;--vv-btn-fg:var(--vv-ink);--vv-btn-line:var(--vv-ink);--vv-btn-bg-hover:color-mix(in srgb,var(--vv-ink) 8%,var(--vv-paper));--vv-btn-bg-active:color-mix(in srgb,var(--vv-ink) 15%,var(--vv-paper))}

/* Hero: text left, the first video's player right; below 760px one column with the player under the introduction. */
.vvault-front .vvault-coll-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vv-s4)}
.vvault-front .vvault-coll-hero__title{margin:0;padding:0;font-family:var(--vv-font-display);font-size:clamp(2.25rem,1.4rem + 3.4cqi,3.5rem);font-weight:var(--vv-title-weight,700);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.vvault-front .vvault-coll-hero__intro{margin:0;max-width:var(--vv-measure,57ch);font-size:1.1875rem;line-height:1.5}
.vvault-front .vvault-coll-hero__meta{display:flex;flex-wrap:wrap;align-items:center;margin:0;font-family:var(--vv-font-ui);font-size:1rem;color:var(--vv-muted)}
.vvault-front .vvault-coll-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--vv-s3) var(--vv-s5);margin:0}
.vvault-front .vvault-coll-hero__note{margin:0;max-width:var(--vv-measure,57ch);font-size:.9375rem;line-height:1.5;color:var(--vv-muted)}
.vvault-front .vvault-coll-hero__player{min-width:0}
.vvault-front .vvault-coll-hero__embed{border-radius:var(--vv-radius-sm,4px)}
.vvault-front .vvault-coll-hero__embed .vvault-plate{position:absolute;inset:0}
.vvault-front .vvault-coll-hero__pnote{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--vv-s1) var(--vv-s4);margin:var(--vv-s2) 0 0}
.vvault-front .vvault-coll-hero__pnote .vvault-credit{margin:0;color:inherit;text-shadow:none} /* The note is already muted: muting again would compound (--vv-muted mixes currentColor). */
.vvault-front .vvault-coll-hero__pnote .vvault-credit a{color:inherit}
@container vv (min-width:760px){
	.vvault-front .vvault-coll-hero--player .vvault-coll-hero__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:repeat(5,auto) 1fr;column-gap:calc(var(--vv-s6) + var(--vv-s2));row-gap:0}
	.vvault-front .vvault-coll-hero--player .vvault-coll-hero__grid>*{grid-column:1}
	.vvault-front .vvault-coll-hero--player .vvault-coll-hero__grid>.vvault-coll-hero__player{grid-column:2;grid-row:1/-1;align-self:start}
	.vvault-front .vvault-coll-hero--player .vvault-coll-hero__title{margin:var(--vv-s4) 0 var(--vv-s5)}
	.vvault-front .vvault-coll-hero--player .vvault-coll-hero__intro{margin-bottom:var(--vv-s4);font-size:1.25rem}
	.vvault-front .vvault-coll-hero--player .vvault-coll-hero__meta{margin-bottom:var(--vv-s5)}
	.vvault-front .vvault-coll-hero--player .vvault-coll-hero__note{margin-top:var(--vv-s5)}
}

/* The viewing path. */
.vvault-front .vvault-coll__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--vv-s2) var(--vv-s5);margin-bottom:var(--vv-s5)}
.vvault-front .vvault-coll__dek{margin:var(--vv-s1) 0 0;font-family:var(--vv-font-ui);font-size:1.0625rem;color:var(--vv-muted)}
.vvault-front .vvault-coll__count{margin:0;font-family:var(--vv-font-ui);font-size:1rem;color:var(--vv-muted)}
.vvault-front .vvault-coll-path__list{margin:0;padding:0;list-style:none}
.vvault-front .vvault-coll-row{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"media media" "n body" "acts acts";gap:var(--vv-s3) var(--vv-s4);margin:0;padding:var(--vv-s5) 0;border-top:1px solid var(--vv-line)}
.vvault-front .vvault-coll-row:first-child{padding-top:0;border-top:0}
.vvault-front .vvault-coll-row__n{grid-area:n;font-family:var(--vv-font-display);font-size:2.25rem;font-weight:var(--vv-title-weight,700);line-height:1;letter-spacing:-.02em;color:var(--vv-strong);font-variant-numeric:lining-nums}
.vvault-front .vvault-coll-row__media{grid-area:media;display:block;min-width:0}
.vvault-front .vvault-coll-row__media .vvault-frame{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--vv-radius-sm,4px);background:var(--vv-soft)}
.vvault-front .vvault-coll-row__media .vvault-frame>img,.vvault-front .vvault-coll-row__media .vvault-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vvault-front .vvault-coll-row__body{grid-area:body;min-width:0}
.vvault-front .vvault-coll-row__kicker{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:var(--vv-s1)}
.vvault-front .vvault-coll-row__title{margin:0;padding:0;font-family:var(--vv-font-display);font-size:clamp(1.25rem,1.05rem + .8cqi,1.5rem);font-weight:var(--vv-title-weight,700);line-height:1.2;letter-spacing:-.005em}
.vvault-front .vvault-coll-row__title a{color:inherit;text-decoration:none}
.vvault-front .vvault-coll-row__title a:is(:hover,:focus-visible){text-decoration:underline;text-underline-offset:.15em}
.vvault-front .vvault-coll-row__meta{display:flex;flex-wrap:wrap;align-items:center;margin:var(--vv-s1) 0 0;font-family:var(--vv-font-ui);font-size:1rem;color:var(--vv-muted)}
.vvault-front .vvault-coll-row__note{margin:var(--vv-s2) 0 0;max-width:var(--vv-measure,57ch);font-size:1rem;line-height:1.5}
.vvault-front .vvault-coll-row__why{margin-top:var(--vv-s3)}
.vvault-front .vvault-coll-row__why>.vvault-coll__kicker{font-size:.875rem;letter-spacing:.1em}
.vvault-front .vvault-coll-row__why>p:last-child{margin:var(--vv-s1) 0 0;max-width:var(--vv-measure,57ch);font-family:var(--vv-font-ui);font-size:1rem;line-height:1.5}
.vvault-front .vvault-coll-row__actions{grid-area:acts;display:flex;flex-wrap:wrap;align-items:center;gap:var(--vv-s3) var(--vv-s5);margin:0}
.vvault-front .vvault-coll .vvault-coll__play{min-width:8.5rem;font-size:1.0625rem}
.vvault-front .vvault-coll-row[aria-current] .vvault-coll-row__n{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.2em}
@container vv (min-width:560px){
	.vvault-front .vvault-coll-row{grid-template-columns:minmax(0,3.5rem) minmax(0,13rem) minmax(0,1fr);grid-template-areas:"n media body" "n media acts";grid-template-rows:auto 1fr;column-gap:var(--vv-s5);row-gap:var(--vv-s3)}
	.vvault-front .vvault-coll-row__n{font-size:2.75rem}
	.vvault-front .vvault-coll-row__media{align-self:start}
}
@container vv (min-width:900px){
	.vvault-front .vvault-coll-row{grid-template-columns:minmax(0,4.5rem) minmax(0,16rem) minmax(0,1fr) auto;grid-template-areas:"n media body acts";grid-template-rows:auto;column-gap:var(--vv-s6)}
	.vvault-front .vvault-coll-row__n{font-size:3rem}
	.vvault-front .vvault-coll-row__actions{flex-direction:column;align-items:stretch;gap:var(--vv-s4);text-align:center}
	.vvault-front .vvault-coll-row__actions .vvault-coll__link{justify-content:center}
}

/* The rest of the owner's introduction. */
.vvault-front .vvault-coll-about__text{margin-top:var(--vv-s4);max-width:var(--vv-measure,57ch)}
.vvault-front .vvault-coll-about__text>:first-child{margin-top:0}
.vvault-front .vvault-coll-about__text>:last-child{margin-bottom:0}

/* Keep exploring: heading, a quiet divider, then the topic buttons; they wrap under the heading when narrow. */
.vvault-front .vvault-coll-explore{display:flex;flex-wrap:wrap;align-items:center;gap:var(--vv-s4) var(--vv-s5)}
.vvault-front .vvault-coll-explore__dek{margin:0;font-family:var(--vv-font-ui);font-size:1.0625rem;color:var(--vv-muted)}
.vvault-front .vvault-coll-explore__list{display:flex;flex-wrap:wrap;gap:var(--vv-s3);margin:0;padding:0;list-style:none}
.vvault-front .vvault-coll-explore__list>li{margin:0}
@container vv (min-width:760px){
	.vvault-front .vvault-coll-explore__dek{padding-left:var(--vv-s5);border-left:1px solid var(--vv-line)}
}
@container vv (max-width:559.98px){
	.vvault-front .vvault-coll-explore__dek{flex-basis:100%}
	.vvault-front .vvault-coll .vvault-btn{white-space:normal}
}

/* The collections list (/collections/): heading, a split lead, then hairline rows. Same page width,
 * rhythm and vocabulary as the collection page above. */
.vvault-front .vvault-coll-hub>.vvault-section.vvault-module{margin:0}
.vvault-front .vvault-hub-head__title{margin:0;padding:0;font-family:var(--vv-font-display);font-size:clamp(2.25rem,1.4rem + 3.4cqi,3.5rem);font-weight:var(--vv-title-weight,700);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.vvault-front .vvault-hub-head__dek{margin:var(--vv-s3) 0 0;max-width:var(--vv-measure,57ch);font-size:1.1875rem;line-height:1.5;color:var(--vv-muted)}
.vvault-front .vvault-hub-lead__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vv-s5)}
.vvault-front .vvault-hub-lead__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--vv-s4);min-width:0}
.vvault-front .vvault-hub-lead__text>*{margin:0}
.vvault-front .vvault-hub-lead__title{margin:0;padding:0;font-family:var(--vv-font-display);font-size:clamp(1.875rem,1.3rem + 2.4cqi,2.75rem);font-weight:var(--vv-title-weight,700);line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
.vvault-front .vvault-hub-lead__title a,.vvault-front .vvault-hub-row__title a{color:inherit;text-decoration:none}
.vvault-front .vvault-hub-lead__title a:is(:hover,:focus-visible),.vvault-front .vvault-hub-row__title a:is(:hover,:focus-visible){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
.vvault-front .vvault-hub-lead__intro{max-width:var(--vv-measure,57ch);font-size:1.1875rem;line-height:1.55;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
.vvault-front .vvault-hub-lead__media,.vvault-front .vvault-hub-row__media{display:block;min-width:0}
.vvault-front .vvault-hub-lead__media .vvault-frame,.vvault-front .vvault-hub-row__media .vvault-frame{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--vv-radius-sm,4px);background:var(--vv-soft)}
.vvault-front .vvault-hub-lead__media .vvault-frame>img,.vvault-front .vvault-hub-row__media .vvault-frame>img,.vvault-front .vvault-hub-lead__media .vvault-plate,.vvault-front .vvault-hub-row__media .vvault-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vvault-front .vvault-hub-list__rows{margin:0;padding:0;list-style:none}
.vvault-front .vvault-hub-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vv-s3);margin:0;padding:var(--vv-s5) 0;border-top:1px solid var(--vv-line)}
.vvault-front .vvault-hub-row:first-child{padding-top:0;border-top:0}
.vvault-front .vvault-hub-row__body{min-width:0}
.vvault-front .vvault-hub-row__title{margin:0;padding:0;font-family:var(--vv-font-display);font-size:clamp(1.25rem,1.05rem + .8cqi,1.5rem);font-weight:var(--vv-title-weight,700);line-height:1.2;letter-spacing:-.005em}
.vvault-front .vvault-hub-row__intro{margin:var(--vv-s2) 0 0;max-width:var(--vv-measure,57ch);font-size:1.0625rem;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.vvault-front .vvault-hub-row__actions{margin:0}
@container vv (min-width:760px){
	.vvault-front .vvault-hub-lead__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;column-gap:calc(var(--vv-s6) + var(--vv-s2))}
	.vvault-front .vvault-hub-lead__media{grid-column:2;grid-row:1}
	.vvault-front .vvault-hub-lead__text{grid-column:1;grid-row:1}
}
@container vv (min-width:560px){
	.vvault-front .vvault-hub-row{grid-template-columns:minmax(0,16rem) minmax(0,1fr);align-items:start;column-gap:var(--vv-s5)}
	.vvault-front .vvault-hub-row__actions{grid-column:2}
}
@container vv (min-width:900px){
	.vvault-front .vvault-hub-row{grid-template-columns:minmax(0,16rem) minmax(0,1fr) auto;column-gap:var(--vv-s6);align-items:center}
	.vvault-front .vvault-hub-row__actions{grid-column:auto}
}