/* Hallmark · macrostructure: Editorial Mosaic · tone: editorial-coastal · anchor hue: teal · theme: WaveHaven (existing tokens) */

.vg{
  --vg-ink:var(--wh-sea-900);
  --vg-paper:var(--wh-sand);
  --vg-paper-2:var(--wh-sand-2);
  --vg-accent:var(--wh-teal);
  --vg-accent-dark:var(--wh-teal-dark);
  --vg-muted:var(--wh-ink-soft-2);
  --vg-line:rgba(11,31,42,.2);
  --vg-shade:rgba(11,31,42,.82);
  --vg-gap:clamp(10px,1.2vw,16px);
  --vg-row:clamp(96px,10.5vw,168px);
  --vg-radius:3px;
  background:var(--vg-paper);
  color:var(--vg-ink);
  padding:clamp(150px,18vw,230px) var(--wh-edge) clamp(88px,10vw,150px);
}
.vg-inner{width:100%}

.vg-head{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2vw,26px);margin-bottom:clamp(40px,5vw,72px)}
.vg-eyebrow{color:var(--vg-accent-dark)}
.vg-title{font-size:clamp(52px,9vw,148px);line-height:.95;max-width:14ch;overflow-wrap:anywhere;min-width:0;font-style:normal}
.vg-title .wh-script{color:var(--vg-accent);font-size:.8em;line-height:0;font-style:normal}
.vg-sub{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--vg-line)}
.vg-intro{margin:0;max-width:48ch;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--wh-ink-soft-1)}
.vg-count{margin:0;font-family:Forum,serif;font-size:clamp(22px,2vw,28px);color:var(--vg-muted);white-space:nowrap}
.vg-count [data-vg-count]{color:var(--vg-ink)}

.vg-chips{display:flex;flex-wrap:wrap;gap:8px}
.vg-chip{appearance:none;border:1px solid var(--vg-ink);background:transparent;color:var(--vg-ink);border-radius:999px;padding:9px 18px;font:500 12px/1 "Libre Caslon Text",serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .25s var(--wh-ease),color .25s var(--wh-ease)}
.vg-chip:hover{background:var(--vg-paper-2)}
.vg-chip:active{transform:translateY(1px)}
.vg-chip[aria-pressed="true"]{background:var(--vg-ink);color:var(--vg-paper)}
.vg-chip:focus-visible{outline:2px solid var(--vg-accent);outline-offset:3px}

.vg-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:var(--vg-row);grid-auto-flow:dense;gap:var(--vg-gap)}
.vg-tile--large{grid-column:span 4;grid-row:span 3}
.vg-tile--tall{grid-column:span 2;grid-row:span 3}
.vg-tile--small{grid-column:span 2;grid-row:span 2}
.vg-tile--wide{grid-column:span 3;grid-row:span 2}
.vg-tile--full{grid-column:1 / -1;grid-row:span 3}

.vg-tile{appearance:none;border:0;padding:0;margin:0;font:inherit;text-align:left;position:relative;display:block;overflow:hidden;border-radius:var(--vg-radius);background:var(--wh-ink-soft-1);color:var(--wh-white);cursor:pointer;container-type:size;isolation:isolate;transition:opacity .45s var(--wh-ease),transform .45s var(--wh-ease)}
.vg-tile.is-out{opacity:0;transform:scale(.96);pointer-events:none}
.vg-tile.is-gone{display:none}
.vg-media{position:absolute;inset:0;overflow:hidden}
.vg-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--wh-ease),filter .6s var(--wh-ease)}
.vg-preview{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--wh-ease);pointer-events:none}
.vg-preview iframe{position:absolute;top:50%;left:50%;width:max(100cqw,177.78cqh);height:max(56.25cqw,100cqh);transform:translate(-50%,-50%) scale(1.2);border:0;pointer-events:none}
.vg-tile.is-previewing .vg-preview{opacity:1}
.vg-shade{position:absolute;inset:0;background:linear-gradient(0deg,var(--vg-shade) 0%,rgba(11,31,42,0) 55%);transition:opacity .5s var(--wh-ease)}
.vg-cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,1.8vw,24px);display:flex;flex-direction:column;gap:8px;transition:transform .6s var(--wh-ease)}
.vg-meta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--wh-teal-pale)}
.vg-name{font-family:Forum,serif;font-size:clamp(20px,2vw,30px);line-height:1.05;max-width:22ch;overflow-wrap:anywhere}
.vg-tile--large .vg-name{font-size:clamp(28px,3.4vw,52px)}
.vg-live{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:var(--vg-paper);color:var(--vg-ink);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:0;transform:translateY(-6px);transition:opacity .35s var(--wh-ease),transform .35s var(--wh-ease)}
.vg-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vg-accent)}
.vg-play{position:absolute;top:50%;left:50%;z-index:2;width:clamp(52px,5vw,72px);height:clamp(52px,5vw,72px);margin:calc(clamp(52px,5vw,72px) / -2) 0 0 calc(clamp(52px,5vw,72px) / -2);border-radius:50%;display:grid;place-items:center;background:rgba(246,241,231,.92);color:var(--vg-ink);transform:scale(.6);opacity:0;transition:transform .45s var(--wh-ease),opacity .3s var(--wh-ease)}
.vg-play svg{width:34%;height:34%;margin-left:8%}

