/* VIP Pro Lab & Video — brand colors from the VIP logo (indigo + periwinkle) */

@font-face{font-family:'Melodrama';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/Melodrama-300.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Montserrat-400.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Montserrat-500.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Montserrat-600.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/Newsreader-400i.woff2') format('woff2');}
@font-face{font-family:'Mrs Saint Delafield';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/MrsSaintDelafield-400.woff2') format('woff2');}

:root{
  --paper:#F7F7FA;
  --white:#FFFFFF;
  --ink:#16162C;
  --muted:#70708A;
  --indigo:#3434A6;
  --indigo-deep:#28288C;
  --peri:#9494EC;
  --peri-soft:#EDEDFB;
  --hair:#E3E3EE;
  --disp:'Melodrama','Georgia',serif;
  --ital:'Newsreader','Georgia',serif;
  --sans:'Montserrat','Helvetica Neue',sans-serif;
  --script:'Mrs Saint Delafield',cursive;
  --max:1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15.5px; line-height:1.85;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--indigo); color:#fff;}
img{max-width:100%; display:block;}
a{color:inherit;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
:focus-visible{outline:2px solid var(--indigo); outline-offset:3px;}

h1,h2,h3{font-family:var(--disp); font-weight:300; line-height:1.12; text-wrap:balance;}
h1 em,h2 em,h3 em{font-family:var(--ital); font-style:italic; font-weight:400;}

.label{font-family:var(--sans); font-weight:600; font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--indigo);}
.script{font-family:var(--script); font-size:2.4rem; line-height:1; color:var(--indigo); display:inline-block; transform:rotate(-2deg);}
.muted{color:var(--muted);}
.center{text-align:center;}
.measure{max-width:44rem; margin-left:auto; margin-right:auto;}

.btn{
  display:inline-block; font-family:var(--sans); font-weight:600; font-size:.68rem;
  letter-spacing:.28em; text-transform:uppercase; text-decoration:none; text-align:center;
  padding:1.02rem 2.2rem; transition:background .25s, color .25s, border-color .25s;
}
.btn-solid{background:var(--indigo); color:#fff;}
.btn-solid:hover{background:var(--indigo-deep);}
.btn-line{border:1px solid var(--ink); color:var(--ink);}
.btn-line:hover{border-color:var(--indigo); color:var(--indigo);}
.btn-line.on-dark{border-color:rgba(255,255,255,.75); color:#fff;}
.btn-line.on-dark:hover{border-color:#fff; background:rgba(255,255,255,.12);}

/* ===== header ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; gap:2rem;
  padding:.9rem clamp(1.2rem,4vw,2.6rem);
  background:rgba(247,247,250,.96); color:var(--ink);
  box-shadow:0 1px 0 var(--hair);
  transition:background .35s, box-shadow .35s, color .35s;
}
.nav.overlay{background:transparent; box-shadow:none; color:#fff;}
.nav-mark{display:flex; align-items:baseline; gap:.55rem; text-decoration:none; margin-right:auto; white-space:nowrap;}
.nav-mark .vip{font-family:var(--disp); font-size:1.7rem; letter-spacing:.03em;}
.nav-mark .rest{font-weight:600; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; opacity:.8;}
.nav-links{display:flex; gap:1.15rem; align-items:center;}
.nav-links a{
  font-weight:600; font-size:.6rem; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; opacity:.85; padding:.3rem 0; border-bottom:1px solid transparent;
}
.nav-links a:hover{opacity:1; border-color:currentColor;}
.nav-links a.active{opacity:1; border-color:var(--indigo); color:var(--indigo);}
.nav.overlay .nav-links a.active{border-color:#fff; color:#fff;}
.nav-book{
  font-weight:600; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--indigo); color:var(--indigo);
  padding:.55rem 1.15rem; white-space:nowrap; transition:background .25s, color .25s;
}
.nav-book:hover{background:var(--indigo); color:#fff;}
.nav.overlay .nav-book{border-color:rgba(255,255,255,.8); color:#fff;}
.nav.overlay .nav-book:hover{background:#fff; color:var(--ink);}
.nav-burger{display:none; flex-direction:column; gap:5px; padding:.5rem;}
.nav-burger span{width:24px; height:2px; background:currentColor; box-shadow:0 1px 4px rgba(12,10,26,.35);}
@media (max-width:1024px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
}
@media (max-width:1024px){
  .nav .nav-book{display:none;} /* Book lives inside the menu on small screens */
}

/* mobile menu */
.mmenu{
  position:fixed; inset:0; z-index:60; background:var(--paper);
  display:none; flex-direction:column; padding:1.2rem 1.6rem;
  height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.mmenu.open{display:flex;}
.mmenu-top{display:flex; align-items:center; justify-content:space-between;}
.mmenu-close{font-size:1.6rem; line-height:1; padding:.4rem .6rem;} /* stays on the right */
.mmenu-links{display:flex; flex-direction:column; gap:.2rem; margin-top:2.5rem;}
.mmenu-links a{
  font-family:var(--disp); font-size:2rem; text-decoration:none; padding:.45rem 0;
  border-bottom:1px solid var(--hair);
}
.mmenu-links a:hover{color:var(--indigo);}
.mmenu-foot{margin-top:auto; display:flex; flex-direction:column; gap:.5rem; padding:1.5rem 0 calc(1.2rem + env(safe-area-inset-bottom));}

/* ===== page hero (subpages) ===== */
.page-hero{padding:9.5rem clamp(1.2rem,4vw,2.6rem) 3.5rem; text-align:center;}
.page-hero h1{font-size:clamp(2.6rem,5.5vw,4.2rem); margin-top:.9rem;}
.page-hero .intro{max-width:42rem; margin:1.6rem auto 0; color:var(--muted);}

/* ===== home hero ===== */
.hero{
  position:relative; min-height:100svh; isolation:isolate; color:#fff;
  display:flex; align-items:flex-end; justify-content:center; text-align:center;
  padding:0 1.5rem;
}
.hero-bg{position:absolute; inset:0; z-index:-2; overflow:hidden;}
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 38%;}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(18,16,34,.42) 0%, rgba(18,16,34,.2) 40%, rgba(18,16,34,.62) 100%);
}
.hero-inner{max-width:54rem; padding-bottom:clamp(4.5rem,11vh,8rem); text-shadow:0 1px 22px rgba(12,10,26,.5);}
.hero .script{color:#fff;}
.hero h1{font-size:clamp(2.1rem,5.6vw,4.6rem); margin:1.1rem 0 2.2rem;}
.hero-actions{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; text-shadow:none;}
.hero .btn-solid{background:#fff; color:var(--ink);}
.hero .btn-solid:hover{background:var(--peri-soft);}

/* ===== sections ===== */
.section{padding:clamp(4.5rem,9vw,7.5rem) clamp(1.2rem,4vw,2.6rem);}
.section.tight{padding-top:clamp(2.5rem,5vw,4rem);}
.section-inner{max-width:var(--max); margin:0 auto;}
.section h2{font-size:clamp(2rem,4.2vw,3.2rem); margin:.9rem 0 1.3rem;}
.band-white{background:var(--white); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}
.band-peri{background:var(--peri-soft); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}

/* home service tiles */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-top:3rem;}
@media (max-width:1020px){ .tiles{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .tiles{grid-template-columns:1fr;} }
.tile{text-decoration:none; display:block;}
.tile-media{overflow:hidden; aspect-ratio:4/3; background:var(--peri-soft); border:1px solid var(--hair);}
.tile-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s ease;}
.tile-media.contain img{object-fit:contain; padding:1.2rem; background:#fff;}
.tile:hover .tile-media img{transform:scale(1.04);}
.tile:hover .tile-media.contain img{transform:none;}
.tile h3{font-size:1.3rem; margin-top:1rem;}
.tile p{color:var(--muted); font-size:.86rem; line-height:1.7; margin-top:.2rem;}
.tile .go{
  display:inline-block; margin-top:.5rem; font-size:.6rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--indigo);
}

/* editorial split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5.5rem); align-items:center;}
.split + .split{margin-top:clamp(4.5rem,9vw,7rem);}
.split .media{overflow:hidden;}
.split .media img{width:100%; height:auto;}
.split.flip .media{order:2;}
@media (max-width:880px){
  .split{grid-template-columns:1fr;}
  .split.flip .media{order:0;}
}
.split h2{margin-top:.9rem;}
.split p{color:var(--muted); max-width:34rem;}
.split p + p{margin-top:1rem;}
.split .btn{margin-top:2rem;}

/* checklist rows */
.spec-list{list-style:none; margin:1.6rem 0 0; display:grid; gap:.55rem;}
.spec-list li{
  font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  display:flex; gap:.9rem; align-items:baseline;
}
.spec-list li::before{content:""; width:1.4rem; height:1px; background:var(--peri); flex:none; transform:translateY(-3px);}

/* gallery (natural aspect masonry) */
.gallery{columns:3 300px; column-gap:1.2rem; margin-top:3rem;}
.gallery figure{break-inside:avoid; margin:0 0 1.2rem;}
.gallery button{display:block; width:100%; padding:0; border:1px solid var(--hair); background:#fff;}
.gallery img{width:100%; height:auto; display:block; transition:opacity .3s;}
.gallery button:hover img{opacity:.88;}

/* stills grid (video page) */
.stills{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:3rem;}
@media (max-width:820px){ .stills{grid-template-columns:1fr;} }
.stills button{padding:0; border:1px solid var(--hair); background:#fff;}
.stills img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/2;}

/* lightbox */
.lb{
  position:fixed; inset:0; z-index:80; background:rgba(16,14,30,.94);
  display:none; align-items:center; justify-content:center; padding:3.5rem 1rem 1rem;
}
.lb.open{display:flex;}
.lb img{max-width:min(1100px,94vw); max-height:84vh; width:auto; height:auto; box-shadow:0 20px 70px rgba(0,0,0,.5);}
.lb-close{position:fixed; top:.9rem; right:1.1rem; color:#fff; font-size:2rem; line-height:1; padding:.4rem .7rem;} /* right side, always */
.lb-prev,.lb-next{
  position:fixed; top:50%; transform:translateY(-50%);
  color:#fff; font-size:2rem; padding:1rem; opacity:.8;
}
.lb-prev:hover,.lb-next:hover{opacity:1;}
.lb-prev{left:.4rem;} .lb-next{right:.4rem;}
.lb-count{position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:.66rem; letter-spacing:.28em; font-variant-numeric:tabular-nums;}

/* packages table */
.pkg-table{width:100%; border-collapse:collapse; margin-top:2rem; background:#fff; border:1px solid var(--hair);}
.pkg-table th{
  font-weight:600; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  text-align:left; padding:.85rem 1.1rem; border-bottom:1px solid var(--hair);
}
.pkg-table td{padding:.95rem 1.1rem; border-bottom:1px solid var(--hair); color:var(--muted); font-size:.92rem; vertical-align:top;}
.pkg-table tr:last-child td{border-bottom:0;}
.pkg-table td:first-child{font-family:var(--disp); font-size:1.2rem; color:var(--ink); white-space:nowrap;}
.table-wrap{overflow-x:auto;}

/* service list chips */
.svc-cols{display:grid; grid-template-columns:1fr 1fr; gap:.4rem 2.2rem; margin-top:1.6rem; max-width:40rem;}
@media (max-width:560px){ .svc-cols{grid-template-columns:1fr;} }
.svc-cols span{
  font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  padding:.5rem 0; border-bottom:1px solid var(--hair);
}

/* reviews */
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem; margin-top:3rem;}
@media (max-width:880px){ .review-grid{grid-template-columns:1fr;} }
.review{background:#fff; border:1px solid var(--hair); padding:1.9rem; display:flex; flex-direction:column; gap:1rem;}
.review .stars{color:var(--indigo); letter-spacing:.22em; font-size:.78rem;}
.review blockquote{font-family:var(--disp); font-size:1.16rem; line-height:1.5; text-wrap:pretty;}
.review cite{font-style:normal; font-size:.6rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-top:auto;}

/* contact / visit */
.visit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,3.5rem); margin-top:3rem; text-align:center;}
@media (max-width:820px){ .visit-grid{grid-template-columns:1fr;} }
.visit-grid h3{font-size:1.3rem; margin-bottom:.9rem;}
.visit-grid p,.visit-grid td{color:var(--muted); font-size:.92rem;}
.visit-grid a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hair);}
.visit-grid a:hover{color:var(--indigo); border-color:var(--indigo);}
.hours-table{margin:0 auto; border-collapse:collapse; font-variant-numeric:tabular-nums;}
.hours-table td{padding:.26rem .7rem;}
.hours-table td:first-child{text-align:right; font-weight:600; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);}
.hours-table td:last-child{text-align:left;}

/* action cards (contact page) */
.actions{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.6rem;}
@media (max-width:820px){ .actions{grid-template-columns:1fr;} }
.action{
  background:#fff; border:1px solid var(--hair); padding:1.7rem; text-align:center;
  text-decoration:none; transition:border-color .25s, transform .25s;
}
.action:hover{border-color:var(--peri); transform:translateY(-2px);}
.action h3{font-size:1.25rem;}
.action p{color:var(--muted); font-size:.85rem; margin-top:.4rem;}
.action .go{display:inline-block; margin-top:.9rem; font-size:.6rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--indigo);}

