/*
 * PirouVR design system, layer 1 (7 Oct 2026) - loaded after style4.css by every header.
 * Mock-up: https://claude.ai/artifact/J3NypXYJdfLv4UUYE3Hoxa ("Dark, quiet, content first").
 * Near-black grounds; gold = data (scores, ranks); blue = the one action. Bricolage Grotesque for display, Figtree for
 * text (both self-hosted). One scene card everywhere: rounded picture, lifts on hover, studio as text (no logo bubble).
 * New file name per change (pv-5.css...): CloudFront ignores ?v= on /assets.
 * pv-2 (7 Oct): one page grid - every page starts at the same left edge (32px desktop, 16px phone, content capped
 * at 1600px) and one page-title size (48px desktop, 30px phone; profile heroes 64/36).
 * pv-3 (7 Oct): the header search is one rounded pill; listing headers (Trending, New...) on the page grid on phones.
 * pv-4 (7 Oct): listing headers fill the row (they were centred and narrower on phones).
 */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-stretch:75% 100%;font-display:swap;src:url('/assets/fonts/bricolage-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/figtree-latin-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --pv-ground:#0b0b0e;--pv-surface:#15151a;--pv-raised:#202028;--pv-line:#23232a;
  --pv-text:#f2f2f5;--pv-muted:#a3a3ad;--pv-gold:#f6cf6b;--pv-action:#2b6cff;--pv-action-hover:#1f5be6;
  --pv-display:'Bricolage Grotesque','Figtree',system-ui,sans-serif;--pv-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font:var(--pv-body)
}

/* ground and text */
html,body,#pageContainer,#landingContainer,#mainSectionContainer,#mainContentContainer{background-color:var(--pv-ground)!important}
body{font-family:var(--pv-body)!important;color:var(--pv-text);-webkit-font-smoothing:antialiased}
body input,body button,body select,body textarea{font-family:inherit}
h1,h2,.sectionHeaderRow h2,.lpHead h1{font-family:var(--pv-display)!important;letter-spacing:-.025em}
h1{font-weight:800!important}
h2{font-weight:700!important}

/* header bar */
#mastHeadContainer{background-color:rgba(11,11,14,.94)!important;-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--pv-line)}
#topNavContainer,#mastHeadContainer .navigation,#mastHeadContainer nav{background:transparent!important}
#mastHeadContainer .wordmark{font-family:var(--pv-display)!important;font-weight:800;letter-spacing:-.04em}
#mastHeadContainer .searchBarContainer{background:var(--pv-raised)!important;border:1px solid transparent!important;border-radius:999px!important;overflow:hidden}
#mastHeadContainer .searchBarContainer:focus-within{border-color:#3a3a46!important}
#mastHeadContainer .searchBarContainer .searchBar{background:transparent!important;border:0!important;color:var(--pv-text)!important;padding:0 8px 0 18px!important;font-size:15px!important;font-weight:400!important;outline:none}
#mastHeadContainer .searchBarContainer .searchBar::placeholder{color:#8f8f99}
#mastHeadContainer .searchBarContainer .searchButton{background:transparent!important;border:0!important;color:#c4c4cc}

/* the scene card (VideoGridItem), everywhere */
.videoGridItem .thumbnail{position:relative;border-radius:12px!important;overflow:hidden;background:#17171c;transition:transform .18s ease,box-shadow .18s ease}
.videoGridItem .thumbnail img{border-radius:0!important;display:block}
.videoGridItem:hover .thumbnail,.thumbnailWrapper:hover .thumbnail{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,.14)}
.videoGridItem .duration{background:rgba(0,0,0,.72)!important;border-radius:6px!important;font-weight:700!important;font-size:12px!important;padding:3px 7px!important}
.videoGridItem .cardQ{background:rgba(0,0,0,.72)!important;color:#fff!important;border-radius:6px!important;font-weight:800!important;letter-spacing:.04em;font-size:11px!important}
.videoGridItem h3.title,.videoGrid h3.title{font-family:var(--pv-body)!important;font-weight:600!important;font-size:15px!important;line-height:1.3!important;color:var(--pv-text)!important;letter-spacing:0}
.videoGridItem .studioTileLogo,.videoGrid .studioTileLogo{display:none!important}
.videoGridItem .tileViewCount,.videoGrid .tileViewCount{display:none!important}
.videoGridItem .studioNameLink,.videoGrid .studioNameLink{color:var(--pv-muted)!important;font-size:13px!important;font-weight:500!important}
.videoGridItem .tileAge,.videoGrid .tileAge{color:#7c7c86!important;font-size:12px!important}
.videoGridItem .studioMetaRow,.videoGrid .studioMetaRow{min-height:0!important;margin-top:2px!important}

/* the one action: blue; secondary: quiet */
.heroPrimary,.pvr-btn-primary,.mobileBottomNav .mbn-ctaLabel{background:var(--pv-action)!important;border-color:var(--pv-action)!important;color:#fff!important}
.heroPrimary:hover,.pvr-btn-primary:hover{background:var(--pv-action-hover)!important}

/* pills / tabs / chips used across pages */
.lpTabs a,.lpBrowse a{background:var(--pv-raised)!important}
.lpTabs a.on{background:var(--pv-text)!important;color:var(--pv-ground)!important}

/* breadcrumbs: quiet */
.breadcrumbs,.breadcrumbs a{color:#8f8f99!important}

/* phones: tighter grids are handled per page; nothing here changes layout */
@media (prefers-reduced-motion:reduce){.videoGridItem .thumbnail{transition:none}.videoGridItem:hover .thumbnail{transform:none}}

/* one page grid: the same gutter on every page; page wrappers no longer add their own centring or padding */
:root{--pv-gutter:32px}
@media (max-width:1024px){:root{--pv-gutter:24px}}
@media (max-width:760px){:root{--pv-gutter:16px}}
#mainSectionContainer{padding-left:0!important;padding-right:0!important}
#mainContentContainer{padding-left:max(var(--pv-gutter),calc((100% - 1600px) / 2))!important;padding-right:max(var(--pv-gutter),calc((100% - 1600px) / 2))!important}
#mainContentContainer .bs,#mainContentContainer .stPage,#mainContentContainer .ch,#mainContentContainer .cfWrap,
#mainContentContainer .hbPage,#mainContentContainer .rankingsPage,#mainContentContainer .categoryContainer>.breadcrumbs{max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
/* the rankings game and long intros keep a readable width, at the same left edge */
#mainContentContainer .rankVote{max-width:1040px}
#mainContentContainer .rankingsIntro p{max-width:820px}
/* the how-to guides are reading pages: keep the comfortable text width, start at the same edge */
#mainContentContainer .vr-headset{margin-left:0!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}

/* one page-title size (scene titles keep theirs until the scene page rebuild) */
#mainContentContainer h1:not(.spHead h1):not(.pornstarName):not(.pvSh h1){font-size:48px!important;line-height:1.05!important}
#mainContentContainer h1.pornstarName,#mainContentContainer .pvSh h1{font-size:64px!important;line-height:1!important}
@media (max-width:760px){
  #mainContentContainer h1:not(.spHead h1):not(.pornstarName):not(.pvSh h1){font-size:30px!important;line-height:1.1!important}
  #mainContentContainer h1.pornstarName,#mainContentContainer .pvSh h1{font-size:36px!important}
}
#mainContentContainer .largeVideoGridContainer>.videoGridHeader{padding-left:0!important;padding-right:0!important;width:100%;align-self:stretch;box-sizing:border-box}