@media (hover:hover) and (pointer:fine){
  .vg-tile:hover .vg-media img{transform:scale(1.08)}
  .vg-tile:hover .vg-cap{transform:translateY(-4px)}
  .vg-tile.is-previewing .vg-live{opacity:1;transform:none}
  .vg.has-cursor .vg-tile{cursor:none}
}
@media (hover:none),(pointer:coarse){
  .vg-play{opacity:1;transform:scale(.8)}
}
.vg-tile:focus-visible{outline:2px solid var(--vg-accent);outline-offset:3px}
.vg-tile:focus-visible .vg-play{opacity:1;transform:none}
.vg-tile:active .vg-media img{transform:scale(1.04)}

.vg-tile.is-hidden-in{opacity:0;transform:translateY(24px)}

.vg-empty{margin:40px 0 0;font-size:18px;color:var(--vg-muted)}
.vg-grid[hidden],.vg-shorts[hidden]{display:none}

/* Shorts: vertical row */
.vg-shorts{margin-top:clamp(56px,7vw,110px)}
.vg-grid[hidden] + .vg-shorts{margin-top:0}
.vg-shorts-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:clamp(16px,2vw,24px);margin-bottom:clamp(18px,2vw,28px);border-bottom:1px solid var(--vg-line)}
.vg-shorts-head h2{font-size:clamp(32px,4vw,56px);min-width:0;overflow-wrap:anywhere}
.vg-shorts-head h2 .wh-script{color:var(--vg-accent);line-height:0}
.vg-shorts-hint{display:none;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--vg-muted);white-space:nowrap}
.vg-shorts-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(170px,17vw,240px)),1fr));gap:var(--vg-gap)}
.vg-tile--short{aspect-ratio:9/16;height:auto}
.vg-tile--short .vg-name{font-size:clamp(18px,1.5vw,24px)}
.vg-tile--short .vg-preview iframe{width:auto;aspect-ratio:16/9;height:max(100cqh,177.78cqw)}
.vg-tile--crop .vg-media img{inset:auto;top:50%;left:50%;width:auto;max-width:none;height:max(100cqh,177.78cqw);object-fit:fill;transform:translate(-50%,-50%) scale(1.02)}
@media (hover:hover) and (pointer:fine){
  .vg-tile--crop:hover .vg-media img{transform:translate(-50%,-50%) scale(1.08)}
}
.vg-tile--crop:active .vg-media img{transform:translate(-50%,-50%) scale(1.04)}
@media (max-width:600px){
  .vg-shorts-hint{display:inline}
  .vg-shorts-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:46vw;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--wh-gutter) * -1);padding:0 var(--wh-gutter);scroll-padding:0 var(--wh-gutter);scrollbar-width:none}
  .vg-shorts-row::-webkit-scrollbar{display:none}
  .vg-shorts-row .vg-tile{scroll-snap-align:start}
}

.vg-cursor{position:fixed;left:0;top:0;z-index:60;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;display:grid;place-items:center;background:var(--wh-sand);color:var(--wh-sea-900);font:500 11px/1 "Libre Caslon Text",serif;letter-spacing:.18em;text-transform:uppercase;pointer-events:none;opacity:0;transform:translate3d(-200px,-200px,0) scale(.4);transition:opacity .25s var(--wh-ease);will-change:transform}
.vg-cursor.is-on{opacity:1}