/* CTA band */
.cta{position:relative; isolation:isolate; color:#fff; text-align:center; padding:clamp(6rem,13vw,9.5rem) 1.5rem;}
.cta-bg{position:absolute; inset:0; z-index:-2;}
.cta-bg img{width:100%; height:100%; object-fit:cover; object-position:center 60%;}
.cta::after{content:""; position:absolute; inset:0; z-index:-1; background:rgba(20,18,40,.6);}
.cta h2{font-size:clamp(2.1rem,4.6vw,3.6rem); margin-bottom:2.2rem;}
.cta .btn-solid{background:#fff; color:var(--ink);}
.cta .btn-solid:hover{background:var(--peri-soft);}
.cta-actions{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap;}

/* footer */
footer{background:var(--white); border-top:1px solid var(--hair); padding:3.5rem clamp(1.2rem,4vw,2.6rem) 2rem;}
.foot-grid{
  max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:2.5rem;
}
@media (max-width:920px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr;} }
.foot-grid h4{font-weight:600; font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem;}
.foot-mark{font-family:var(--disp); font-size:1.5rem;}
.foot-grid p, .foot-grid li{color:var(--muted); font-size:.88rem;}
.foot-grid ul{list-style:none; display:grid; gap:.35rem;}
.foot-grid a{text-decoration:none; border-bottom:1px solid transparent;}
.foot-grid a:hover{color:var(--indigo); border-color:var(--indigo);}
.foot-bottom{
  max-width:var(--max); margin:2.6rem auto 0; padding-top:1.4rem; border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:.8rem 2rem; justify-content:space-between;
  font-size:.6rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.foot-bottom a{text-decoration:none;}
.foot-bottom a:hover{color:var(--indigo);}

/* reveal */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .tile-media img{transition:none;}
}

/* film embeds */
.films-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; margin-top:3rem;}
.films-grid.single{grid-template-columns:1fr; max-width:840px; margin-left:auto; margin-right:auto;}
@media (max-width:820px){ .films-grid{grid-template-columns:1fr;} }
.film{background:#fff; border:1px solid var(--hair);}
.film .frame{position:relative; aspect-ratio:16/9; background:#0e0e1c;}
.film iframe, .film video{position:absolute; inset:0; width:100%; height:100%; border:0;}
.film video{object-fit:contain; background:#0e0e1c;}
.film figcaption{padding:.95rem 1.15rem; display:flex; justify-content:space-between; gap:1rem; align-items:baseline;}
.film .name{font-family:var(--disp); font-size:1.2rem;}
.film .type{font-size:.6rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); white-space:nowrap;}

/* photo booth strip on event pages */
.booth-strip{
  display:grid; grid-template-columns:220px 1fr auto; gap:2rem; align-items:center;
  background:#fff; border:1px solid var(--hair); padding:1.8rem 2.2rem;
  margin-top:clamp(3.5rem,7vw,5.5rem);
}
@media (max-width:880px){ .booth-strip{grid-template-columns:1fr; text-align:center;} .booth-strip img{margin:0 auto;} }
.booth-strip img{width:220px; max-width:100%;}
.booth-strip h3{font-size:1.5rem; margin-bottom:.4rem;}
.booth-strip p{color:var(--muted); font-size:.9rem;}

/* home: event categories (uniform photography, no graphics) */
.events-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.8rem; margin-top:3rem;}
@media (max-width:1020px){ .events-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .events-grid{grid-template-columns:1fr;} }
.event-card{text-decoration:none; display:block;}
.event-card .ph{overflow:hidden; aspect-ratio:4/5; background:var(--peri-soft);}
.event-card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease;}
.event-card:hover .ph img{transform:scale(1.045);}
.event-card h3{font-size:1.45rem; margin-top:1.1rem;}
.event-card p{color:var(--muted); font-size:.85rem; line-height:1.7; margin-top:.15rem;}
.event-card .go{display:inline-block; margin-top:.55rem; font-size:.6rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--indigo); border-bottom:1px solid var(--peri); padding-bottom:.2rem;}