/* Closing band */
.vg-cta{background:var(--wh-sea-900);color:var(--wh-sand);padding:clamp(96px,12vw,176px) var(--wh-edge)}
.vg-cta-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2vw,28px);justify-items:start}
.vg-cta h2{font-size:clamp(40px,6vw,96px);max-width:16ch;overflow-wrap:anywhere;min-width:0}
.vg-cta h2 .wh-script{color:var(--wh-teal-pale);font-size:.85em;line-height:0}
.vg-cta p{margin:0;max-width:46ch;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:rgba(246,241,231,.72)}
.vg-cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.vg-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;white-space:nowrap;text-decoration:none;transition:background .3s var(--wh-ease),color .3s var(--wh-ease),border-color .3s var(--wh-ease)}
.vg-btn svg{width:18px;height:18px}
.vg-btn--solid{background:var(--wh-sand);color:var(--wh-sea-900);border:1px solid var(--wh-sand)}
.vg-btn--solid:hover{background:var(--wh-teal-pale);border-color:var(--wh-teal-pale)}
.vg-btn--line{color:var(--wh-sand);border:1px solid rgba(246,241,231,.4)}
.vg-btn--line:hover{border-color:var(--wh-sand);background:rgba(246,241,231,.08)}
.vg-btn:active{transform:translateY(1px)}
.vg-btn:focus-visible{outline:2px solid var(--wh-teal-pale);outline-offset:3px}

/* Theatre */
.vg-theatre{position:fixed;inset:0;z-index:200;background:rgba(6,18,25,.97);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(12px,2vh,24px);padding:clamp(14px,3vw,36px);color:var(--wh-sand);opacity:0;transition:opacity .35s var(--wh-ease)}
.vg-theatre[hidden]{display:none}
.vg-theatre.is-open{opacity:1}
.vg-theatre-top,.vg-theatre-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1280px;width:100%;margin:0 auto}
.vg-theatre-count{font-family:Forum,serif;font-size:22px;color:rgba(246,241,231,.6)}
.vg-screen{position:relative;align-self:center;justify-self:center;width:min(100%,1280px,calc((100svh - 190px) * 16 / 9));aspect-ratio:16/9;background:#000;border-radius:var(--vg-radius);overflow:hidden;transform:scale(.96);transition:transform .5s var(--wh-ease)}
.vg-theatre.is-open .vg-screen{transform:none}
.vg-screen.is-vertical{aspect-ratio:9/16;width:min(100%,420px,calc((100svh - 190px) * 9 / 16))}
.vg-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vg-theatre-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.vg-theatre-title{font-family:Forum,serif;font-size:clamp(22px,2.4vw,34px);line-height:1.1;overflow-wrap:anywhere}
.vg-theatre-nav{display:flex;gap:8px;flex-shrink:0}
.vg-tbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:46px;height:46px;padding:0 16px;border-radius:999px;border:1px solid rgba(246,241,231,.35);background:transparent;color:var(--wh-sand);font:500 12px/1 "Libre Caslon Text",serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background .25s var(--wh-ease),border-color .25s var(--wh-ease)}
.vg-tbtn:hover{background:rgba(246,241,231,.1);border-color:var(--wh-sand)}
.vg-tbtn:active{transform:translateY(1px)}
.vg-tbtn:focus-visible{outline:2px solid var(--wh-teal-pale);outline-offset:2px}
html.vg-lock,html.vg-lock body{overflow:hidden}

@media (max-width:900px){
  .vg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vg-tile--large{grid-column:span 4;grid-row:span 3}
  .vg-tile--tall{grid-column:span 2;grid-row:span 3}
  .vg-tile--small{grid-column:span 2;grid-row:span 2}
  .vg-tile--wide{grid-column:span 4;grid-row:span 2}
}
@media (max-width:600px){
  .vg{--vg-row:clamp(110px,30vw,150px)}
  .vg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vg-tile--large{grid-column:span 2;grid-row:span 2}
  .vg-tile--tall{grid-column:span 1;grid-row:span 2}
  .vg-tile--small{grid-column:span 1;grid-row:span 1}
  .vg-tile--wide{grid-column:span 2;grid-row:span 2}
  .vg-tile--full{grid-row:span 2}
  .vg-tile--small .vg-name{font-size:17px}
  .vg-tile--small .vg-meta{display:none}
  .vg-theatre-bar{flex-direction:column;align-items:stretch}
  .vg-theatre-nav{justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  .vg-tile,.vg-media img,.vg-cap,.vg-play,.vg-live,.vg-preview,.vg-theatre,.vg-screen{transition-duration:.12s!important}
  .vg-tile:hover .vg-media img{transform:scale(1.02)}
  .vg-tile.is-hidden-in{transform:none}
}