/* home: quiet index of shop services */
.shoplist{margin-top:2.5rem; border-top:1px solid var(--hair);}
.shoplist a{
  display:grid; grid-template-columns:1fr 2fr auto; gap:2rem; align-items:baseline;
  padding:1.35rem .2rem; border-bottom:1px solid var(--hair); text-decoration:none;
  transition:background .25s;
}
.shoplist a:hover{background:var(--peri-soft);}
.shoplist .nm{font-family:var(--disp); font-size:1.35rem;}
.shoplist .ds{color:var(--muted); font-size:.88rem;}
.shoplist .ar{font-size:1rem; color:var(--indigo);}
@media (max-width:760px){
  .shoplist a{grid-template-columns:1fr auto;}
  .shoplist .ds{display:none;}
}

/* nav dropdown */
.nav-drop{position:relative; display:flex; align-items:center;}
.nav-drop > a{display:inline-flex; align-items:center; gap:.4rem;}
.nav-drop > a .caret{
  width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px); opacity:.55; font-size:0; line-height:0;
}
.nav-drop-menu{
  position:absolute; top:100%; left:-1rem; min-width:240px; padding:.55rem 0;
  background:#fff; border:1px solid var(--hair); box-shadow:0 14px 40px rgba(22,22,44,.1);
  display:none;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu{display:block;}
.nav-drop-menu a{
  display:block; padding:.6rem 1.3rem; color:var(--ink); opacity:1; border-bottom:0;
  font-weight:600; font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; text-decoration:none;
}
.nav-drop-menu a:hover{background:var(--peri-soft); color:var(--indigo);}
.nav-drop-menu a.active{color:var(--indigo);}
.nav.overlay .nav-drop-menu a{color:var(--ink);}
.nav-drop::after{ /* hover bridge so the menu doesn't close crossing the gap */
  content:""; position:absolute; left:0; right:0; top:100%; height:.8rem;
}

/* mobile menu: grouped sub-items */
.mmenu-links a.sub{
  font-family:var(--sans); font-weight:500; font-size:.95rem; letter-spacing:.06em;
  padding:.55rem 0 .55rem 1.4rem; color:var(--muted);
}
.mmenu-links a.sub:hover{color:var(--indigo);}

/* YouTube thumbnail fallback (file:// preview) */
.yt-thumb{position:absolute; inset:0; display:block;}
.yt-thumb img{width:100%; height:100%; object-fit:cover;}
.yt-thumb::after{content:""; position:absolute; inset:0; background:rgba(16,14,30,.22); transition:background .3s;}
.yt-thumb:hover::after{background:rgba(16,14,30,.08);}
.yt-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:rgba(247,247,250,.94);
  z-index:1; transition:transform .25s;
}
.yt-play::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-40%,-50%);
  border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--indigo);
}
.yt-thumb:hover .yt-play{transform:translate(-50%,-50%) scale(1.07);}
.yt-note{
  position:absolute; right:.9rem; bottom:.8rem; z-index:1; color:#fff;
  font-weight:600; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}