:root {
--para-font-size: clamp(1rem, 0.9rem + 0.35vw, 1.37rem);
--title-font-size: clamp(2.5rem, 1.836rem + 2.083vw, 3rem);
--subtitle-font-size: clamp(1.25rem, 1.05rem + 0.9vw, 2rem);
--nav-height: 5.7rem;
--wrapper-pad-bottom: clamp(1rem, 0.5rem + 1.04vw, 2rem);
--timeline-thumb-ratio: 0.45;
color-scheme: light dark;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.divorce, .tc-break2, .tc-break3, .tc-tb1, .panel, .artaud, .artaud2, .artaud3, .orange1, .orange2, .fate-s, .artaud4, .fate-s2, .daily, .cookieBr {
display: none;
}
.error {
max-width: 65ch;
margin: 3rem auto 0 auto;
line-height: 2.5rem;
}
.error p:not(.about-content-sub) {
line-height: 1.75rem;
}
#loading-overlay {
position: fixed;
inset: 0;
top: 0;
min-height: 100dvh;
margin-top: calc(var(--nav-height) * -1);
background: light-dark(#fff, Canvas);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease;
}
#loading-overlay.hidden {
opacity: 0;
pointer-events: none;
display:none;
}
.pressBody #loading-overlay,
.contactBody #loading-overlay,
.aboutBody #loading-overlay, .indexBody #loading-overlay {
display: none;
}
/* Cookies ------------------- */
.prodBody .site-footer, .site-footer {
bottom: 1rem;
position: relative;
margin-left: 50%;
transform: translateX(-50%);
width: 100%;
}
.footer-content {
display: flex;
left: 0;
width: 100%;
padding: .5rem;
justify-content: center;
align-items: center;
font-size: .8rem;
opacity: .23;
}
.indexBody .site-footer {
padding: .5rem .5rem .5rem 1.5rem;
justify-content: flex-start;
bottom: 1.25rem;
position: absolute;
}
.cookie-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 71%;
margin: 0 auto;
z-index: 99999;
display: none;
background: light-dark(rgba(255,255,255,0.43),rgba(0,0,0,0.43));
border-top: 1px solid #333;
padding: .25rem;
overflow: hidden;
backdrop-filter: blur(3.7px);
opacity: 0;
transform: translateY(100%);
animation: bannerIn 0.5s ease-in-out forwards;
animation-delay: 1s;
}
@keyframes bannerIn {
to {
opacity: 1;
transform: translateY(0);
}
}
.indexBody .cookie-bar {
background: rgba(255,255,255,0.7);
color: #000;
backdrop-filter: blur(4.7px);
}
.cookie-bar[aria-hidden="false"] {
display: flex !important;
justify-content: center;
}
.cookie-content {
position: relative;
z-index: 1;
max-width: 1200px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.cookie-content p {
margin: 0 0 0 1rem;
font-size: 0.85rem;
line-height: 1.4;
transition: color 500ms ease-in-out;
}
body:has(.slideshow3 img:nth-of-type(3).active) .cookie-content p, body:has(.slideshow3 img:nth-of-type(4).active) .cookie-content p, body:has(.slideshow3 img:nth-of-type(3).active) .cookie-content a, body:has(.slideshow3 img:nth-of-type(4).active) .cookie-content a {
color:#aaa;
}
.cookie-content a {
text-decoration: underline;
transition: color 500ms ease-in-out;
}
.cookie-actions {
display: flex;
gap: 1rem;
flex-shrink: 0;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-overlay[aria-hidden="false"] {
display: flex !important;
}
.cookie-modal {
background: #111;
color: #fff;
padding: 2rem;
max-width: 500px;
width: 100%;
border: 1px solid #333;
border-radius: 1rem;
}
.cookie-modal p {
line-height: 1rem;
font-size:.75rem;
}
.cookie-modal h2 {
margin-top: 0;
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.preference-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 1rem 0;
border-bottom: 1px solid #222;
}
.pref-text label {
display: block;
font-weight: bold;
font-size: 0.9rem;
margin-bottom: 0.25rem;
}
.pref-text span {
display: block;
font-size: 0.75rem;
color: #888;
}
.locked-option {
opacity: 0.4;
cursor: not-allowed;
}
.modal-footer {
margin-top: .5rem;
display: flex;
justify-content: flex-end;
}
.btn-primary, .btn-secondary {
background: light-dark(rgba(255,255,255,.8),rgba(0,0,0,.8));
border: 1px solid #444;
border-color: #444 transparent #444 transparent;
padding: 0.3rem 0.6rem;
font-size: 0.8rem;
text-transform: uppercase;
cursor: pointer;
transition: opacity 0.2s;
margin: 0.3rem 0;
}
#save-preferences {
padding: 0.6rem 1.2rem;
}
.indexBody.btn-primary, .indexBody.btn-secondary, .indexBody .cookie-bar a {
color: #000;
}
.btn-secondary {
opacity: .5;
border: 1px solid #444;
border-color: #444 transparent #444 transparent;
}
.btn-primary:hover, .btn-secondary:hover {
opacity: 0.8;
}
input[type="checkbox"] {
width: 17px;
transform: translate(-5px, 2px);
height: 17px;
}
/* ----------------------- */
.smallcaps {
font-variant: small-caps;
}
.pressBody.page-loaded #loading-overlay,
.contactBody.page-loaded #loading-overlay,
.aboutBody.page-loaded #loading-overlay, .indexBody.page-loaded #loading-overlay {
display: none;
}
#loader-ring-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
opacity: 1;
}
#loader-ring-svg {
width: 100%;
height: 100%;
overflow: visible;
}
#loader-thumb-orbit {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
}
#loader-thumb {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #4d4d4d;
top: -145px;
left: -8px;
}
.dna-scene {
perspective: 1200px;
width: 2rem;
height: 10rem;
}
.dna-propeller {
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: rotate-z 10s linear infinite;
}
.dna-tilt {
width: 100%;
height: 100%;
transform: rotateZ(-45deg);
transform-style: preserve-3d;
}
.dna-y-spin {
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: spin-y 3s linear infinite;
}
.base-pair {
position: absolute;
width: 100%;
height: 2px;
background: light-dark(rgba(0, 0,0, 0.15),rgba(255, 255, 255, 0.15));
top: calc(var(--i) * 0.65rem);
transform: rotateY(calc(var(--i) * 24deg));
transform-style: preserve-3d;
}
/* LEFT nucleotide */
.base-pair::before {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
top: -5px;
left: -5px;
background: radial-gradient(circle at 35% 35%, light-dark(#000,#fff), #999);
animation:
billboard-fix 3s linear infinite,
depth-fade 3s ease-in-out infinite;
animation-delay:
0s,
calc(var(--i) * -0.2s);
}
/* RIGHT nucleotide (phase inverted) */
.base-pair::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
top: -5px;
right: -5px;
background: radial-gradient(circle at 35% 35%, light-dark(#000,#fff), #999);
border: 1px solid #777;
box-sizing: border-box;
animation:
billboard-fix 3s linear infinite,
depth-fade 3s linear infinite;
animation-delay:
0s,
calc(var(--i) * -0.2s - 1.5s);
}
@keyframes spin-y {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
@keyframes rotate-z {
from { transform: rotateZ(0deg); }
to { transform: rotateZ(360deg); }
}
/* Billboard stays perfectly synchronized */
@keyframes billboard-fix {
from {
transform: rotateY(calc(var(--i) * -24deg)) scale(1);
}
to {
transform: rotateY(calc(var(--i) * -24deg - 360deg)) scale(1);
}
}
/* Opacity curve */
@keyframes depth-fade {
0% { opacity: 1; }
25% { opacity: 0.2; }
50% { opacity: 0.05; }
75% { opacity: 0.2; }
100% { opacity: 1; }
}
video {
pointer-events: auto;
}
.gsc-control-cse, table.gsc-search-box {
background-color: transparent !important;
}
.gsc-control-cse {
border: none !important;
}
@font-face {
font-family: 'Noto';
src: url('fonts/opensans.woff2') format('woff2'),
url('fonts/opensans.woff') format('woff');
font-weight: 400;
font-display: block;
}
@keyframes fade-up {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
@keyframes fade-up2 {
0% {
opacity: 0;
transform: translate(-50%, 30px);
}
100% {
opacity: 1;
transform: translate(-50%, 0px);
}
}
@keyframes fade-down {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(30px);
}
}
@keyframes pic-up {
0% {
transform: scale(1);
}
100% {
transform: scale(1.15);
}
}
@keyframes fade-left-entry {
0% {
opacity: 0.31;
transform: translateX(2.71rem);
animation-timing-function: ease-out;
}
75% {
opacity: 0.8275;
transform: translateX(-0.25rem);
animation-timing-function: ease-out;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fade-left {
animation: fade-left-entry 1.73s forwards;
}
@keyframes tool-fade {
0% {
opacity: 0;
transform: translate(-50%, 1.11rem) translateZ(0);
}
100% {
opacity: 1;
transform: translate(-50%, .75rem) translateZ(0);
}
}
@keyframes tool-fade-out {
0% {
opacity: 1;
transform: translate(-50%, .75rem) translateZ(0);
}
100% {
opacity: 0;
transform: translate(-50%, 1.11rem) translateZ(0);
}
}
html {
text-wrap:pretty;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
::selection {
background: rgb(83, 83, 83);
color: white;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.pod-blank {
display: block;
margin: 0 0 3px 3px;
position: absolute;
top: 0;
left: -1px;
z-index: 2;
opacity: 1;
width: 100%;
height: auto;
aspect-ratio: 3/2;
object-fit: cover;
transition: opacity .5s ease-in-out;
}
/* Video controls */
video::-webkit-media-controls,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-fullscreen-button,
video::--moz-media-controls,
video::-moz-range-track,
video::-moz-control-bar,
.video-container video::-moz-control-bar,
.video-container video::-webkit-media-controls-enclosure {
display: none !important;
}
video::-webkit-media-controls-enclosure {
display: none !important;
}
.video-container video::-moz-control-bar,
.video-container video::-webkit-media-controls-enclosure {
display: none !important;
height: 0 !important;
}
video::-moz-focus-inner {
border: 0;
}
.video-container:fullscreen {
background-color: black;
width: 100%;
height: 100%;
}
video {
width: 100%;
height: auto;
display: block;
}
/* Title Default: Hidden */
.video-overlay-title {
position: absolute;
top: 20px;
left: 20px;
padding: 0;
color: #fff;
font-size: 1.5rem;
font-weight: 500;
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
opacity: 0;
transition: opacity 500ms cubic-bezier(0.8, 0.1, 0.2, 0.9);
pointer-events: none;
z-index: 20;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main-video.pod-color2 {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.video-container:hover .main-video.pod-color2 {
filter: none;
}
.sorters {
display: flex;
gap: 1rem;
/* align-items: flex-end;*/
margin: 0;
height: auto;
padding-bottom: 0.5rem;
filter: invert(1);
justify-content: center;
align-items: center;
}
.sort {
pointer-events: auto;
cursor: pointer;
display: flex;
align-items: flex-end;
line-height: 1;
width: 40px;
height: 40px;
background: rgba(112,112,112,.3);
border-radius: .5rem;
border:1px solid #000;
transition: background 250ms ease-in-out;
}
.sort svg {
opacity: .45;
transition: opacity 250ms ease-in-out;
}
.sort:not(.sorter--active):hover {
background:light-dark(Canvas,#eee);
}
.sort:not(.sorter--active):hover svg {
opacity: 1;
}
.sortTitle {
color: light-dark(#fff, Canvas);
padding-top: .25rem;
font-size: 1.25rem;
margin: 0;
}
.favs {
overflow: hidden;
position: relative;
}
.favOn, .favOff {
color: #000;
font-size: 2rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
transition: opacity 0.25s ease;
}
.favOff {
opacity: 1;
}
.favOn {
opacity: 0;
}
.favs:hover .favOff {
opacity: 0;
}
.favs:hover .favOn {
opacity: 1;
}
.alpha svg {
width: 36px;
height: 36px;
}
/* ── Sorter tooltips ─────────────────────────────────────────────────────── */
#anchor-alpha { anchor-name: --alpha; }
#anchor-favs { anchor-name: --favs; }
#anchor-chrono .tooltip { position-anchor: --chrono; }
#anchor-alpha .tooltip { position-anchor: --alpha; }
#anchor-favs .tooltip { position-anchor: --favs; }
.sort:hover .tooltip {
/* animation: tool-fade 0.6s ease-in-out forwards;*/
}
.sorters .tooltip {
/* filter: invert(1);*/
}
/* ── Sorter active state ─────────────────────────────────────────────────── */
.sort.sorter--active {
background: #fff;
border:3px solid #000;
cursor: auto;
}
.sort.sorter--active svg {
opacity: 1;
}
/* ── No favourites tip ───────────────────────────────────────────────────── */
.no-favs-tip {
position: fixed;
position-anchor: --favs;
left: 50%;
top: 14%;
transform: translate(-50%, 0);
font-size: 1rem;
color: light-dark(#666, #bbb);
background-color: light-dark(white, Canvas);
border: 1px solid #666;
border-radius: .5rem;
padding: .25rem .5rem .35rem .5rem;
white-space: nowrap;
pointer-events: none;
z-index: 10000;
animation: fav-overlay 3000ms linear;
}
/* ── Video card fav star ─────────────────────────────────────────────────── */
.video-item {
position: relative;
container-type: inline-size;
cursor: pointer;
flex: 0 0 18.5rem;
}
.fav-star {
position: absolute;
top: .5rem;
right: 0.5rem;
font-size: 1.75rem;
line-height: 1;
padding: 0.1rem 0.25rem;
transition: color 0.2s ease, transform 0.2s ease, opacity 0.5s ease;
border-radius: 0.25rem;
color: rgba(255, 255, 255, 0.7);
z-index: 5;
cursor: none;
display: none;
pointer-events: none;
}
.fav-star--hidden {
opacity: 0;
pointer-events: none;
}
.fav-star:hover {
transform: scale(1.15);
color: rgba(255, 255, 255, 0.85);
}
.fav-star--active {
color: rgba(255, 255, 255, 0.95);
}
.vidBody .page-title-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-end;
box-sizing: border-box;
padding-right: calc(5% + ((100% - 66.66rem) / 2));
}
.vidBody .sorters {
margin-right: -2.5rem;
}
.letters p {
line-height: .75rem;
}
.letters-indent {
margin-left:13rem;
}
.letters-indent1 {
margin-left:10.5rem;
}
.letters-indent2 {
margin-left:13.5rem;
}
.letters-indent3 {
margin-left:12.5rem;
}
ol {
margin-block-start:0;
margin: 0;
padding: 0;
}
.mobbr {
display: none;
}
body, html {
width: 100%;
font-family: "Noto", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-size: 1.125rem;
padding: 0;
margin: 0;
margin-top: var(--nav-height);
background: light-dark(#fff, Canvas);
}
html:has(.pressBody), html:has(.contactBody), html:has(.redBody), html:has(.vidBody), html:has(.podBody) {
overflow-x: hidden;
}
.pressBody, .contactBody, .vidBody, .podBody {
overflow-x: hidden;
}
body {
position: relative;
height: 100%;
padding: 0;
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.indexBody {
height: 100dvh;
overflow: hidden;
margin-top: 0 !important;
scrollbar-gutter:auto;
}
.aboutBody,
.prodBody,
.vidBody,
.redBody,
.pressBody,
.contactBody,
.podBody {
margin-top: 0;
}
body.no-scroll {
/* overflow: hidden;*/
}
hr {
height: 1px;
color: #515151;
background-color: #515151;
}
.prod-set hr.review-bar, .prod-set hr.review-bar2, .vid-bar, hr.review-bar {
height: 1px;
color: #515151;
background-color: #515151;
width:61%;
display: block;
margin: 0 auto 1.5rem auto !important;
}
.prodBody hr.review-bar {
margin: 0 auto 1rem auto !important;
}
.prod-set hr.review-bar2 {
}
.vid-bar {
margin: 0 auto 1.5rem auto;
width:47%;
}
.menulogo {
height: 4.7rem;
display: block;
margin: 0;
z-index: 1001;
position: relative;
}
.logoInvert {
filter: invert(1);
}
nav {
position: fixed;
top:0;
left: 0;
right: 0;
width: auto;
padding:.5rem;
margin-bottom: .5rem;
background: light-dark(#fff, Canvas);
padding-bottom: .5rem;
border-bottom: 1px solid light-dark(#ccc, #444);
box-shadow: 0 1rem light-dark(#fff, #111);
z-index: 1000;
}
.indexBody nav {
background-color: transparent;
box-shadow: 0 1rem 0 0 transparent;
border-bottom: none;
}
.podBody nav {
z-index: 1111;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: flex-end;
height: auto;
padding: 0;
max-width: 100%;
margin: 0;
}
.nav-container.menu {
height: auto;
}
.bump {
width: 100%;
height: .75rem;
margin-top:2px;
background-color: white;
z-index: -1;
}
.hamburger {
display: none;
font-size: 1.5rem;
border: none;
color: black;
cursor: pointer;
margin-right: 1rem !important;
border-radius: .5rem;
background: none;
}
.hamburger img {
width:100%;
height:100%;
}
/* Main nav menu */
.menu {
display: flex;
flex-direction: row;
align-items: flex-end;
width: 100%;
list-style: none;
gap: 2rem;
margin: 0;
padding: 0 1rem 0 5rem;
font-size: 1.25rem;
}
.this {
pointer-events: none;
}
.menu li {
font-weight: 600;
height: auto;
display: flex;
align-items: flex-end;
position: relative;
}
.menu a {
padding: 0;
line-height: 1;
display: inline-block;
text-decoration: none;
position: relative;
}
a {
text-decoration: none;
color: light-dark(#000, #fff);
}
a.errorLink {
text-decoration: underline !important;
}
#submit p {
padding: 0;
margin: 0;
}
.menu li a::after, .podp2 a::after, #submit p::after, .trans-eng::after, .trans-fre::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 0.06em;
background-color: light-dark(#111,#fff);
opacity: 0;
transition: opacity 300ms, transform 300ms;
transform: scale(0);
transform-origin: center;
}
#submit p::after {
top: 78%;
left: .5rem;
width: 86%;
}
.trans-eng::after, .trans-fre::after {
top: 80%;
left: 0.5rem;
width: 71%;
}
.podp2 a::after {
top: 110%;
}
.socialsResp a::after {
display: none !important;
}
.indexBody .menu li a::after {
background-color: white;
}
.menu li a:not(.this):hover::after, .menu li a:not(.this):focus::after, .podp2 a:focus::after, .podp2 a:hover::after, #submit p:hover::after, #submit:hover p::after, #submit p:focus::after, a:hover::after, a:focus::after, .trans-eng:not(.active-lang):hover::after, .trans-fre:not(.active-lang):hover::after, .trans-eng:not(.active-lang):focus::after, .trans-fre:not(.active-lang):focus::after {
transform: scale(1);
opacity: 1;
}
.menu a {
color: light-dark(black,white);
}
.indexBody .menu a {
color: white;
filter: drop-shadow(2px 2px 3px rgba(0,0,0,.5));
}
.socialsResp {
display: flex;
gap: 1rem;
align-items: center;
margin: 0;
height: 4.7rem;
}
.mobile-socials-wrapper {
display: flex;
justify-content: flex-end;
width: 100%;
padding-right: 2rem;
box-sizing: border-box;
}
.socialsResp a {
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
}
.socialsResp img {
display: block;
margin: 0;
}
#anchor-youtube { anchor-name: --youtube; }
#anchor-podcast { anchor-name: --podcast; }
#anchor-insta { anchor-name: --insta; border-radius: 31%; box-shadow: 0 0 0 1px light-dark(rgba(0,0,0,0),rgba(0,0,0,0)),0 0 0 1px light-dark(rgba(0,0,0,0),#aaa);}
#anchor-dl { anchor-name: --dl;}
#anchor-chrono { anchor-name: --chrono; }
.indexBody #anchor-insta {box-shadow:none}
#anchor-youtube { anchor-name: --youtube; }
#anchor-podcast { anchor-name: --podcast; }
#anchor-insta { anchor-name: --insta; }
#anchor-dl { anchor-name: --dl; }
button {
background: none;
border: none;
}
#modeTitle {
display: inline-block;
font-size: .75rem;
transform: translateY(-.75rem);
margin-left: .5rem;
}
.modeToggle {
position: relative;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
anchor-name: --mode;
margin-left: 2rem;
overflow: visible;
}
.modeToggle::before {
content: '';
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
top: 50%;
left: 0.1rem;
transform: translate(-50%, -50%);
box-shadow:3px 4px 6px 1px rgba(0, 0, 0, 0.5);
transition: filter 0.6s ease-in-out;
z-index: -1;
}
html[style*="color-scheme: dark"] .modeToggle::before {
box-shadow:3px 4px 6px 1px rgba(0, 0, 0, 0);
}
.modeToggle svg {
width: 40px;
height: 40px;
transform: scale(1.3);
overflow: visible;
}
.blade {
stroke: light-dark(#000, #fff);
fill: light-dark(#fff, #000);
stroke-width: 1px;
stroke-linejoin: round;
stroke-miterlimit: 1;
transform-box: view-box;
vector-effect: non-scaling-stroke;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 100ms;
}
html[style*="color-scheme: dark"] .modeToggle .mask-blade-b1,
html[style*="color-scheme: dark"] .modeToggle .mask-blade-b6,
html[style*="color-scheme: dark"] .modeToggle .mask-blade-b7,
html[style*="color-scheme: dark"] .modeToggle .mask-blade-b8 {
transform: rotateZ(26deg);
}
html[style*="color-scheme: light"] .modeToggle .mask-blade-b1,
html[style*="color-scheme: light"] .modeToggle .mask-blade-b6,
html[style*="color-scheme: light"] .modeToggle .mask-blade-b7,
html[style*="color-scheme: light"] .modeToggle .mask-blade-b8 {
transform: rotateZ(-5deg);
}
/* Add transition to all mask blades to sync with blade animation */
.mask-blade-b1,
.mask-blade-b6,
.mask-blade-b7,
.mask-blade-b8 {
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 100ms;
}
html[style*="color-scheme: dark"] .modeToggle .blade {
transform: rotateZ(26deg);
}
html[style*="color-scheme: light"] .modeToggle .blade {
transform: rotateZ(-5deg);
}
html[style*="color-scheme: light"] .outline {
fill: #000;
stroke: transparent;
stroke-width: 0;
}
html[style*="color-scheme: dark"] .outline {
fill: #fff;
stroke: #fff;
stroke-width: .6px;
}
html[style*="color-scheme: dark"] .indexBody .outline, html[style*="color-scheme: light"] .indexBody .outline {
stroke: #000;
}
html[style*="color-scheme: dark"] .indexBody .outline {
stroke-width: 1px;
}
html[style*="color-scheme: light"] .indexBody .outline {
stroke-width: 0;
}
html[style*="color-scheme: dark"] .indexBody #modeTitle {
color:#000;
font-weight: 600;
}
.sort .tooltip {
/*
border-radius: 0;
color: light-dark(#666, #ddd);
position: fixed;
position-anchor: --youtube;
font-size: .75rem;
left: anchor(center);
top: anchor(bottom);
transform: translateX(-50%) translateY(.75rem);
background-color: light-dark(white, Canvas);
border: 1px solid light-dark(#222, #ddd);
padding: 6px 6px 5px 6px;
white-space: nowrap;
opacity: 0;
visibility: visible;
pointer-events: none;
z-index: 10000;
margin-top: -0.2rem;
border-color: #777 Canvas #777 Canvas;
*/ filter: invert(1);
font-weight: 600;
border-radius: 0;
color: light-dark(#666, #ddd);
position: fixed;
position-anchor: --youtube;
font-size: .75rem;
left: anchor(center);
top: anchor(top);
transform: translateX(-50%) translateY(0rem);
background-color: transparent;
padding: 6px 6px 5px 6px;
white-space: nowrap;
opacity: 0;
visibility: visible;
pointer-events: none;
z-index: -11;
margin-top: -.6rem;
transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
border: none;
}
.socialsResp .tooltip {
border-radius: 0;
color: light-dark(#666, #ddd);
position: fixed;
position-anchor: --youtube;
font-size: .75rem;
left: anchor(center);
top: anchor(top);
transform: translateX(-50%) translateY(0rem);
background-color: transparent;
padding: 6px 6px 5px 6px;
white-space: nowrap;
opacity: 0;
visibility: visible;
pointer-events: none;
z-index: -11;
margin-top: -.6rem;
transition-delay: 0;
transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
border: none;
}
.indexBody .socialsResp .tooltip {
margin: -2.8rem 0 0 1rem;
}
.socialsResp a:hover .tooltip {
animation: none;
opacity: 1;
transition-delay: 561ms;
transform: translate(-50%, -0.75rem);
}
.sort:hover .tooltip {
animation: none;
opacity: 1;
transform: translate(-50%, -0.75rem);
}
#anchor-youtube .tooltip { position-anchor: --youtube; }
#anchor-podcast .tooltip { position-anchor: --podcast; }
#anchor-insta .tooltip { position-anchor: --insta; }
#anchor-dl .tooltip { position-anchor: --dl; }
.social-link:not(.modeToggle) {
width: 35px;
height: 35px;
cursor: pointer;
border: none;
outline: none;
padding: 0;
display: flex; /* Changed from inline-block to flex */
justify-content: center; /* Centers the image horizontally */
align-items: center;
background-color: #fff;
background-image: radial-gradient(circle closest-side, white 0%, #c7c7c7 50%, white 100%);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: 50%;
/* transition: background-size 4.4s ease-out;*/
}
.social-link:not(.modeToggle):hover {
/* background-size: 200% 200%;
animation: cycle 500ms ease-in;*/
}
@keyframes cycle {
0% {
background-size: 0% 0%;
}
50% {
background-size: 100% 100%;
}
100% {
background-size: 200% 200%;
}
}
.podcastB {
border-radius: 50%;
}
.youtubeB {
border-radius: 50%;
}
.instagramB {
border-radius: 23%;
}
.social-link:hover .tooltip {
animation: tool-fade 0.6s ease-in-out forwards;
}
#anchor-dl .tooltip {
display:none;
}
/*
#anchor-dl.show-tooltip .tooltip {
animation: tool-fade 0.6s ease-in-out forwards;
}
#anchor-dl.hide-tooltip .tooltip {
animation: tool-fade-out 0.2s ease-in-out forwards;
}
*/
/*
.modeToggle:hover .tooltip {
animation: tool-fade 0.8s ease-in-out forwards;
}
*/
.mobnav {
transform: translateY(-10px);
position: fixed;
top:0;
right: 0;
height: 100dvh;
width:100%;
opacity: 0;
visibility: hidden;
pointer-events: none;
background-color:rgba(255, 255, 255, 0.5);
backdrop-filter: blur(11px);
-webkit-filter: blur(11px);
transform: translateZ(0);
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top:0;
padding-top: 43%;
transition: opacity .5s ease-in-out, visibility .5s ease-in-out, transform .5s ease-in-out;
}
.mobnav.show {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
/* Dropdowns */
.dropdown-parent {
position: relative;
}
.dropdown-menu {
opacity: 0;
position: absolute;
background: rgba(255, 255, 255, 0.9);
top: 100%;
left: 0;
margin-top: 1rem;
list-style: none;
padding: .5rem;
border:1px solid black;
border-top: none;
z-index: 1;
}
.dropdown-menu li a {
display: block;
padding: 0.75rem 1.25rem;
white-space: nowrap;
color: black;
}
.dropdown-menu li a:last {
border-top: 1px solid black;
}
.dropdown-parent:hover .dropdown-menu {
opacity: 1;
transition: opacity .5s ease-in-out;
}
.dropdown-parent:not(:hover) .dropdown-menu {
opacity: 0;
transition: opacity .5s ease-in-out;
}
/* === Main Containers === */
.videos, .podcasts {
font-size: 1.1rem;
line-height:1.25rem;
max-width: 66.66rem;
margin: 1rem auto;
}
.videos {
margin-top:0;
}
.pod-container, .vid-container {
width: 100%;
display:flex;
flex-direction: column;
justify-content: center;
position: relative;
top: 3rem;
left: 0;
animation: none;
opacity: 0;
}
body.page-loaded .pod-container, body.page-loaded .vid-container {
animation: fade-up ease-in-out 0.5s forwards;
}
.vid-container {
top: 4rem;
}
.pod-container {
top:1rem;
}
.videos {
top:0;
}
.about, .contact, .press {
margin: 0 auto 2rem auto;
line-height: 1.75rem;
width: 90%;
padding-inline: clamp(1.5rem, 5vw, 3rem);
animation: fade-up ease-in-out 0.5s forwards;
padding-top: 2rem;
opacity: 0;
}
.about {
margin-top:6.1rem;
}
.about a {
position: relative;
display: inline-block;
text-decoration: none;
color: light-dark(#333,#bbb);
padding-right: .25rem;
}
/* Link Underline */
.about a::after {
content: '';
position: absolute;
top: 79%;
left: 0;
width: 100%;/* calc(100% - 0.8em);*/
height: 0.06em;
background-color: light-dark(#666, #eee);
opacity: 0;
transition: opacity 300ms, transform 300ms;
transform: scale(0);
transform-origin: center;
}
.about a:hover::after, .about a:focus::after {
transform: scale(1);
opacity: 1;
}
.pressBody .press, .contactBody .contact, .podBody .podcasts {
padding-top: 0;
}
.content-container {
max-width: 66.66rem;
margin: 0 auto;
}
.redBody .page-title-wrapper {
position: fixed;
left: 0;
width: 100%;
background-color: light-dark(#fff, Canvas);
z-index: 11;
padding-bottom: var(--wrapper-pad-bottom);
}
.page-title, .page-title2 {
font-size: var(--title-font-size);
margin-left: clamp(16.49rem, calc(1.60rem + 22vw), 21.6rem);
font-weight: bold;
margin-top: 1rem;
pointer-events: auto;
color: light-dark(#666, #999);
letter-spacing: -.05rem;
}
.page-title2 {
font-size: 1.75rem;
display: none;
margin: 0.25rem 0 0 5rem;
position: fixed;
overflow: hidden;
}
.redBody .page-title {
margin-top: 1.8rem;
}
.prod-subtitle, .prod-venue {
font-size: calc(var(--title-font-size) * 0.67);
margin-left: clamp(16.49rem, calc(1.60rem + 22vw), 21.6rem);
font-weight: bold;
color: light-dark(#666, #999);
letter-spacing: -.05rem;
line-height: 1.3;
margin-bottom: 0.25rem;
}
.prod-subtitle {
color: light-dark(rgb(153,153,153),rgb(107,107,107));
}
.redBody.title-xl .prod-subtitle {
font-size: calc(var(--title-font-size) * 0.59);
}
.prod-venue, .prod-venue2 {
font-size: calc(var(--title-font-size) * 0.51) !important;
display: block;
line-height: 1;
}
.prod-venue2 {
line-height: 1.3;
margin-top: -0.5rem;
}
.redBody.j .prod-venue2 {
margin-top: .25rem;
}
.redBody.su .prod-subtitle {
letter-spacing: -.07rem;
}
#page-title-about {
opacity:0;
}
.fixed-title {
position: fixed;
margin-top: 1rem;
}
/*
#page-title-prod {
font-size: var(--title-font-size);
font-weight: bold;
margin-top: 1rem;
margin-left: clamp(16.49rem, calc(1.60rem + 19.12vw), 22rem);
color: light-dark(#666, #999);
}
*/
#page-title-press {
}
#page-title-casts {
font-size: var(--title-font-size);
font-size: calc(1rem + 1.75vw);
margin-left: 1rem;
font-weight: bold;
padding-top: .35rem;
}
/* About/TOS */
.tos-indent {
margin-left: 2rem;
}
.tos-indent p:not(:first-child) {
margin-top: 0;
}
.about.tos p:not(.about-content-sub4) {
font-size: 1rem;
line-height: 1.5rem;
margin-bottom: 0.5rem;
}
.about.tos ul {
margin: .25rem auto;
}
.aboutBody .page-title-wrapper, .prodBody .page-title-wrapper, .vidBody .page-title-wrapper {
position: fixed;
top: calc(var(--nav-height) - .5rem);
left: 0;
width: 100%;
background-color: light-dark(#fff, Canvas);
z-index: 11;
padding-top: 1rem;
padding-bottom: var(--wrapper-pad-bottom);
box-sizing: border-box;
margin-top: .5rem;
}
.redBody .page-title-wrapper {
top: calc(var(--nav-height));
}
.pressBody .page-title-wrapper, .contactBody .page-title-wrapper, .podBody .page-title-wrapper {
position: relative;
padding-top: 1rem;
}
#artistic {
scroll-margin-top: 16rem;
}
#liitoja {
scroll-margin-top: 15rem;
}
#ethos {
scroll-margin-top: 20rem;
}
.about p, .contact p {
margin-bottom:1.5rem;
}
.about-content {
max-width: 65ch;
margin: 0 auto;
position: relative;
}
.about-content-sub {
font-weight: 600;
font-size: var(--subtitle-font-size);
text-transform: uppercase;
}
.about p.about-content-sub2 {
font-size: calc(var(--subtitle-font-size) - .4rem);
font-weight: 400;
margin-bottom: 0;
}
.about p.about-content-sub3 {
font-size: calc(var(--subtitle-font-size) - .6rem);
line-height: var(--subtitle-font-size);
font-weight: 400;
font-style: italic;
margin-top: 0;
margin-bottom: -.5rem;
color:light-dark(#444,#ccc);
text-wrap: wrap;
}
.about p.about-content-sub4 {
font-size: calc(var(--subtitle-font-size) - .4rem);
font-weight: 600;
margin-bottom: 0;
}
.about p.about-content-sub5 {
font-size: calc(var(--subtitle-font-size) - .6rem);
font-weight: 600;
margin-bottom: 0;
}
.about p.about-content-sub5 + p {
margin-top: 0;
}
.about.tos hr {
width: 100%;
margin:1rem auto 0 auto;
opacity: .5;
}
.about p {
max-width: 75ch;
}
.about-content br {
margin-top: 1rem;
}
.hillar2 {
float: right;
width: 28rem;
height: auto;
border-radius: 1rem;
margin-left: 2rem;
margin-bottom: 1rem;
margin-right: -11.5rem;
filter: grayscale(100%);
transition: filter .5s ease-in-out;
}
.film-strip-container {
float: left;
width: 18rem;
margin-left: -11rem;
margin-bottom: 1rem;
margin-top: 0;
position: relative;
height: 31rem;
filter: grayscale(100%);
transition: filter .5s ease-in-out;
}
.hillar2:hover, .film-strip-container:hover {
filter: grayscale(0%);
}
.film-strip-a,
.film-strip-b,
.film-strip-c {
width: 5.5rem;
height: auto;
position: absolute;
top: 0;
border-radius: .5rem;
}
.film-strip-a {
left: 0;
z-index: 3;
width: 5.1rem;
}
.film-strip-b {
left: 5rem;
top: 1.5rem;
z-index: 2;
transform: rotate(5.1deg)
}
.film-strip-c {
left: 10rem;
top: 3rem;
z-index: 1;
}
/* Press */
.press-content {
max-width: 65ch;
margin:0 auto;
}
.press-content hr {
width: 37%;
margin:2rem auto;
}
.pq-break {
display: none;
}
.pq-after-break {
margin-left: 0;
}
.pressQuote {
font-style:italic;
font-weight:600;
background-color: light-dark(#eee, #222);
color: dark-light(#111,#eee);
border-radius: 1rem;
border: 2px solid light-dark(#111,#eee);
padding:0 29px;
display:inline-block;
margin: 1.5rem 0 0.5rem -2.7rem;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
text-indent: -1.35ch;
padding-left: calc(29px + 1.35ch);
width: 15rem;
}
.pressQuote p {
margin:.5rem .5rem .5rem -0.5rem;
}
.pressQuote p.paper {
font-style: normal;
font-weight: normal;
margin: 0 0 0.2rem 0;
font-size: 1rem;
text-align: right;
}
.pressage {
margin: 2rem 0 0 0;
max-width: 75ch;
}
.trans-fre + .pressage {
margin: .5rem 0 0 0;
}
.who {
margin-right: 3rem;
margin-top: .5rem;
margin-bottom: 1rem;
font-size: 1rem;
text-align: right;
}
.who::before {
content: '• ';
}
.pq2 {
align-content: flex-end;
margin: 0 0 1rem 20rem;
width: auto;
max-width: calc(83% - 16rem);
}
.featured-quote, .featured-quote2 {
color: light-dark(#111,#eee);
padding: 1rem;
margin: 2.5rem 0 2.5rem 2rem;
max-width: 55ch;
background-color:light-dark(#eee, #222);
border: 2px solid light-dark(#111,#eee);
border-radius: 1rem;
}
.featured-quote2 {
padding: 0 1.5rem;
margin: 2rem;
}
.featured-quote2 p:nth-child(2) {
margin-bottom: 0;
}
.obit-quote-auth {
text-align: right;
margin: 0 1.5rem 0 0;
}
.featured-quote .pressage {
margin: 0 0 -1.5rem 0;
}
.featured-quote .who {
margin-top: 2rem;
margin-left: 0;
margin-bottom: 0;
}
/* Home Page Slideshow */
.slideshow {
position: fixed;
top: 3.7rem;
left: 0;
height: 100dvh;
width: 100vw;
overflow: hidden;
z-index: -2;
}
.slideshow2 {
position: fixed;
top: -2rem;
left: 0;
height: 110vh;
width: 100vw;
overflow: hidden;
z-index: -2;
}
@keyframes fadeSlides {
from { opacity: 0; }
to { opacity: 1; }
}
.slideshow3 {
position: fixed;
top: -1rem;
left: 0;
width: 100%;
height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
animation: fadeSlides 2s ease-in-out forwards;
}
/*
.slideshow3 img {
max-width: 100%;
max-height: 100%;
}
*/
.slideshow img {
position: absolute;
top: 0;
left: 0;
}
.slide[alt="Slide 1"] {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
transform-origin: 50% 50%;
}
.slide[alt="Slide 2"] {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
transform-origin: 50% 50%;
}
.slide[alt="Slide 3"] {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
transform-origin: 50% 50%;
}
.slide[alt="Slide 4"] {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
transform-origin: 50% 50%;
}
.container {
container-type: inline-size;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 30;
pointer-events: none;
}
.poundQuote {
position: absolute;
left: 50%;
width: clamp(260px, 47vw, 800px);
top: 63%;
z-index: 30;
color: white;
font-size: clamp(1.05rem, 2.2vw, 2rem);
line-height: 1.55;
opacity: 1;
box-sizing: border-box;
padding-right: 2rem;
}
.poundQuote p {
margin: 0 0 0.4em 0;
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.75));
}
.poet {
font-size: clamp(0.85rem, 1.6vw, 1.35rem);
line-height: 1.4;
margin-top: 0.25em;
}
.title {
position: absolute;
display: block;
font-style: italic;
font-weight: bold;
opacity: 0;
transition: opacity 1s ease-in-out;
color:#fff;
padding:0 2rem;
margin-left: 3rem;
margin-top: 3rem;
font-size: 2rem;
z-index:20;
}
.title2 {
position: absolute;
display: block;
font-style: italic;
opacity: 0;
transition: opacity 1s ease-in-out;
color:#ccc;
padding:0 2rem;
right:3rem;
bottom:3rem;
font-size: 1.5rem;
z-index:20;
}
.titlerev {
color: black;
filter: drop-shadow(3px 3px 3px white);
}
.slide {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
margin-top:2rem;
}
.slide.active, .poundQuote.active, .title2.active {
opacity: 1;
}
.title.active.titlerev {
opacity: 1;
}
.poundQuote.active.titlerev {
opacity: 1;
}
/* Podcasts */
.pod {
display: flex;
width:100%;
flex-direction: column;
align-content: center;
align-self: baseline;
margin:0 auto;
}
.podtitle {
font-weight: 700;
font-size: 1.25rem;
margin:0 auto 1rem auto;
}
.poddesc {
text-align: center;
margin:0 auto;
padding:0 8rem;
line-height: 1.75rem;
font-weight: 500;
font-size:1rem;
}
.podp, .podp2 {
font-size: 1.65rem;
margin: 0 auto .5rem auto;
}
.podp, .podp3 {
font-size: 1.15rem;
margin: -.5rem auto .5rem auto;
}
.podp3 {
margin: -.5rem auto 1rem auto;
}
.podp2 {
margin: 0 auto 1rem auto;
}
.podp a, .podp2 a {
position: relative;
display: inline-block;
font-weight: bold;
color: light-dark(#333, #ccc);
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.podp2 a:hover, .podp2 a:focus-visible {
color: light-dark(#111, #eee);
}
audio {
margin: 2rem auto 4rem auto;
width:61%;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 15px;
padding: 7px;
font-family: "Noto";
}
.media-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 0;
border-bottom: 1px solid #ccc;
gap: 2rem;
}
.media-item-info {
flex: 1 1 60%;
}
/*.media-title {
font-size: 1.25rem;
margin: 0 0 0.5rem 0;
}*/
.media-title h2 {
font-weight: 100;
}
.hanging-indent1 {
padding-left: 1.4rem;
text-indent: -1.4rem;
}
.hanging-indent2 {
padding-left: 1.4rem;
text-indent: -1.4rem;
}
.media-description {
font-size: 1rem;
line-height: 1.5rem;
margin: 0;
}
.media-item audio,
.media-item video {
flex: 1 1 40%;
max-width: 450px;
width: 100%;
margin: 0;
border-radius: 0.5rem;
}
.podcast-grid-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
width: 100%;
margin: 1rem auto 3rem auto;
}
.podcast-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border-radius: .5rem;
background: light-dark(#eee,#222);
border: 1px solid light-dark(#ccc,#444);
padding: 0;
margin: 0;
cursor: pointer;
flex: 0 0 18.5rem;
}
.pod-placeholder {
margin: 0 0 3px 3px;
position: absolute;
top: 0;
left: -1px;
z-index: 3;
opacity: 1;
width: 100%;
height: auto;
aspect-ratio: 3/2;
object-fit: cover;
transition: opacity .5s ease-in-out;
pointer-events: auto;
}
.podcast-item video {
width: 100%;
min-width:336px;
max-width: 600px;
height: auto;
aspect-ratio: 3/2;
object-fit: cover;
border-radius: 0.5rem;
box-sizing: border-box;
cursor: pointer;
}
.video-wrapper {
aspect-ratio: 3 / 2;
border: 1px solid #ccc;
overflow: visible;
line-height: 0;
position: relative;
box-sizing: content-box;
border-radius: .5rem;
width:100%;
}
#bag .video-wrapper {
aspect-ratio: 16/9;
}
.media-copy {
padding: .75rem 1.5rem 1rem 1.5rem;
text-align: left;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.podcast-item .media-copy {
padding: 1rem 1.25rem 1rem 1.25rem;
}
.podcast-item .media-title {
margin: 0 0 .5rem 0;
}
.media-date {
font-size: 0.85rem;
color: light-dark(#555,#aaa);
margin: 0;
font-weight: bold;
}
.media-title {
font-size: 1.25rem;
margin: 0 0 .25rem 1.5rem;
line-height: 1.5rem;
font-kerning:normal;
text-wrap: pretty;
}
.squish {
letter-spacing:-.06rem;
}
.unsquish {
letter-spacing:.03rem;
}
.teens {
margin: 0 0 .25rem 2rem;
}
.twos {
margin: 0 0 .25rem 2.1rem;
}
.media-subtitle {
font-size: 0.95rem;
line-height: 1.3;
color: light-dark(#333, #ccc);
margin: 0;
}
.media-subtitle-mobile {
display: none;
font-size: 0.8rem;
line-height: 1.3;
color: light-dark(#333, #ccc);
margin: 0;
font-style: italic;
}
.media-subtitle-mobile::after {
content: ' ↻';
font-size: 1.1rem;
line-height: 1;
vertical-align: middle;
font-style: normal;
}
.description-wrapper {
/* max-height: 5rem;*/
overflow: hidden;
transition: max-height 0.75s ease-in-out;
}
.description-wrapper.expanded {
max-height: 15em;
}
.read-more-btn {
background-color: light-dark(#f0f0f0,#333);
font-size: 0.75rem;
color: light-dark(#000,#eee);
border: 1px solid light-dark(#aaa,#555);
padding: .1rem .3rem;
border-radius: .25rem;
align-self: flex-end;
margin-top: .25rem;
cursor: pointer;
transition: border 0.5s ease;
}
.read-more-btn:hover {
background-color: #e0e0e0;
border: 1px solid #000;
}
.indented-line {
display: inline-block;
margin-left: 0.6ch;
}
/* Videos */
.video-grid-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
width: 90%;
max-width: 66.66rem;
margin: 0 auto 3rem auto;
padding-top: calc(var(--nav-height) - 2rem);
}
.video-item, .video-item2 {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
border-radius: .5rem;
background: light-dark(#eee,#222);
border: 1px solid light-dark(#ccc, #444);
padding: 0;
margin: 0;
transition: opacity 0.4s ease, flex-basis 0.3s ease, margin 0.3s ease, max-height 0.3s ease;
}
.video-item2 {
background: none;
border:none;
cursor: pointer;
}
.video-item video, .video-item2 video {
width: 100%;
min-width:333px;
max-width: 600px;
height: auto;
aspect-ratio: 3/2;
object-fit: cover;
border-radius: 0.5rem;
box-sizing: border-box;
cursor: pointer;
transition: filter .5s ease-in-out;
}
#bagatelle video {
max-width: 720px;
aspect-ratio: 16/9;
}
.video-player {
width: 100%;
max-width: 600px;
padding: 0;
margin: 0;
border: 1px solid light-dark(#ccc, #444);
border-radius: .5rem;
}
.video-copy .media-date {
font-size: 1rem;
padding-bottom: .5rem;
}
.video-copy {
margin-top: 0.5rem;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
}
.video-title, .video-title2 {
font-size: 1rem;
font-weight: 500;
color: light-dark(#000,#eee);
line-height: 1.5rem;
}
.video-title {
font-size: 1.25rem;
font-style: italic;
text-wrap: balance;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.video-title2 {
margin-top: 0;
}
.video-title.fate {
letter-spacing: -.05rem;
text-rendering: optimizeLegibility;
font-size: 1.1rem;
}
.redBody .video-title2 {
margin-top: 1rem;
}
.vid {
margin: 2rem 0;
padding-bottom: 2.5rem;
margin-top: -2rem;
justify-content: center;
text-align: center;
font-weight: bold;
font-size: 1.5rem;
}
.vid:first-of-type {
margin-top: -1rem;
}
.videdge {
height:.15rem;
background-color: black;
width: 41%;
margin: -2rem auto 3rem auto;
display: block;
}
.video-controls, .pod-controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0.625rem;
background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
opacity: 0;
pointer-events: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 10;
transition: opacity 0.3s ease-in-out;
border-radius: .5rem;
}
.timeline-container {
width: 100%;
height: 1.5rem;
position: relative;
display: flex;
align-items: center;
}
.timeline {
position: relative;
width: 100%;
height: 0.25rem;
background: rgba(255,255,255,0.25);
cursor: pointer;
z-index: 0;
}
.timeline-buffered {
position: absolute;
left: 0;
top: 0;
height: 100%;
background: rgba(255,255,255,0.2);
width: 0%;
z-index: 1;
}
.timeline-played {
position: absolute;
left: 0;
top: 50%;
height: 50%;
background: white;
width: 0%;
z-index: 2;
box-shadow: 4px 4px 5px #000;
}
.timeline-thumb {
all: unset;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: white;
border: 1px solid #00474D;
pointer-events: auto;
z-index: 5;
}
.timeline-hover-line {
position: absolute;
top: 0;
width: 0.125rem;
height: 100%;
background: #fff;
opacity: 0;
pointer-events: none;
}
.timeline-hover-time {
position: absolute;
bottom: 100%;
transform: translateX(-50%);
padding: 0.125rem 0.375rem;
background: #000;
color: #fff;
font-size: 0.75rem;
white-space: nowrap;
border-radius: 0.1875rem;
opacity: 0;
pointer-events: none;
}
.controls-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.controls-left,
.controls-center,
.controls-right,
.pod-controls-left,
.pod-controls-center,
.pod-controls-right{
display: flex;
align-items: center;
gap: 0;
}
.pod-controls-center {
gap: 0.2rem;
margin: 0.25rem 0.5rem 0 0.5rem;
}
.current-time,
.duration,
.time-separator {
color: #fff;
font-size: 0.75rem;
}
.volume-slider {
-webkit-appearance: none;
width: 3rem;
height: 0.25rem;
background: transparent;
cursor: pointer;
padding: 0;
margin: 0 .25rem 0 -0.25rem;
}
.volume-slider::-webkit-slider-runnable-track {
height: 0.25rem;
background: rgba(255,255,255,0.3);
border-radius: 0.125rem;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: #fff;
margin-top: -0.25rem;
}
@keyframes vid-overlay {
0% {
opacity: 0;
animation-timing-function: cubic-bezier(0.05, 0, 0, 1);
transform: translate(-50%, -50%) scale(.2);
}
25% {
opacity: 1;
animation-timing-function: linear;
transform: translate(-50%, -50%) scale(1);
}
75% {
opacity: 1;
animation-timing-function: cubic-bezier(0.05, 0, 0, 1);
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(.2);
}
}
@keyframes fav-overlay {
0% {
opacity: 0;
animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
}
15% {
opacity: 1;
animation-timing-function: linear;
}
85% {
opacity: 1;
animation-timing-function: cubic-bezier(0.8, 0, 0.9, 0.1);
}
100% {
opacity: 0;
}
}
.play-overlay, .pause-overlay {
position: absolute;
opacity: 0;
pointer-events: none;
width:3rem;
height:3rem;
left:50%;
top:40%;
transform: translate(-50%,-50%);
border-radius: 50%;
background: rgba(255,255,255,.5);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url('data:image/svg+xml;utf8,');
}
.prodBody .play-overlay, .prodBody .pause-overlay {
width:4rem;
height:4rem;
}
.pause-overlay {
background-image: url('data:image/svg+xml;utf8,');
}
:fullscreen .play-overlay,
:fullscreen .pause-overlay,
:-webkit-full-screen .play-overlay,
:-webkit-full-screen .pause-overlay {
width: 2.75rem !important;
height: 2.75rem !important;
top:50%;
}
.run-overlay {
animation: vid-overlay 1000ms linear;
}
.main-video.pod-color2 {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.video-container:hover .main-video.pod-color2 {
filter: none;
}
.play-btn,
.pause-icon,
.rewind-btn,
.forward-btn,
.mute-btn,
.fullscreen-btn,
.pod-controls .play-btn,
.pod-controls .pause-icon,
.pod-controls .rewind-btn,
.pod-controls .forward-btn,
.pod-controls .mute-btn {
width: 1.75rem;
height: 1.75rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: none;
cursor: pointer;
opacity: 0.9;
padding: 0;
background-color: transparent;
border-radius: 0.25rem;
}
.play-btn .play-icon, .pod-controls .play-btn .play-icon {
display: block;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.play-btn .pause-icon, .pod-controls .pause-btn .pause-icon {
display: none;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.play-btn {
width: 1.75rem;
height: 1.75rem;
}
.pod-controls .play-btn,
.pod-controls .pause-icon,
.pod-controls .rewind-btn,
.pod-controls .forward-btn,
.pod-controls .mute-btn {
width: 1.5rem;
height: 1.5rem;
}
.rewind-btn {
background-image: url('data:image/svg+xml;utf8,');
}
.forward-btn {
background-image: url('data:image/svg+xml;utf8,');
}
.mute-btn {
width: 1.625rem;
height: 1.625rem;
margin-right: 0.5125rem;
background-image: url('data:image/svg+xml;utf8,');
}
.pod-controls .mute-btn {
padding: 0 1rem 0 0;
}
.fullscreen-btn {
background-image: url('data:image/svg+xml;utf8,');
}
.rewind-btn:hover,
.play-btn:hover,
.forward-btn:hover,
.mute-btn:hover,
.fullscreen-btn:hover {
background-color: rgba(255,255,255,0.23);
transition: background-color 0.5s ease-in-out;
}
:fullscreen .video-controls,
:-webkit-full-screen .video-controls {
font-size: 1.5em;
}
:fullscreen .controls-left button,
:fullscreen .controls-right button,
:-webkit-full-screen .controls-left button,
:-webkit-full-screen .controls-right button {
width: 2.625rem;
height: 2.625rem;
}
:fullscreen .volume-slider,
:-webkit-full-screen .volume-slider {
width: 4.5rem;
height: 0.375rem;
}
:fullscreen .volume-slider::-webkit-slider-thumb,
:-webkit-full-screen .volume-slider::-webkit-slider-thumb {
width: 1.125rem;
height: 1.125rem;
margin-top: -0.375rem;
}
:fullscreen .current-time,
:fullscreen .duration,
:fullscreen .time-separator,
:-webkit-full-screen .current-time,
:-webkit-full-screen .duration,
:-webkit-full-screen .time-separator {
font-size: 1.125rem;
}
/* Firefox */
:-moz-full-screen .video-controls {
font-size: 1.5em;
}
:-moz-full-screen .controls-left button,
:-moz-full-screen .controls-right button {
width: 2.625rem;
height: 2.625rem;
}
:-moz-full-screen .volume-slider {
width: 4.5rem;
height: 0.375rem;
}
:-moz-full-screen .volume-slider::-moz-range-thumb {
width: 1.125rem;
height: 1.125rem;
}
:-moz-full-screen .current-time,
:-moz-full-screen .duration,
:-moz-full-screen .time-separator {
font-size: 1.125rem;
}
/* Contact */
.contact {
margin: .5rem auto 0 auto;
}
.contactcont {
display: block;
margin: 0 auto;
width:700px;
}
.contactBody {
height: calc(100% - var(--nav-height));
}
#contactForm {
display: flex;
flex-direction: column;
margin:2rem auto 0 auto;
position: relative;
}
input:not([type="checkbox"]), textarea, select, button {
-webkit-appearance: none;
}
/*box-sizing: border-box;
height: 2rem;
margin-bottom: -.5rem;
font-family: 'Noto';
font-size: 1rem;
border-radius: 0;
padding: .25rem .5rem 0 .5rem;
border-width: 1px;
border-style: solid;
border-color: transparent transparent #777 transparent;
width: 100%;
background-color: light-dark(#fff, Canvas);
transition: background-color 250ms ease-in-out, border-color 250ms ease-in-out, transform 250ms ease-in-out, color 250ms ease-in-out;
outline: none;
cursor: pointer;
}*/
:root {
--input-bg: light-dark(#fff,Canvas);
--input-tertiary: light-dark(#ddd,#1d1d1d);
--input-quad: light-dark(#f3f3f3, #0a0a09);
--input-focus-bg: light-dark(#ccc,#333);
--input-focus-bg2: transparent;/*light-dark(rgba(255, 255, 255, 0.51), rgba(0, 0, 0, 0.51));*/
}
input.charcoal, textarea.charcoal, .fslightbox-slide-btn-container.fslightbox-slide-btn-container-next {
appearance:none !important;
-webkit-appearance: none !important;
box-sizing: border-box !important;
height: 2rem;
line-height: 2rem;
margin-bottom: -.5rem;
font-family: 'Noto';
font-size: 1rem;
border-radius: 0;
padding: .25rem .5rem 0 .5rem;
border-bottom: 1px solid #777;
border-color: transparent transparent #777 transparent;
border-left: none;
width: 100%;
outline: none;
cursor: pointer;
background-color: var(--input-bg2);
background-image: linear-gradient(
to right,
var(--input-bg) 0%,
var(--input-bg) 20%,
var(--input-bg) 20%,
var(--input-tertiary) 40%,
var(--input-tertiary) 40%,
var(--input-tertiary) 60%,
var(--input-tertiary) 60%,
var(--input-focus-bg) 80%,
var(--input-focus-bg) 80%,
var(--input-focus-bg) 100%
) !important;
background-size: 500% 100% !important;
background-position: 0% 0% !important;
transition: background-position 500ms ease-in-out, border-color 250ms ease-in-out !important;
}
.fslightbox-slide-btn-container.fslightbox-slide-btn-container-next, .fslightbox-slide-btn-container.fslightbox-slide-btn-container-previous {
background-color: transparent;
width: 100%;
border-bottom-color: transparent;
background-image: linear-gradient(
to right,
var(--input-focus-bg2) 0%,
var(--input-focus-bg2) 20%,
var(--input-focus-bg2) 20%,
var(--input-quad) 40%,
var(--input-quad) 40%,
var(--input-quad) 60%,
var(--input-quad) 60%,
var(--input-focus-bg2) 80%,
var(--input-focus-bg2) 80%,
var(--input-focus-bg2) 100%
) !important;
background-size: 500% 100% !important;
background-position: 0% 0% !important;
transition: background-position 500ms ease-in-out;
}
.fslightbox-slide-btn-container-previous {
background-image: linear-gradient(
to left,
var(--input-focus-bg2) 0%,
var(--input-focus-bg2) 20%,
var(--input-focus-bg2) 20%,
var(--input-quad) 40%,
var(--input-quad) 40%,
var(--input-quad) 60%,
var(--input-quad) 60%,
var(--input-focus-bg2) 80%,
var(--input-focus-bg2) 80%,
var(--input-focus-bg2) 100%
) !important;
background-position: 100% 0% !important;
}
input.charcoal:hover, textarea.charcoal:hover, .fslightbox-slide-btn-container.fslightbox-slide-btn-container-next:hover {
background-position: 50% 0% !important;
border-color: #bbb transparent #777 transparent;
}
.fslightbox-slide-btn-container.fslightbox-slide-btn-container-next:hover {
background-position: 50% 0% !important;
border-color: transparent;
}
.fslightbox-slide-btn-container.fslightbox-slide-btn-container-previous:hover {
background-position: -75% 0% !important;
}
input.charcoal:focus, textarea.charcoal:focus {
background-position: 100% 0% !important;
border-color: #bbb transparent #bbb transparent;
}
input:focus, textarea:focus, select:focus {
/* background-color: light-dark(#ddd, #222);*/
}
input {
transform: translateY(0);
}
label {
width: max-content;
cursor: pointer;
}
select {
appearance:none;
transition: transform 250ms ease-in-out, margin-bottom 250ms ease-in-out;
padding-left: 6.7rem;
height: 2rem;
border-color: #777 transparent #777 transparent;
margin-bottom: 2rem;
transform: translateY(-1.95rem);
color: light-dark(#000, #ccc);
}
select:focus {
padding-left: 6.7rem;
}
.custom-select {
display: block;
width: 100%;
transition: margin-bottom 250ms ease-in-out;
}
#select-list {
height: 0;
overflow: hidden;
margin: 0;
padding: 0;
padding-left: 9.9rem;
list-style: none;
transition: height 250ms ease-in-out, margin-top 250ms ease-in-out, opacity 250ms ease-in-out;
background: transparent;
opacity: 0;
border: 0px solid transparent;
transform: translateY(-3.85rem);
}
#select-list.open {
height: auto;
margin-top: .25rem;
opacity: 1;
}
#select-list li {
padding: 0 0.25rem 0.25rem 0.75rem;
cursor: pointer;
border-bottom: 1px solid light-dark(#eee, #777);
background: transparent;
height: 1.55rem;
background-image: linear-gradient(
to right,
var(--input-bg) 0%,
var(--input-bg) 20%,
var(--input-bg) 20%,
var(--input-tertiary) 40%,
var(--input-tertiary) 40%,
var(--input-tertiary) 60%,
var(--input-tertiary) 60%,
var(--input-focus-bg) 80%,
var(--input-focus-bg) 80%,
var(--input-focus-bg) 100%
) !important;
background-size: 500% 100% !important;
background-position: 0% 0% !important;
transition: background-position 250ms ease-in-out;
}
#select-list li:hover {
background-position: 100% 0% !important;
}
#other-input, label[for="other-input"] {
transition: opacity 250ms ease, transform 250ms ease-in-out;
}
input[type="other-input"], label[for="other-input"] {
display: none;
opacity: 0;
transition: transform 250ms ease-in-out, opacity 250ms ease-in-out, padding-left 250ms ease-in-out;
}
input[type="inquiry"] {
margin: 0;
padding-left: 10.4rem;
}
label[for="inquiry"] {
transform: translateY(-1.85rem);
display: inline-block;
}
input[type="inquiry"]:focus {
background: transparent;
}
input[type="inquiry"]:focus + label[for="inquiry"] {
transform: translateY(-1.85rem);
}
label[for="type"] {
transition: opacity 250ms ease-in-out;
}
input[type="other-input"]:focus + label[for="other-input"] {
transform: translateY(-0.45rem);
}
input[type="tel"], input[type="name"], input[type="email"], input[type="subject"] {
padding-left: 11.7rem;
transition: padding-left 250ms ease-in-out, transform 250ms ease-in-out background-position 500ms ease-in-out, border-color 250ms ease-in-out !important;
}
input[type="email"] {
padding-left: 3.5rem;
}
input[type="name"] {
padding-left: 3.8rem;
}
input[type="subject"] {
padding-left: 4.5rem;
}
input[type="tel"]:focus, input[type="name"]:focus, input[type="email"]:focus, input[type="subject"]:focus, input[type="other-input"]:focus {
padding-left: .5rem;
}
select:focus {
background-color: light-dark(#fff, Canvas);
}
input:focus + label {
transform: translateY(-3rem);
}
input[type="tel"]:focus + label {
transform: translateY(-3rem);
}
input[type="subject"] + label {
margin-bottom: .5rem;
}
label {
padding: 0;
margin-bottom: -0.6rem;
}
label[for="type"], label[for="message"] {
margin-top:.5rem;
margin-bottom: 0;
width:max-content;
height:1.75rem;
z-index: 10;
background: light-dark(#fff, Canvas);
transition: transform 250ms ease-in-out;
}
input + label {
transform: translateY(-1.35rem);
transition: transform 250ms ease-in-out;
}
textarea {
border-radius: .5rem;
border-color: #777 transparent #777 transparent !important;
border-top: 1px solid #777;
height: 9rem !important;
padding-top:.75rem;
margin-bottom: .5rem;
resize: vertical;
transition: transform 250ms ease-in-out;
}
/* Step 1 — shift inputs above the focused one */
#contactForm:has(input[type="email"]:focus) input[type="name"] {
transform: translateY(-1.65rem);
}
#contactForm:has(input[type="tel"]:focus) input[type="name"],
#contactForm:has(input[type="tel"]:focus) input[type="email"] {
transform: translateY(-1.65rem);
}
#contactForm:has(input[type="subject"]:focus) input[type="name"],
#contactForm:has(input[type="subject"]:focus) input[type="email"],
#contactForm:has(input[type="subject"]:focus) input[type="tel"] {
transform: translateY(-1.65rem);
}
/* Step 1b — shift labels above the focused one */
#contactForm:has(input[type="email"]:focus) input[type="name"] + label,
#contactForm:has(input[type="tel"]:focus) input[type="name"] + label,
#contactForm:has(input[type="tel"]:focus) input[type="email"] + label,
#contactForm:has(input[type="subject"]:focus) input[type="name"] + label,
#contactForm:has(input[type="subject"]:focus) input[type="email"] + label,
#contactForm:has(input[type="subject"]:focus) input[type="tel"] + label {
transform: translateY(-2.9rem);
}
/* Step 2 — keep the focused input's own floating label raised */
#contactForm input[type="name"]:focus + label,
#contactForm input[type="email"]:focus + label,
#contactForm input[type="tel"]:focus + label,
#contactForm input[type="subject"]:focus + label {
transform: translateY(-3rem);
}
/* Step 3 — everything after the focused input stays put */
#contactForm input[type="name"]:focus ~ *,
#contactForm input[type="email"]:focus ~ *,
#contactForm input[type="tel"]:focus ~ *,
#contactForm input[type="subject"]:focus ~ * {
transform: translateY(0);
}
#contactForm input[type="name"]:focus ~ input + label,
#contactForm input[type="email"]:focus ~ input + label,
#contactForm input[type="tel"]:focus ~ input + label,
#contactForm input[type="subject"]:focus ~ input + label {
transform: translateY(-1.15rem);
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 100px light-dark(#fff, Canvas) inset;
-webkit-text-fill-color: light-dark(#000, #fff);
border-color: transparent transparent #777 transparent !important;
}
input:-webkit-autofill:focus {
outline: none !important;
box-shadow: 0 0 0 100px light-dark(#fff, Canvas) inset !important;
}
#recaptcha {
margin-top: 1rem;
}
#recaptcha > div {
overflow: hidden;
border-radius: 3px;
background-color: Canvas;
}
iframe[title="reCAPTCHA"] {
margin: 3px;
border-radius: 3px;
}
html[style*="color-scheme: light"] iframe[title="reCAPTCHA"] {
margin: 0;
}
.submit-container {
display: flex;
align-items: center;
gap: 2rem;
margin-top: -0.5rem;
}
#submit {
width: 8rem;
height: 2.5rem;
display: inline-block;
font-family: 'Noto', "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-size: 1rem;
border: 1px solid #777;
background-color: transparent;
transition: background-color 250ms ease-in-out;
position: relative;
border-radius: .5rem;
cursor: pointer;
}
#submit:hover {
background-color: light-dark(#ddd, #333);
}
.statusMessage {
font-size: 1rem;
pointer-events: none;
transition: opacity 0.7s ease;
opacity: 0;
}
.statusOn {
opacity: 1;
}
.validation-tip {
position: absolute;
font-size: 1rem;
color: light-dark(#666, #bbb);
white-space: nowrap;
pointer-events: none;
z-index: 10000;
opacity: 0;
transition: opacity 0.6s ease-in-out;
}
.validation-tip[data-field="telephone"], .validation-tip[data-field="email"] {
background-color: light-dark(#fff, Canvas);
}
.validation-tip[data-field="name"] { top: 0.2rem; left: 3.8rem; }
.validation-tip[data-field="email"] { top: 2.8rem; left: 3.5rem; padding-right: 5rem; border-bottom: 1px solid #777;line-height: 1.8rem;height: 1.8rem;}
.validation-tip[data-field="telephone"] { top: 5.5rem; left: 11.7rem; border-bottom: 1px solid #777;line-height: 1.8rem;height: 1.8rem;}
.validation-tip[data-field="subject"] { top: 8.15rem; left: 4.5rem; }
.validation-tip[data-field="type"] { top: 14.1rem; left: 0.3rem; background: light-dark(#fff,Canvas); }
.validation-tip[data-field="message"] { top: 20.45rem; left: 0.5rem;}
/*
form:has(input:focus, textarea:focus) input.charcoal:not(:focus),
form:has(input:focus, textarea:focus) textarea.charcoal:not(:focus) {
background-position: 0% 0% !important;
transition: none !important;
}
form:has(input:focus, textarea:focus) .select-options li:hover {
background-color: transparent !important;
}
*/
h1 {
font-size: 3rem;
font-weight: 300;
margin-bottom: 2rem;
}
.prodBody {
height: auto;
}
.timeline-container2 {
display: flex;
align-items: center;
position: fixed;
top: calc(var(--nav-height) + 5rem + var(--wrapper-pad-bottom));
width: 90%;
max-width: 66.66rem;
z-index: 12;
background: light-dark(#fff, Canvas);
left: 50%;
transform: translateX(-50%);
padding-bottom: var(--wrapper-pad-bottom);
opacity: 0;
}
.timelineFix {
}
.timeline-arrow {
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
padding: 0 1rem;
margin-top: 0;
z-index: 13;
color: light-dark(#222, #ddd);
opacity: .8;
zoom: 1.5;
}
.timeline-arrow svg {
width: 1.5rem;
height: auto;
display: block;
}
.timelineholder {
position: fixed;
max-width: 66.66rem;
margin: 3rem auto;
}
.timeline-prod, .timelineo {
background-clip: content-box;
display: flex;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
position: relative;
background: light-dark(#fff,#222);
border: 1px solid light-dark(#000,#999);
border-radius: .5rem;
padding:1.25rem 1rem;
z-index: 13;
}
.timelineo {
position: relative;
border-radius: .5rem;
cursor: grab;
}
.timeline-prod {
border:none;
padding:0;
}
.timeline-prod::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: var(--line-color);
z-index: 11;
}
.ddown {
z-index: -1;
}
.timeline-prod::-webkit-scrollbar {
display: none;
}
.timeline-scrollbar {
display: block;
position: absolute;
bottom: 0.35rem;
left: 1rem;
right: 1rem;
height: 4px;
border-radius: 2px;
background: light-dark(rgba(0,0,0,0.12), rgba(255,255,255,0.15));
}
.timeline-scrollbar-thumb {
position: absolute;
top: 0;
height: 100%;
border-radius: 2px;
background: light-dark(rgba(0,0,0,0.35), rgba(255,255,255,0.45));
cursor: default;
touch-action: none;
}
.timeline-year {
display: inline-block;
padding: .2rem 1.25rem 0 1.25rem;
font-size: 1.5rem;
cursor: pointer;
position: relative;
z-index: 12;
background-color: var(--white);
transition: font-weight 0.3s ease;
}
.timeline-year.active {
font-weight: bold;
font-size:1.75rem;
margin-top:-.15rem;
opacity: 1;
}
.timeline-year.active::after {
content: '';
position: absolute;
bottom: -1rem;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid var(--black);
}
/* ── Active-year off-screen indicator ──────────────────────────────────── */
.tyi {
position: absolute;
bottom: calc(100% - var(--wrapper-pad-bottom) + 0.9rem);
display: flex;
align-items: center;
gap: 0.4rem;
font-size: .9rem;
padding: .1rem .3rem 0 .3rem;
line-height: 1.15rem;
border: 1px solid light-dark(#aaa, #666);
background-color: light-dark(#fff, #222);
border-radius: .5rem;
opacity: 0;
cursor: pointer;
transition: opacity 0.25s ease, border-color 350ms ease-in-out, background-color 350ms ease-in-out;
white-space: nowrap;
z-index: 14;
}
.tyi.tyi--visible {
opacity: 1;
}
.tyi.tyi--visible:hover {
border: 1px solid light-dark(#666, #ccc);
background-color: light-dark(#ddd, #000);
}
.tyi--left {
left: 4rem;
flex-direction: row;
}
.tyi--right {
right: 4rem;
flex-direction: row-reverse;
}
.tyi-arrow {
display: flex;
align-items: center;
}
.tyi-arrow svg {
width: 0.85rem;
height: auto;
display: block;
}
.timeline-year:not(.active) {
opacity: 0.2;
}
.timeline-year.active + .timeline-year + .timeline-year, .timeline-year:has(+ .timeline-year + .timeline-year.active) {
opacity: 0.4;
}
.timeline-year.active + .timeline-year, .timeline-year:has(+ .timeline-year.active) {
opacity: 0.6;
font-weight: 600;
}
.fslightboxci p {
color: light-dark(#666,#aaa);
}
.fslightboxc::after {
background: none !important;
}
.productions-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
justify-content: center;
gap: 2rem;
width: 90%;
max-width: 66.66rem;
margin: 0 auto;
}
.productions-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
width: 90%;
max-width: 66.66rem;
margin: 0 auto 1rem auto;
padding-top: calc(var(--nav-height) + 2rem + var(--wrapper-pad-bottom) * 2 + 3.5rem);
padding-bottom: 0;
}
.production-item {
opacity: 0;
display: flex;
order:2;
flex-direction: column;
align-items: center;
text-align: center;
border-radius: 0.5rem;
background: light-dark(#eee,#222);
border: 1px solid light-dark(#ddd,#222);
padding: 0;
box-sizing: border-box;
width: calc(33.33% - 2rem);
margin: 0;
}
body.page-loaded .production-item {
animation: fade-up ease-in-out 0.5s forwards;
}
body.page-loaded .timeline-container2 {
animation: fade-up2 ease-in-out 0.5s forwards;
}
.productions-container.no-fade .production-item {
animation: none;
opacity: 1;
}
.production-list {
display: contents;
}
.production-list:last-of-type {
margin-bottom: 0;
}
.production-image {
width: 100%;
height: auto;
max-width: 600px;
padding: 0;
margin: 0;
border-radius: .5rem;
overflow: hidden;
}
.trans {
/*opacity: .61;*/
background-color: black;
}
.podcast-item video[poster] {
object-fit:fill;
filter: grayscale(0);
}
.production-image img, .pod-placeholder {
display: block;
filter: grayscale(100%) sepia(0%);
transition: filter .5s ease-in-out;
/*min-width:336px;
max-width: 600px;*/
width: 100%;
height: auto;
aspect-ratio: 3/2;
object-fit: cover;
border-radius: 0.5rem;
box-sizing: border-box;
}
a.large-glass img {
object-position: top;
transform: scale(1.15);
transform-origin: right;
}
a.remnants img {
object-position: 31% 25%;
transform: scale(1.5);
transform-origin: left;
}
.video-wrapper video, .video-wrapper video[poster] {
width: 100%;
height: auto;
aspect-ratio: 3/2;
object-fit: fill;
border-radius: 0.5rem;
box-sizing: border-box;
}
.pod-placeholder, .video-wrapper video, .video-wrapper video[poster] {
position: absolute;
top: 0;
left: 0;
}
.pod-placeholder {
filter: grayscale(100%);
opacity: 1;
transition: filter .5s ease-in-out, opacity .5s ease-in-out;
margin-left: -.5px;
width: 100%;
height: 100%;
}
.pod-placeholder-dead {
display: none;
}
.pod-placeholder:nth-child(3n+1) {
margin-left: 0;
width: 100.8%;
}
.podcast-item video.pod-color2 {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.podcast-item .video-container:hover video.pod-color2 {
filter: none;
}
.podcast-item .podcast-item video[poster] {
filter: grayscale(1);
}
.podcast-item:hover .podcast-item video[poster], .video-item:hover .video-item video[poster] {
filter: grayscale(0);
}
.podcast-item.playing .pod-placeholder {
opacity: 0;
z-index: -1;
transition: opacity 0.5s ease-in-out;
}
.podcast-item.playing .pod-placeholder:hover {
opacity: 0;
filter: grayscale(100%) sepia(0%);
}
.production-image img:not(.trans):hover, .pod-placeholder:not(.trans):hover, .podcast-item:hover .pod-placeholder, .video-item:hover .pod-placeholder {
filter: grayscale(0%) sepia(0%);
}
.production-image img.tint:hover, .pod-placeholder.tint:hover {
filter: grayscale(0%) sepia(100%);
}
.production-image img.notint {
filter: grayscale(0%) sepia(0%);
}
.production-item:hover .production-image img:not(.trans) {
filter: grayscale(0%) sepia(0%);
}
.production-item:hover .production-image img.tint {
filter: grayscale(0%) sepia(100%);
}
.podcast-item .video-wrapper .pod-placeholder {
filter: grayscale(100%);
transition: filter 0.3s ease-in-out;
}
.podcast-item .video-wrapper:hover .pod-placeholder {
filter: grayscale(0%);
}
.pod-placeholder.pod-color {
filter: grayscale(0%) !important;
opacity: 1;
}
.pod-placeholder.pod-color2 {
filter: grayscale(0%) !important;
opacity: 1;
}
.production-copy {
margin-top: 0.75rem;
text-align: center;
padding-bottom: 1rem;
}
.production-title {
font-size: 1.25rem;
font-weight: 100;
color:light-dark(#111,#eee);
line-height: 1.75rem;
font-style: italic;
}
.production-title a {
color:light-dark(#111,#eee);
font-weight:600;
}
.production-title.short-title {
letter-spacing: -.04rem;
font-size: 1.15rem;
}
.production-copy p {
font-size: 1rem;
margin-bottom: 0;
margin-top: .5rem;
}
/* === Production Pages === */
.prod-set {
margin: 2rem auto 2rem auto;
line-height: 1.75rem;
padding: 0;
max-width: 65ch;
display: block;
opacity: 0;
box-sizing: border-box;
overflow-x: hidden;
padding-inline-start:0;
padding-inline-end:0;
}
.anim-ready .prod-set {
animation: fade-up ease-in-out 0.5s forwards;
}
.title-s .prod-set, .title-m .prod-set, .title-l .prod-set {
margin-top: calc(var(--nav-height) + 1.2rem);
}
.title-s.f .prod-set {
margin-top: calc(var(--nav-height) + 5.6rem);
}
.title-s.rod .prod-set {
margin-top: calc(var(--nav-height) + 2.9rem);
}
.title-s.g .prod-set {
margin-top: calc(var(--nav-height) + 3rem);
}
.has-sub .prod-set {
margin-top: calc(var(--nav-height) + 3.9rem);
}
.title-s.h .prod-set {
margin-top: calc(var(--nav-height) + 3.9rem);
}
.has-sub.j .prod-set {
margin-top: calc(var(--nav-height) + 3.4rem);
}
.has-sub.title-xl .prod-set {
margin-top: calc(var(--nav-height) + 2.5rem);
}
.title-l.dd .prod-set {
margin-top: calc(var(--nav-height) + .9rem);
}
.has-sub2 .prod-set {
padding-top: 11.5rem;
}
.has-sub3 .prod-set, .has-sub .title-xl .prod-set {
padding-top: 9rem;
}
.prod-content {
max-width: 65ch;
margin: 0 auto;
position: relative;
}
.prod-set hr {
margin:1.25rem 0;
}
.prod-fix {
top: 4rem;
position: fixed;
width: 100%;
background: light-dark(#fff,Canvas);
padding-left: 26rem;
height: 6.1rem;
z-index: 9998;
margin-top: 2rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
.redBody .page-title-wrapper hr {
width: 57%;
margin: .5rem 0 0 clamp(16.49rem, calc(1.60rem + 22vw), 21.6rem);
}
.aboutBody hr {
margin-top: 1rem;
width: 90%;
margin-left: 8.5rem;
}
.book-contents p {
margin-bottom:.5rem;
}
.book-contents ul li {
margin-left:-1rem;
}
.guest-letter {
margin-left: -1rem;
}
.guest-list1 {
margin-left: 5rem;
}
.guest-list2 {
margin-left: 3rem;
}
#prod-guests, #prod-reviews, #prod-deets {
scroll-margin-top: 16rem;
}
#prod-guests, #prod-reviews {
scroll-margin-top: 15rem;
}
#prod-photos, #prod-videos {
scroll-margin-top: 15.5rem;
}
.prod-title {
font-size: var(--title-font-size);
font-weight: bold;
margin-top: 1rem;
pointer-events: auto;
color: light-dark(#666, #999);
letter-spacing: -.05rem;
scroll-margin-top: 9rem;
letter-spacing: -.03rem;
margin-left: -4.5rem;
font-weight: bold;
}
.prod-reviews p:not(:last-of-type):not(:nth-last-of-type(3)):not(.review-subtitle):not(.review-author) {
margin-bottom: -.5rem;
}
.cast-indent {
margin-left: 2.8rem;
}
/*
.prod-title.prod-title-small {
font-size: 2rem;
}
*/
.redBody .fav-star {
display: none;
}
.prod-deets {
margin-top: 2.5rem;
}
.prod-deets p:not(.vids-title1) {
line-height: 1.35rem;
margin-bottom: 0;
margin-top: .75rem;
}
.prod-deets p:last-child {
margin-bottom: 2rem;
}
.prod-deets p:nth-child(3) {
text-indent: -4.2ch;
padding-left: 4.2ch;
}
.prod-deets p:nth-child(4) {
text-indent: -6ch;
padding-left: 6ch;
}
.prod-deets p:nth-child(5) {
text-indent: -14.6ch;
padding-left: 14.6ch;
}
.bag {
display: block;
padding: 0 0 0 9.6ch;
margin-top: -.5rem;
}
.prod-deets #cathy {
line-height: 1.5rem;
}
.prod-deets #cathy2 {
line-height: 1.5rem;
}
.prod-deets #tagline {
}
.prod-deets, .prod-guests, .prod-reviews {
max-width: 65ch;
}
.awardtab {
padding-left: 4em;
text-indent: -4em;
}
/*
.prod-title.prod-small {
font-size: 2rem;
}
*/
.prod-video-title {
font-weight: bold;
font-style: italic;
font-size: 1.5rem;
}
.guest-title1, .review-title1, .vids-title1, .photo-title1 {
font-size: 1.75rem;
/*margin-top: 1rem;*/
margin-bottom: 0rem;
}
.guest-inset {
width: 55ch;
margin: 0 auto;
}
.guest-inset {
width: 45ch;
margin: 0 auto;
}
.vids-title1 {
margin-top: 2rem;
}
.photofirst .prod-fix {
height: 1.6rem;
}
.photofirst .prod-set {
padding-top: 4.4rem;
}
.fslightboxci {
color: black !important;
font-weight: 500
}
.fslightbox-toolbar > button:nth-child(1), .fslightbox-toolbar > button:nth-child(2), .fslightbox-toolbar > button:nth-child(3), .fslightbox-toolbar > button:nth-child(4) {
display: none;
}
.prod-actreview {
display: block;
}
.prod-actreview p:last-of-type {
margin-bottom: 1.5rem;
}
.prod-menu {
margin-bottom: -1rem;
margin-top: -1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.prod-menu.aboutSub {
margin-left: clamp(16.49rem, calc(1.60rem + 22vw), 21.6rem);
margin-bottom: 0;
}
.prod-menu ul {
padding-inline-start:0;
list-style: none;
display: flex;
gap: .6rem;
font-size:1rem;
margin-bottom: 0;
}
.prod-menu ul li a {
color: light-dark(black,white);
position: relative;
font-weight: 400;
text-decoration: none;
display: inline-block;
}
.arrow {
display: none;
}
.prod-menu li:not(:first-child) a::before {
content: "\2044";
font-size: 1.5rem;
line-height: 1.5rem;
margin-right: .35rem;
display: inline-block;
transform: translate(-.1rem, 0.1rem) rotate(-11deg);
}
.prod-menu li:first-child a {
margin-top: 0.45rem;
}
.prod-menu li:nth-child(5)::after {
content: "";
display: block;
}
.prod-menu ul li a.nou, .podp2 a {
text-decoration: none;
}
.indexBody .prod-menu li a::after {
background-color: white;
}
.prod-menu li a::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 1px;
background-color: light-dark(black, white);
opacity: 0;
bottom: -2px;
will-change: transform;
backface-visibility: hidden;
transform: scaleX(0) translateZ(0);
-webkit-transition: transform 0.25s ease-out;
transition: transform 0.25s ease-out;
transition: opacity 300ms, transform 300ms;
pointer-events: none;
}
.prod-menu li a::after {
opacity: 1;
transform: scale(0);
transform-origin: center;
}
.prod-menu li a::after {
opacity: 0;
transform: scale(0);
transform-origin: center;
}
/*
.prod-menu li a:hover::after, .prod-menu li a:focus::after {
transform: scale(0.9) translateZ(0) translateX(0.3rem);
}
.prod-menu li:first-child a:hover::after {
transform: scale(1) translateZ(0) translateX(0rem);
}
.prod-menu.aboutSub li:nth-child(3) a:hover::after {
transform: scale(0.93) translateZ(0) translateX(0.2rem);
}
*/
.prod-vid {
margin: 1rem 0 1rem 0;
justify-content: center;
text-align: center;
font-weight: bold;
font-size: 1.5rem;
}
.prod-vid .video-item {
background: none;
border: none;
}
.prod-vid .video-container {
border-radius: .5rem;
cursor: pointer;
}
.guest-title2 {
margin-bottom: 0;
}
.book-contents {
margin-top:-2rem;
}
.book-contents ul li {
margin-bottom: .75rem;
}
.review-subtitle {
font-weight: bold;
font-size: 1.25rem;
margin-bottom: -.5rem;
}
.review-subsubtitle {
font-weight: normal;
font-style: italic;
font-size: 1rem;
margin-bottom: -.5rem;
}
.review-subtitle-small {
font-weight: bold;
font-size: 1rem;
margin-bottom: -.5rem;
}
.review-author {
margin-bottom:-1rem;
margin-top: -.5rem;
}
.review-author + p {
font-size: 75%;
}
.fre {
display: none;
}
.eng {
display: block;
}
.trans-buttons {
display: inline-block;
padding-top: .85rem;
}
.press .trans-buttons {
padding-top: 0;
}
.press .translation {
margin-top: -1.5rem;
}
.trans-eng, .trans-fre {
position: relative;
display: inline-block;
font-size: .75rem;
padding: .1rem .5rem 0 .5rem;
line-height: 1.15rem;
margin: .2rem .5rem -1rem 0;
border: 1px solid light-dark(#aaa,#666);
background-color: transparent;
border-radius: .5rem;
cursor: pointer;
transition: border-color 350ms ease-in-out, background-color 350ms ease-in-out;
}
.trans-eng:not(.active-lang):hover, .trans-fre:not(.active-lang):hover {
border: 1px solid light-dark(#666,#ccc);
background-color: light-dark(#eee,#333);
}
.trans-eng.active-lang, .trans-fre.active-lang {
cursor: default;
background-color: light-dark(#e6e6e6,#272727);
}
.trans-buttons + div, .trans-buttons + div + div {
margin-top: -1.5rem;
}
.fslightbox-full-dimension, .fslightbox-container {
background-color: light-dark(rgba(255, 255, 255, .51),rgba(0, 0, 0, .51)) !important;
}
.fslightboxs {
border-radius: .75rem;
}
.fslightbox-container {
background: none !important;
backdrop-filter: blur(7px);
transform: translateZ(0);
}
.fslightbox-fade-in-strong {
display: flex !important;
}
.fslightbox-slide-btn-container.fslightbox-slide-btn-container-next, .fslightbox-slide-btn-container.fslightbox-slide-btn-container-previous {
flex-grow:1;
height: 67%;
width: 11%;
display: flex;
align-items: center;
}
.fslightbox-slide-btn-container {
align-items: center;
width: 100%;
height: 100%;
}
.fslightbox-slide-btn {
background-color: light-dark(#aaa,#666) !important;
transition: background-color 250ms ease-in-out;
}
.fslightbox-slide-btn svg path {
fill:light-dark(#555,#bbb) !important;
transition: fill 250ms ease-in-out;
}
.fslightbox-slide-btn-container.fslightbox-slide-btn-container-next .fslightbox-slide-btn {
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.fslightbox-slide-btn-container.fslightbox-slide-btn-container-previous .fslightbox-slide-btn {
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
}
.fslightbox-slide-btn-container.fslightbox-slide-btn-container-next, .fslightbox-slide-btn-container-previous {
transition: background 750ms ease-in-out;
}
.fslightbox-slide-btn-container.fslightbox-slide-btn-container-next {
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
}
.fslightbox-slide-btn-container-previous {
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
}
.fslightbox-slide-btn-container.fslightbox-slide-btn-container-next:hover, .fslightbox-slide-btn-container-previous:hover {
/* background: light-dark(#fafafa,#0e0e0e);*/
}
.fslightbox-slide-btn-container.fslightbox-slide-btn-container-next:hover .fslightbox-slide-btn, .fslightbox-slide-btn-container.fslightbox-slide-btn-container-previous:hover .fslightbox-slide-btn {
background: light-dark(#111,#eee) !important;
}
.fslightbox-slide-btn-container.fslightbox-slide-btn-container-next:hover .fslightbox-slide-btn svg path, .fslightbox-slide-btn-container.fslightbox-slide-btn-container-previous:hover .fslightbox-slide-btn svg path {
fill: light-dark(#fff,#000) !important;
}
.fslightbox-slide-btn-container-next {
right:0;
justify-content: flex-end;
}
img.fslightboxs {
flex-shrink: 0;
}
.fslightbox-absoluted.fslightbox-full-dimension.fslightbox-flex-centered {
cursor: pointer;
}
button.fslightbox-toolbar-button.fslightbox-flex-centered[title="Close"] {
transition: background 250ms ease-in-out;
}
.fslightbox-container:has(.fslightboxswc.fslightbox-absoluted.fslightbox-full-dimension:hover):not(:has(img.fslightboxs:hover, .fslightbox-slide-btn-container-next:hover, .fslightbox-slide-btn-container-previous:hover)) button.fslightbox-toolbar-button.fslightbox-flex-centered[title="Close"] {
background: light-dark(#111,#eee) !important;
}
button.fslightbox-toolbar-button.fslightbox-flex-centered[title="Close"] svg {
transform: rotate(0);
transition: transform 250ms ease-in-out, fill 250ms ease-in-out;
}
.fslightbox-container:has(.fslightboxswc.fslightbox-absoluted.fslightbox-full-dimension:hover):not(:has(img.fslightboxs:hover, .fslightbox-slide-btn-container-next:hover, .fslightbox-slide-btn-container-previous:hover)) button.fslightbox-toolbar-button.fslightbox-flex-centered[title="Close"] svg {
transform: rotate(90deg);
}
.fslightbox-container:has(.fslightboxswc.fslightbox-absoluted.fslightbox-full-dimension:hover):not(:has(img.fslightboxs:hover, .fslightbox-slide-btn-container-next:hover, .fslightbox-slide-btn-container-previous:hover)) button.fslightbox-toolbar-button.fslightbox-flex-centered[title="Close"] svg path {
fill: light-dark(#fff,#000) !important;
}
.break {
flex-basis: 100%;
height: 0;
}
.break2 {
display: none;
}
.break3 {
display: inline;
padding-left: 0;
}
#gallery {
margin:1rem 0;
display: flex;
flex-direction: row;
flex-basis:50%;
gap:1rem;
flex-wrap: wrap;
justify-content:center;
}
#gallery img {
object-fit: cover;
width: 7.5rem;
height: 7.5rem;
padding:.5rem;
border:1px solid black;
border-radius: .5rem;
}
.fslightboxsn, [title="Enter fullscreen"] {
display: none !important;
}
.fslightbox-slide-btn {
padding: 19px !important;
}
.video-container:fullscreen video {
width: 100%;
height: 100%;
max-height: none;
max-width: none;
object-fit: contain;
}
.video-container {
position: relative;
width: 100%;
height: auto;
border-radius: 0.5rem;
overflow: visible;
background: #000;
}
.video-container:-webkit-full-screen video,
.video-container:-moz-full-screen video,
.video-container:-ms-fullscreen video {
width: 100%;
height: 100%;
max-height: none;
max-width: none;
object-fit: contain;
}
.redBody.hamlet .prod-set, .redBody.wit .prod-set {
margin-top: 150px !important;
}
.redBody.fate .prod-set {
margin-top: 140px !important;
}
/* === Responsive === */
@media screen and (max-width: 1540px) {
.artaud {
display: inline-block;
}
.redBody.blood .prod-set {
margin-top:185px !important;
}
/*
.title-l.dd .prod-set {
margin-top: calc(var(--nav-height) + 7.5rem);
}
*/
}
@media screen and (max-width: 1470px) {
.fate-s2 {
display: inline;
}
.fate-s {
display: none;
}
.redBody.fate .prod-set {
margin-top: 180px !important;
}
}
@media screen and (max-width: 1400px) {
.trans-eng, .trans-fre {
zoom: 1.1;
}
.cookie-bar {
width: 81%;
}
.has-sub.title-xl .prod-set {
margin-top: calc(var(--nav-height) + 5.5rem);
}
.tyi--left {
left: 3rem;
}
.tyi--right {
right: 3rem;
}
.contactcont {
/* width: 79%;*/
}
#modeTitle {
display: none;
}
#anchor-dl .tooltip {
display:block;
text-align: center;
line-height: 1rem;
}
.menu {
gap: 2rem;
padding: 0 1rem 0 3rem;
}
.modeToggle {
margin-left: 1rem;
}
.modeToggle::before {
left: 15%;
}
.page-title {
margin-left: clamp(12rem, calc(1.60rem + 16.5vw), 14.35rem);
}
.prod-subtitle {
margin-left: clamp(12rem, calc(1.60rem + 16.5vw), 14.35rem);
}
.redBody .page-title-wrapper hr {
width: 62%;
margin-left: clamp(12rem, calc(1.60rem + 16.5vw), 14.35rem);
}
.page-title.prod-title {
margin-left: -11.5rem;
}
.prod-menu {
margin-left: -13.5rem;
}
.prod-fix hr, .aboutBody hr {
width: 62%;
margin-left: -11.25rem;
}
.prod-menu.aboutSub {
margin-left: clamp(12rem, calc(1.60rem + 16.5vw), 14.35rem);
}
.video-grid-container {
width: 67%;
}
.vidBody .sorters {
margin-right: 5rem;
}
.about {
margin-top: 5.7rem;
}
#artistic {
scroll-margin-top: 11.5rem;
}
#liitoja {
scroll-margin-top: 15.5rem;
}
#ethos {
scroll-margin-top: 20rem;
}
/*
.production-image img,
.pod-placeholder,
.podcast-item video.pod-color2,
.podcast-item .video-wrapper .pod-placeholder,
.main-video.pod-color2,
.hillar2, .film-strip-container {
filter: grayscale(0%) sepia(0%) !important;
}
*/
}
@media screen and (max-width: 1240px) {
.prodBody .site-footer, .vidBody .site-footer, .podBody .site-footer {
position: relative;
bottom: auto;
margin-top: 2rem;
}
.contactBody .site-footer {
margin-top:2rem;
}
#select-list {
transform: translateY(-1.85rem);
padding-left: 4rem;
}
.cookie-bar {
width: 93%;
}
textarea.charcoal {
border-left: 1px solid #777;
}
.sort .tooltip, .no-favs-tip {
display: none;
}
.timeline-container2 {
/* position: relative;*/
}
.timeline-arrow {
position: absolute;
top: 40%;
transform: translateY(-50%);
z-index: 2;
zoom: 1.37;
}
.timeline-arrow--left {
left: -3rem;
}
.timeline-arrow--right {
right: -3.7rem;
}
.tyi {
bottom: calc(100% - var(--wrapper-pad-bottom) + 0.6rem);
}
.tyi--right {
right: -1rem;
}
.tyi--left {
left: -1rem;
}
#submit {
background-color: light-dark(#ddd, #333);
}
#submit p::after, .trans-eng::after, .trans-fre::after {
display: none;
}
#modeTitle {
display: inline-block;
transform: translate(0.5rem, -0.35rem);
}
.about p.obit-quote-auth {
margin-bottom: 1rem;
}
.about p.about-content-sub3 {
margin-left: 0;
}
.mobile-break {
display: none;
}
.contactcont {
/* width: 87%;*/
margin-top: .5rem;
}
.validation-tip[data-field="name"] { top: 0.3rem;}
.validation-tip[data-field="email"] { top: 2.75rem;}
.validation-tip[data-field="telephone"] { top: 5.45rem;}
html, body {
height: 100%;
margin-top: 0;
}
:root {
--nav-height: 4rem;
}
.pod-placeholder {
filter: grayscale(0) sepia(0);
}
.nav-container {
padding: 0;
align-items: center;
}
nav {
padding-bottom: .5rem;
box-shadow: none;
overflow-x: hidden;
}
.menulogo {
height: 3rem;
}
.hamburger {
display: block;
width: 3rem;
height: 3rem;
padding: 0.5rem;
z-index: 1001;
margin-right: 1.5rem;
}
.indexBody .menu a {
color:black;
}
.menu {
position: fixed;
top: 0;
right: 0;
height: 100dvh;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
background-color: rgba(255, 255, 255, 0.59);
backdrop-filter: blur(11px);
-webkit-backdrop-filter: blur(11px);
transform: translateZ(0);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-10px);
z-index: 1000;
gap: .5rem;
will-change: backdrop-filter;
}
.menu.show {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
left: -3rem;
backdrop-filter: blur(11px);
-webkit-backdrop-filter: blur(11px);
}
@media (hover: none) and (pointer: coarse) {
.menu {
background-color: rgba(255, 255, 255, 0.89);
}
}
.menu li {
list-style: none;
text-align: center;
justify-content: center;
width: auto;
}
.menu a {
/* pointer-events: none;*/
}
.menu li a {
font-size: 1.25rem;
font-weight: 600;
color: black;
text-decoration: none;
transition: color 0.3s ease;
line-height: 2;
/* display: inline-block;*/
}
.menu:not(.show) .menu a {
pointer-events: none;
}
.menu.show .menu a {
pointer-events: auto;
}
.mobile-socials-wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-top: 2rem;
padding-right: 0;
}
.socialsResp {
position: static;
display: flex;
justify-content: center;
gap: 2rem;
margin: 0;
opacity: 1;
pointer-events: auto;
}
.menu li a::after {
display: none;
}
.socialsResp {
height: auto;
margin-left: 0;
gap: 1.5rem;
padding-bottom: 1rem;
z-index: 1001;
}
.socialsResp img {
width: 35px;
height: 35px;
}
.modeToggle::before {
}
.aboutBody .page-title-wrapper,
.prodBody .page-title-wrapper,
.vidBody .page-title-wrapper {
padding-left: 1rem;
}
.redBody .page-title-wrapper {
top: calc(var(--nav-height) - 1rem);
padding-left: 1rem;
}
.page-title-wrapper {
position: relative;
left: 0;
width: 100%;
pointer-events: none;
padding: 1rem 0 var(--wrapper-pad-bottom) 1rem;
box-sizing: border-box;
}
.aboutBody .page-title-wrapper,
.prodBody .page-title-wrapper,
.vidBody .page-title-wrapper {
position: fixed;
top: calc(var(--nav-height) - 0.5rem);
}
.contactBody .page-title-wrapper {
top: var(--nav-height);
}
.pressBody .page-title-wrapper {
top: var(--nav-height);
/* overflow-x: clip;*/
}
/* Scrollable pages at 1240px */
.pressBody .page-title-wrapper,
.contactBody .page-title-wrapper,
.podBody .page-title-wrapper {
padding: 1rem 0 var(--wrapper-pad-bottom) 1rem;
}
.prod-menu.aboutSub {
margin-left: clamp(3.5rem, calc(-2.032rem + 0.688vw), 6.5rem);
}
.about-content {
position: relative;
margin: calc(var(--wrapper-pad-bottom) + 0rem) auto 0 auto;
}
.page-title {
margin-left: 6.5rem;
}
.pressBody .page-title, .contactBody .page-title, .aboutBody .page-title, .prodBody .page-title, .vidBody .page-title, .redBody .page-title, .podBody .page-title {
margin-left: clamp(3.5rem, calc(-2.032rem + 0.688vw), 6.5rem);
}
.redBody .prod-subtitle {
margin-left: clamp(3.5rem, calc(-2.032rem + 0.688vw), 6.5rem);
}
.redBody .page-title-wrapper hr {
width: 80%;
margin-left: clamp(3.5rem, calc(-2.032rem + 0.688vw), 6.5rem);
}
.page-title.prod-title {
margin-left: 6.5rem;
}
#artistic, #liitoja {
scroll-margin-top: 12.5rem;
}
#ethos {
margin-block-start:0;
scroll-margin-top: 13rem;
}
.about, .contact, .press {
font-size: 1.15rem;
max-width: 80%;
padding-inline: 1rem;
overflow-x: hidden;
}
.about {
margin-top: calc(var(--nav-height) + 5.3rem);
scroll-padding-top: 21rem;
}
.contactBody .contact {
margin-top: calc(var(--nav-height) - 1.7rem);
}
.pressBody .press {
margin-top: calc(var(--nav-height));
}
.about p {
margin: 1rem auto 0 auto;
}
.about p.about-content-sub {
margin-top: 1rem;
}
.hillar2 {
float: none;
display: block;
width: 100%;
height: auto;
margin:1rem auto 0 auto;
filter: invert(0);
}
.film-strip-container {
float: left;
width: 18rem;
margin-left: -11rem;
margin-bottom: .5rem;
margin-top: 0;
position: relative;
height: 26rem;
}
.film-strip-a, .film-strip-c {
display: none;
}
.film-strip-b {
left: 11rem;
top: 1.75rem;
z-index: 2;
transform: rotate(3.1deg);
}
.prodBody .timeline-container {
display: flex;
flex-direction: row;
align-items: center;
margin: 1rem 0 1rem 5%;
}
.production-item {
width: 380px;
}
.video-grid-container,
.timelineFix {
}
.timeline-container2 {
top: calc(var(--nav-height) + 4.5rem + var(--wrapper-pad-bottom));
padding: 0 0 var(--wrapper-pad-bottom) 1rem;
width: 73%;
}
.productions-container {
padding-top: calc(var(--nav-height) + 4.5rem + var(--wrapper-pad-bottom) * 2 + 5rem);
margin-top: 0;
padding-bottom: 2rem;
}
.timeline-arrow {
/* display: none;*/
}
.prodBody .timeline {
padding: .75rem .75rem;
}
.timelineo {
}
.timeline-year {
}
.timeline-year.active {
}
.timeline-year:not(.active) {
opacity: 0.3;
}
.timeline-year.active + .timeline-year + .timeline-year, .timeline-year:has(+ .timeline-year + .timeline-year.active) {
opacity: 0.6;
}
.timeline-year.active + .timeline-year, .timeline-year:has(+ .timeline-year.active) {
opacity: 0.8;
font-weight: 600;
}
.slide[alt="Slide 1"] {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 79.5% 34.5%;
transform: scale(1.25);
transform-origin: 72.5% 36.5%;
}
.slide[alt="Slide 2"] {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 43% 50%;
transform: scale(1.15);
transform-origin: 61% 17%;
}
.slide[alt="Slide 3"] {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.05);
object-position: 39% 45%;
transform-origin: 23% 47%;
}
.slide[alt="Slide 4"] {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.05);
object-position: 36% 49%;
transform-origin: 48% 82%;
}
#modeTitle {
margin-left: 0rem;
}
.poundQuote {
width: clamp(260px, 59vw, 750px);
font-size: clamp(1.15rem, 3.5vw, 1.63rem);
top: 66%;
padding-right: 1rem;
left: 31%;
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.75));
}
.poet {
font-size: clamp(0.85rem, 2.8vw, 1.35rem);
}
.title2 {
visibility: hidden;
}
.pq2 {
align-content: flex-end;
margin: 0 0 1rem 17rem;
}
.production-item:has(a) {
order:1;
}
.production-image img {
filter: none;
}
img {
max-width: 100%;
height: auto;
}
.hillar2,
.film-strip-a,
.film-strip-b,
.film-strip-c, {
max-width: 100%;
height: auto;
filter: grayscale(0);
}
.film-strip-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
filter: grayscale(0);
margin-top: -1rem;
}
/* Video/iframe responsiveness */
.video-item,
.pod-item,
iframe {
max-width: 100%;
height: auto;
}
.vidBody .sorters {
margin-right: 4rem;
}
.vid-container {
top: 9rem;
}
.page-title-wrapper {
pointer-events: auto;
}
.prod-menu, .prod-menu a {
pointer-events: auto;
}
.prod-menu {
margin-left: -2rem;
}
.prod-menu ul {
/* font-size: .85rem;*/
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.prod-menu ul::-webkit-scrollbar {
display: none;
}
.prod-menu ul li {
flex-shrink: 0;
white-space: nowrap;
}
.prod-fix {
top: 2.5rem;
left: 1.5rem;
position: fixed;
width: 100%;
background: white;
background-color: light-dark(#fff, Canvas);
opacity: 1;
padding-left: 1rem;
height: 6.1rem;
z-index: 37;
margin-top: 0;
padding-top: 2rem;
padding-bottom: 1rem;
pointer-events: auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.prod-fix hr {
margin-left: 0;
width: 88%;
}
.prod-set {
max-width: 80%;
margin-top:1rem;
}
.prod-set hr {
margin: 1.25rem 0 0 0;
}
.prod-deets {
margin: 6.5rem 0 0 0;
}
.prod-vids, .prod-photos, .prod-reviews, .prod-guests {
margin: 1rem 0 0 0;
}
.prod-guests .guest-title2, .prod-guests ul li, .prod-actreview p:not(.who), .prod-actreview .review-author {
font-size: 1.15rem;
}
.review-author + p {
font-size: 75%;
}
.prod-deets p:not(.vids-title1) {
font-size: 1.15rem;
line-height: 1.4rem;
margin: .5rem 0 .5rem 0;
}
.prod-vid {
margin: 1.5rem auto;
width: 95%;
}
#prod-deets, #prod-photos, #prod-videos {
scroll-margin-top: 11rem;
}
#prod-guests, #prod-reviews {
scroll-margin-top: 11.5rem;
}
.has-sub.redBody .prod-set {
margin-top: calc(var(--nav-height) + 5.7rem);
}
.title-s.h .prod-set {
margin-top: calc(var(--nav-height) + 5.7rem);
}
.title-s .prod-set, .title-m .prod-set, .title-l .prod-set {
margin-top: calc(var(--nav-height) + 3rem);
}
.has-sub.title-xl.redBody .prod-set {
margin-top: calc(var(--nav-height) + 10.5rem);
}
.title-s.f .prod-set {
margin-top: calc(var(--nav-height) + 7.5rem);
}
.title-s.g .prod-set {
margin-top: calc(var(--nav-height) + 11.3rem);
}
.title-l.dd .prod-set {
margin-top: calc(var(--nav-height) + 12.5rem);
}
}
@media screen and (max-width: 1053px) {
.title-l.e .prod-set {
margin-top: calc(var(--nav-height) + 12rem);
}
}
@media screen and (max-width: 1024px) {
.cookieBr {
display: inline;
}
.cookie-content p {
margin: 0 auto;
padding-left: .5rem;
}
.cookie-bar {
width: 79%;
}
.has-sub.redBody .prod-set {
margin-top: calc(var(--nav-height) + 5.7rem);
}
.title-s.h .prod-set {
margin-top: calc(var(--nav-height) + 5.7rem);
}
.prod-set hr.review-bar {
margin: 1.5rem auto 1.5rem auto !important;
}
.fate .mobile-break {
display: inline;
}
.tyi {
bottom: calc(100% - var(--wrapper-pad-bottom) - 0.5rem);
}
.timeline-arrow {
top: 50%;
}
.timeline-arrow--right {
right: -3rem;
}
.timeline-container2 {
padding: 1rem 0 var(--wrapper-pad-bottom) 0;
top: calc(var(--nav-height) + 4.5rem + var(--wrapper-pad-bottom) - 1rem);
width: 86%;
}
.prod-actreview p:last-of-type {
margin-bottom: 0;
}
.pressQuote {
margin: 1.5rem 0 0.5rem 0;
}
.press-content hr {
margin: 1.5rem auto 2rem auto;
width: 47%;
}
.pressQuote.pq2 {
margin: 1.5rem 0 0.5rem 16.4rem;
}
.press-content {
max-width: 64ch;
}
.about p.about-content-sub3 {
font-size: calc(var(--subtitle-font-size) - .5rem);
}
.validation-tip[data-field="email"] {
top: 2.8rem;
}
.validation-tip[data-field="subject"] {
top: 8.2rem;
}
.contactcont {
/* width: 100%;*/
}
.about-content {
margin: calc(var(--wrapper-pad-bottom) + .5rem) auto 0 auto;
}
.video-item video, .video-item2 video {
max-width: none;
min-width: 0;
}
.has-sub.title-xl.redBody .prod-set {
margin-top: calc(var(--nav-height) + 13rem);
}
/* 2-column production cards at tablet */
.production-item {
width: calc(50% - 2rem);
}
.title-s.f .prod-set {
margin-top: calc(var(--nav-height) + 7.5rem);
}
}
@media screen and (max-width: 900px) {
.redBody .page-title-wrapper hr {
width: 82.5%;
}
}
@media screen and (max-width: 860px) {
.daily {
display: inline-block;
}
}
@media screen and (max-width: 804px) {
.pressBody hr:has(+ .translation) {
margin-bottom: 3rem;
}
.cookie-bar {
width: 94%;
}
.title-s .prod-set, .title-m .prod-set, .title-l .prod-set {
margin-top: calc(var(--nav-height) + 2.8rem);
}
#gallery img {
width: 5.75rem;
height: 5.75rem;
}
.vid-container {
top: 8rem;
}
.timeline-year {
padding: .2rem .7rem 0 .7rem;
}
.tyi {
bottom: calc(100% - var(--wrapper-pad-bottom) - 0.7rem);
}
.timeline-arrow {
display: none;
}
.timeline-scrollbar {
display: block;
}
.pressQuote.pq2 {
margin-left: auto;
display: block;
width: fit-content;
}
.pressBody .page-title, .contactBody .page-title, .aboutBody .page-title, .prodBody .page-title, .vidBody .page-title, .redBody .page-title, .podBody .page-title {
margin-left: clamp(2.3rem, calc(-0.155rem + 0.455vw), 3.5rem);
}
.redBody .prod-subtitle {
margin-left: clamp(2.3rem, calc(-0.155rem + 0.455vw), 3.5rem);
}
.prod-menu.aboutSub {
margin-left: clamp(2.3rem, calc(-0.155rem + 0.455vw), 3.5rem);
}
.redBody .page-title-wrapper hr {
width: 84%;
margin-left: clamp(2.3rem, calc(-0.155rem + 0.455vw), 3.5rem);
}
.featured-quote {
margin:2.5rem auto;
}
.has-sub.redBody .prod-set {
margin-top: calc(var(--nav-height) + 5.2rem);
}
.title-s.h .prod-set {
margin-top: calc(var(--nav-height) + 5.2rem);
}
.has-sub.title-xl.redBody .prod-set {
margin-top: calc(var(--nav-height) + 12.5rem);
}
.title-s.f .prod-set {
margin-top: calc(var(--nav-height) + 6.8rem);
}
.title-s.g .prod-set {
margin-top: calc(var(--nav-height) + 11rem);
}
.title-l.dd .prod-set {
margin-top: calc(var(--nav-height) + 12rem);
}
}
@media screen and (max-width: 660px) {
.has-sub.redBody .prod-set {
margin-top: calc(var(--nav-height) + 4.9rem);
}
.title-s.h .prod-set {
margin-top: calc(var(--nav-height) + 4.9rem);
}
.orange1 {
display: inline-block;
}
.has-sub.redBody.j .prod-set {
margin-top: 17.5rem;
}
.redBody .page-title-wrapper.cb-active .page-title.title-l.rr + div {
margin-top: 0.2rem;
}
.title-s.f .prod-set {
margin-top: calc(var(--nav-height) + 6.4rem);
}
}
@media screen and (max-width: 574px) {
.tc-break3 {
display: inline;
}
}
/* Additional fixes for very small screens (iPhone 5/SE and similar) */
@media screen and (max-width: 540px) {
.cookie-modal {
width: 80%;
}
.modal-overlay {
justify-content: flex-start;
}
.btn-primary, .btn-secondary {
background: light-dark(rgba(255,255,255,.8),rgba(0,0,0,.8));
border: 1px solid #444;
padding: 0.3rem .6rem;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
transition: opacity 0.2s;
}
.cookieM {
display: none;
}
.prod-menu {
margin-top: -0.5rem;
}
.prod-menu ul {
font-size: clamp(0.8rem, 0.3454rem + 2.1818vw, 1rem);
}
.break {
display: none;
}
.break2 {
display: inline;
}
.redBody.f .break2 {
display: none;
}
.break3 {
display: block;
padding-left: 2.9rem;
}
.artaud2 {
display: inline-block;
}
.timeline-year {
padding: .2rem .7rem 0 .7rem;
}
.press hr + .translation {
margin-top:1rem;
}
.who {
margin-right: 0;
}
.press-content hr {
width: 67%;
}
.pressBody .pressQuote {
margin: 1.5rem 0 0.5rem 0.4rem;
}
#select-list li {
font-size: 1rem;
}
input + label {
transform: translateY(-1.25rem);
}
label {
padding-left: .25rem;
}
input[type="tel"] {
padding-left: 10.8rem;
}
input[type="inquiry"] {
padding-left: 9.6rem;
}
.pressQuote.pq2 {
margin: 1.5rem 0 0.5rem auto;
max-width: none;
width: 15rem;
}
.pressQuote,
.featured-quote {
font-size: 1rem;
}
.pressBody .page-title, .contactBody .page-title, .aboutBody .page-title, .prodBody .page-title, .vidBody .page-title, .redBody .page-title, .podBody .page-title {
margin-left: clamp(1rem, calc(-1.955rem + 0.788vw), 2.3rem);
}
.about-content .featured-quote2 {
margin: 1rem auto;
}
.about p.about-content-sub2 {
font-size: calc(var(--subtitle-font-size));
}
.about p.about-content-sub3 {
font-size: calc(var(--subtitle-font-size) - .25rem);
} .hamburger {
margin-right: 1.5rem;
}
.contactcont {
margin-top: 1rem;
width: 90%;
}
label {
font-size: 1rem;
}
.validation-tip[data-field="subject"] { top: 0.2rem; left: 3.9rem; }
.validation-tip[data-field="name"] { top: 0.2rem; left: 3.3rem; }
.validation-tip[data-field="telephone"] { top: 5.45rem; left: 10.3rem; border-bottom: 1px solid #777;line-height: 1.8rem;height: 1.8rem;}
.poundQuote {
left: 5%;
width: 90%;
padding-right: 0.75rem;
}
.page-title {
margin-left: clamp(0.25rem, -0.5rem + 3.7vw, 1.5rem);
}
.production-item, .production-item:has(a), .video-item, .video-item video, .video-item2 video {
max-width: none;
min-width: 0;
width: 87%;
}
.carousel-caption .video-title.fate {
font-size: 1.7rem;
}
.pod-placeholder {
visibility: visible;
filter: grayscale(0) sepia(0);
}
.video-item {
margin: 0 auto;
}
.aboutBody .page-title-wrapper,
.prodBody .page-title-wrapper,
.vidBody .page-title-wrapper,
.redBody .page-title-wrapper {
left: 0;
width: 100%;
}
.redBody .page-title-wrapper hr {
width: 86%;
margin-left: clamp(1rem, calc(-1.955rem + 0.788vw), 2.3rem);
}
.about {
margin-top: calc(var(--nav-height) + 4.3rem);
}
.redBody .prod-set {
padding-top: 0;
}
.title-s .prod-set, .title-m .prod-set, .title-l .prod-set {
margin-top: calc(var(--nav-height) + 2.5rem);
}
.has-sub.redBody .prod-set {
padding-top: 0;
margin-top: calc(var(--nav-height) + 4.6rem);
}
.title-s.h .prod-set {
margin-top: calc(var(--nav-height) + 4.6rem);
}
.has-sub2.redBody .prod-set {
padding-top: calc(var(--nav-height) + 6.8rem);
}
.redBody .prod-subtitle {
margin-left: clamp(1rem, calc(-1.955rem + 0.788vw), 2.3rem);
}
.prod-menu.aboutSub {
margin-left: clamp(1rem, calc(-1.955rem + 0.788vw), 2.3rem);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
position: relative;
}
.prod-menu.aboutSub::after {
content: '';
position: sticky;
right: 0;
top: 0;
width: 2rem;
height: 100%;
background: linear-gradient(to right, transparent, light-dark(#fff, Canvas));
pointer-events: none;
flex-shrink: 0;
}
.prod-menu.aboutSub ul {
margin-block-start:.5rem;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.prod-menu.aboutSub ul::-webkit-scrollbar {
display: none;
}
/* Productions: 1-column cards at small mobile */
.production-item {
width: 87%;
}
/* Timeline: scrollable with fade cue already active */
.timeline-container2 {
top: calc(var(--nav-height) + 3.5rem + var(--wrapper-pad-bottom));
padding-top: 1rem;
}
.productions-container {
padding-top: calc(var(--nav-height) + 3.5rem + var(--wrapper-pad-bottom) * 2 + 6.5rem);
}
:root {
--timeline-thumb-ratio: 1.70;
}
.has-sub.title-xl.redBody .prod-set {
margin-top: calc(var(--nav-height) + 11.5rem);
}
.title-s.f .prod-set {
margin-top: calc(var(--nav-height) + 6.2rem);
}
.title-s.g .prod-set {
margin-top: calc(var(--nav-height) + 10rem);
}
.title-l.dd .prod-set {
margin-top: calc(var(--nav-height) + 11rem);
}
.title-l.dd .prod-set {
margin-top: calc(var(--nav-height) + 12.5rem);
}
.redBody.dd .page-title-wrapper .page-title.title-l {
font-size: calc(var(--title-font-size) - 0.3rem);
}
.redBody:has(.k) .aboutSub {
margin-top: .25rem;
}
}
@media screen and (max-width: 480px) {
.prod-menu li:first-child a {
margin-top: 0.55rem;
}
.redBody .page-title-wrapper hr {
width: 86%;
margin: .25rem 0 0 clamp(1rem, calc(-1.955rem + 0.788vw), 2.3rem);
}
.prod-menu.aboutSub {
margin-top: -.5rem;
margin-bottom: .25rem;
}
.prod-menu ul {
gap: 0.65rem;
}
.fate-s2 {
display: none;
}
.prod-venue2 {
margin-top: 0;
}
.tc-tb1, .panel {
display: inline-block;
}
.prod-subtitle:not(.prod-venue2) {
line-height: 1;
}
.redBody.h .prod-subtitle {
margin-bottom: .5rem;
}
.title-s.f .prod-set {
margin-top: calc(var(--nav-height) + 7.5rem);
}
.title-s.h .prod-set {
margin-top: calc(var(--nav-height) + 5.8rem);
}
.title-l.dd .prod-set {
margin-top: calc(var(--nav-height) + 12.5rem);
}
.has-sub.redBody.j .prod-set {
margin-top: 16rem;
}
.redBody.title-xl .prod-subtitle {
font-size: calc(var(--title-font-size) * 0.53);
margin-top: .25rem;
}
}
@media screen and (max-width: 450px) {
.redBody.f .tc-break1 {
display: inline-block;
padding-left: 2.5rem;
}
.title-s .prod-set, .title-m .prod-set, .title-l .prod-set {
margin-top: calc(var(--nav-height) + 2.1rem);
}
.cookie-actions {
flex-direction: column;
gap:0;
margin: .25rem 0;
}
}
@media screen and (max-width: 444px) {
.has-sub.redBody.j .prod-set {
margin-top: 17.5rem;
}
}
@media screen and (max-width: 430px) {
.aboutBody .page-title {
font-size: 2.1rem;
}
.artaud4 {
display: inline;
}
.has-sub.redBody .prod-set {
margin-top: calc(var(--nav-height) + 5.5rem);
}
}
@media screen and (max-width: 425px) {
.title-l.dd .prod-set {
margin-top: calc(var(--nav-height) + 15rem);
}
.title-l.dd.e .prod-set {
margin-top: calc(var(--nav-height) + 12.5rem);
}
}
@media screen and (max-width: 400px) {
.prod-menu.aboutSub {
letter-spacing: -.03rem;
}
}
@media screen and (max-width: 375px) {
.cookie-modal {
width: 60%;
padding: 1rem;
}
.modal-overlay {
justify-content: center;
padding: 0;
}
.title-s.h .prod-set {
margin-top: calc(var(--nav-height) + 10.1rem);
}
.redBody.title-xl .title-xl .title-cb {
display: none;
}
.redBody.title-xl .title-xl .fate-s {
display: inline;
}
.tc-break1 {
display: inline-block;
padding-left: 2.5rem;
}
.prod-set hr {
width: 90%;
margin-left: 1rem;
}
.break3 {
padding-left: 2.5rem;
}
.dna-scene {
position: absolute;
left: 50%;
top:50%;
transform: translate(-180%,-80%)
}
.pq-break {
display: inline-block;
}
.pq-after-break {
margin-left: 3rem;
}
.pressBody .pressQuote {
margin: 1.5rem 0 0.5rem 0;
padding: 0 .5rem;
width: 90%;
}
.about .featured-quote2 {
font-size:87%;
padding: 0 1rem;
}
.about {
margin-top: calc(var(--nav-height) + 4rem);
}
#select-list li {
font-size: .8rem;
}
.pressBody .press, .contactBody .contact {
margin: calc(var(--nav-height) - 1rem) 0 0 0;
padding-left: 1rem;
width: 95%;
}
.pressBody .page-title, .contactBody .page-title, .aboutBody .page-title, .prodBody .page-title, .vidBody .page-title, .redBody .page-title, .podBody .page-title {
margin-left: clamp(0rem, calc(-5.818rem + 1.818vw), 1rem);
}
.redBody .prod-subtitle {
margin-left: clamp(0rem, calc(-5.818rem + 1.818vw), 1rem);
}
.prodBody .page-title-wrapper {
top: calc(var(--nav-height) - 1rem);
}
.who {
font-size: 1rem;
margin-right: 0;
}
.pressBody .press, .contactBody .contact {
margin: calc(var(--nav-height)) auto 0 auto;
padding-left: 1.75rem;
width: 90%;
}
.contactBody .contact {
padding-left: 1rem;
margin-top: calc(var(--nav-height) - .5rem);
}
.contactcont {
margin-top: 0;
}
#contactForm input[type="name"]:focus ~ *,
#contactForm input[type="email"]:focus ~ *,
#contactForm input[type="tel"]:focus ~ *,
#contactForm input[type="subject"]:focus ~ * {
transform: translateY(0);
}
#contactForm input[type="name"]:focus ~ input + label,
#contactForm input[type="email"]:focus ~ input + label,
#contactForm input[type="tel"]:focus ~ input + label,
#contactForm input[type="subject"]:focus ~ input + label {
transform: translateY(-1.15rem);
}
.about, .contact, .press {
font-size:1rem;
line-height:1.25rem;
}
.redBody .page-title-wrapper hr {
width: 95.7%;
margin: 0.5rem 0 0 clamp(0rem, calc(-5.818rem + 1.818vw), 1rem);
}
.prod-menu.aboutSub {
margin-left: clamp(0rem, calc(-5.818rem + 1.818vw), 1rem);
letter-spacing: 0;
}
.about p, .press p {
line-height: 1.5rem;
}
.about p.about-content-sub2 {
font-size: calc(var(--subtitle-font-size));
}
.about p.about-content-sub3 {
font-size: calc(var(--subtitle-font-size));
}
/* Production page navigation fixes */
.prod-menu ul {
font-size: 0.8rem;
gap: .58rem;
}
.prod-set {
max-width: 65ch;
margin:-1rem 0 0 0;
padding: 0 1rem;
}
.prod-reviews, .prod-guests, .prod-deets {
width: 90%;
margin: 0 auto;
}
.prod-title {
font-size: 1.75rem;
margin-left: -1rem;
}
.prod-fix {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
/* Mobile menu height optimization */
.menu li a {
font-size: 1.1rem;
line-height: 1.6;
}
.mobile-socials-wrapper {
margin-top: 1rem;
}
.socialsResp {
gap: 1.5rem;
}
.socialsResp img {
width: 35px;
height: 35px;
}
.timeline-container2 {
top: calc(var(--nav-height) + 3.5rem + var(--wrapper-pad-bottom) - 0.5rem);
}
.productions-container {
padding-top: calc(var(--nav-height) + 3.5rem + var(--wrapper-pad-bottom) * 2 + 5.5rem);
}
/* Timeline readability */
.timeline-year {
font-size: 1.3rem;
padding: .15rem .5rem 0 .5rem;
margin-top: -.2rem;
}
.timeline-year.active {
font-size: 1.5rem;
margin-top: -.2rem;
}
.tyi {
font-size: 0.9rem;
}
.tyi-arrow svg {
width: 0.6rem;
}
/* Page title responsiveness */
.page-title {
margin-top: .5rem;
}
.aboutBody .page-title {
font-size: 2.1rem;
}
.contactBody .page-title {
font-size: 1.9rem;
}
/* Contact form optimization */
.contact form input,
.contact form textarea,
.contact form select {
font-size: 0.8rem;
min-height: 1.2rem;
}
input {
padding-top: 0.7rem;
}
input + label {
transform: translateY(-0.85rem);
font-size: 0.8rem;
}
label[for="message"] {
margin-top: 1rem;
}
#contactForm:has(input[type="email"]:focus) input[type="name"],
#contactForm:has(input[type="tel"]:focus) input[type="name"],
#contactForm:has(input[type="tel"]:focus) input[type="email"],
#contactForm:has(input[type="subject"]:focus) input[type="name"],
#contactForm:has(input[type="subject"]:focus) input[type="email"],
#contactForm:has(input[type="subject"]:focus) input[type="tel"] {
transform: translateY(-2.05rem);
}
/* Step 1b — shift labels above the focused one */
#contactForm:has(input[type="email"]:focus) input[type="name"] + label,
#contactForm:has(input[type="tel"]:focus) input[type="name"] + label,
#contactForm:has(input[type="tel"]:focus) input[type="email"] + label,
#contactForm:has(input[type="subject"]:focus) input[type="name"] + label,
#contactForm:has(input[type="subject"]:focus) input[type="email"] + label,
#contactForm:has(input[type="subject"]:focus) input[type="tel"] + label {
transform: translateY(-2.9rem);
}
/* Step 2 — keep the focused input's own floating label raised */
#contactForm input[type="name"]:focus + label,
#contactForm input[type="email"]:focus + label,
#contactForm input[type="tel"]:focus + label,
#contactForm input[type="subject"]:focus + label {
transform: translateY(-2.6rem);
}
/* Step 3 — everything after the focused input stays put */
#contactForm input[type="name"]:focus ~ *,
#contactForm input[type="email"]:focus ~ *,
#contactForm input[type="tel"]:focus ~ *,
#contactForm input[type="subject"]:focus ~ * {
transform: translateY(0);
}
#contactForm input[type="name"]:focus ~ input + label,
#contactForm input[type="email"]:focus ~ input + label,
#contactForm input[type="tel"]:focus ~ input + label,
#contactForm input[type="subject"]:focus ~ input + label {
transform: translateY(-0.75rem);
}
input[type="tel"] {
padding-left: 8.5rem;
}
input[type="email"] {
padding-left: 2.7rem;
}
input[type="name"] {
padding-left: 2.9rem;
}
input[type="subject"] {
padding-left: 3.4rem;
line-height: 1rem;
}
#select-list {
padding-left: 1.5rem;
font-size: 0.8rem;
}
#select-list.open {
margin-top: 0.95rem;
}
label[for="inquiry"] {
transform: translateY(-1.45rem);
}
input[type="inquiry"] {
padding-left: 7.6rem;
padding-top: 0.4rem;
}
input[type="inquiry"]:focus + label[for="inquiry"] {
transform: translateY(-1.45rem);
}
#select-list li {
padding: 0.15rem 0.15rem 0.15rem 0.75rem;
height: 1.25rem;
}
.contactcont {
width: 100%;
}
.validation-tip {
font-size: .8rem;
}
.validation-tip[data-field="name"] { top: 0.8rem; left: 2.7rem; }
.validation-tip[data-field="email"] { top: 2.5rem;
left: 2.6rem;
padding-right: 5rem;
line-height: 1.8rem;
height: 1.6rem;}
.validation-tip[data-field="telephone"] { top: 4.8rem;
left: 4.1rem;
line-height: 1.8rem;
height: 1.45rem;
}
.validation-tip[data-field="subject"] {top: 7.2rem;
left: 3.2rem;}
.validation-tip[data-field="type"] { top: 11.9rem; left: 0.3rem; background: light-dark(#fff,Canvas); }
.validation-tip[data-field="message"] { top: 16.85rem; left: 0.5rem;}
#submit {
font-size: 0.8rem;
}
#recaptcha {
zoom:.85;
}
.vidBody .vid-container {
margin-top: 6.5rem;
}
.sorters {
margin-top: 0.5rem;
gap: 0.5rem;
}
.sortTitle {
font-weight: bold;
}
.current-time, .duration, .time-separator {
display: none;
}
.vidBody .page-title-wrapper {
flex-direction: column;
align-items: flex-start;
}
.vidBody .sorters {
margin-right: 0;
}
.pod-yt-btn {
margin-top: 1rem;
}
.prod-guests .guest-title2, .prod-guests ul li, .prod-actreview p, .prod-actreview .review-author {
font-size: 1rem;
line-height: 1.5rem;
}
.prod-deets p:not(.vids-title1) {
font-size: 1rem;
line-height: 1.3rem;
margin-bottom: 0;
}
.review-author + p {
font-size: 80%;
}
.has-sub.d.redBody .prod-set {
margin-top: 17rem;
}
.title-s .prod-set, .title-m .prod-set, .title-l .prod-set {
margin-top: calc(var(--nav-height) + 6.3rem);
}
#prod-videos, #prod-photos {
margin-left: 1rem;
}
.prod-video-title {
font-size: 1.25rem;
}
.divorce {
display: block;
}
.has-sub.z.redBody .prod-set {
margin-top: 16.5rem;
}
.title-s.f .prod-set {
margin-top: calc(var(--nav-height) + 11.7rem);
}
.title-s.g .prod-set {
margin-top: calc(var(--nav-height) + 11.5rem);
}
.title-l.dd .prod-set {
margin-top: calc(var(--nav-height) + 15rem);
}
.has-sub.redBody .prod-set {
margin-top: calc(var(--nav-height) + 7.9rem);
}
}
@media screen and (max-width: 320px) {
.orange2 {
display: inline-block;
}
.tc-break1 {
display: inline-block;
padding-left: 2.1rem;
}
.has-sub.redBody.j .prod-set {
margin-top: 19.5rem;
}
.title-l.dd .prod-set {
margin-top: calc(var(--nav-height) + 15.5rem);
}
.title-s.f .prod-set {
margin-top: calc(var(--nav-height) + 12.3rem);
}
.title-s.g .prod-set {
margin-top: calc(var(--nav-height) + 12rem);
}
.has-sub.redBody .prod-set {
margin-top: calc(var(--nav-height) + 8.3rem);
}
.has-sub.d.redBody .prod-set {
margin-top: 17.5rem;
}
.title-s .prod-set, .title-m .prod-set, .title-l .prod-set {
calc(var(--nav-height) + 6.9rem);
}
.break3 {
padding-left: 2.2rem;
}
.volume-slider {
display: none;
}
.about .featured-quote2 {
padding: 0 1rem;
}
.aboutBody .page-title {
font-size: 1.8rem;
}
.menu.show {
left: 0;
}
.pressBody .page-title,
.contactBody .page-title,
.aboutBody .page-title {
margin-left: 0rem;
}
.about p {
line-height: 1.4rem;
}
.validation-tip[data-field="telephone"] {
top: 4.8rem;
left: 0rem;
line-height: 1.8rem;
height: 1.45rem;
padding-right: 2rem;
}
.prod-menu ul {
font-size: 0.75rem;
gap: 0rem;
}
.prod-menu.aboutSub {
margin-left: 0;
}
.prod-menu.aboutSub::after {
display: none;
}
.prod-menu.aboutSub ul {
flex: 1;
}
.prod-menu.aboutSub:not(.qwe) ul li {
margin: 0 -0.2rem;
}
.prod-menu:not(.qwe) li:not(:first-child) a::before {
transform: translate(0.1rem, 0.1rem) rotate(-11deg);
}
.prod-menu.qwe li:not(:first-child) a::before {
transform: translate(0rem, 0.1rem) rotate(-11deg);
}
.prod-menu.qwe li:first-child {
margin-top: 0.1rem;
}
.prod-menu ul li a {
padding: 0.25rem;
position: relative;
}
/* Mobile menu - extra small optimization */
.menu li a {
font-size: 1rem;
line-height: 1.5;
}
.mobile-socials-wrapper {
margin-top: 0.75rem;
}
.socialsResp {
gap: 1rem;
}
.socialsResp img {
width: 32px;
height: 32px;
}
/* Make menu scrollable as failsafe */
.menu {
overflow-y: auto;
justify-content: flex-start;
padding: 7rem 0 2rem 0;
}
.timeline-year {
font-size: 1.2rem;
padding: .15rem 0.4rem 0 0.4rem;
margin-top: -.2rem;
}
.timeline-year.active {
font-size: 1.4rem;
margin-top: -0.2rem;
}
.tyi {
font-size: 0.85rem;
}
.contactBody .page-title {
font-size: 1.5rem;
line-height: 1.2;
}
.redBody .page-title {
font-size: 1.7rem;
}
.prod-menu.aboutSub {
margin-left: -0.2rem;
}
.about p.about-content-sub3 {
font-size: calc(var(--subtitle-font-size) - .25rem);
}
.redBody .page-title-wrapper hr {
width: 90.5%;
margin-left: 0rem;
}
.redBody .page-title-wrapper {
margin-left: 0;
padding-left: 1rem;
padding-bottom: 0;
}
.contactcont {
padding: 0;
}
.press-content .pressage {
font-size: 0.95rem;
line-height: 1.5;
}
input + label {
transform: translateY(-0.755rem);
}
.vidBody .vid-container {
margin-top: 5rem;
}
.sorters {
margin-top: 0.5rem;
gap: 0.5rem;
}
.sortTitle {
font-weight: bold;
}
.current-time, .duration, .time-separator {
display: none;
}
.vidBody .page-title-wrapper {
flex-direction: column;
align-items: flex-start;
}
.vidBody .sorters {
margin-right: 0;
}
.prod-guests .guest-title2, .prod-guests ul li, .prod-actreview p, .prod-actreview .review-author, .prod-deets p:not(.vids-title1) {
line-height: 1.4rem;
font-size: 0.89rem;
}
.about-content{
font-size: 89%;
}
.title-s.h .prod-set {
margin-top: calc(var(--nav-height) + 10.6rem);
}
}
html[style*="color-scheme: dark"] .menulogo, html[style*="color-scheme: dark"] .hamburger {
filter: invert(1);
}
html[style*="color-scheme: dark"] .menulogo.this, html[style*="color-scheme: dark"] .hamburger.this {
filter: invert(0);
}
html[style*="color-scheme: dark"] a:has(.menulogo.this) {
pointer-events: none;
}
html[style*="color-scheme: dark"] .production-title a, html[style*="color-scheme: dark"] .pressQuote {
font-weight:400;
}
/* YouTube catalog button — hidden on desktop, shown in carousel media query */
.pod-yt-btn {
display: none;
}
/* ============================================================
CAROUSEL — ≤1240px
============================================================ */
@media screen and (max-width: 1240px) {
.vidBody .sorters,
.podBody .sorters {
margin-right: 0;
}
.vidBody .page-title-wrapper,
.podBody .page-title-wrapper {
padding-left: 1rem;
padding-right: max(5%, calc((100% - 60rem) / 2));
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
box-sizing: border-box;
}
.vidBody .video-grid-container,
.podBody .podcast-grid-container {
visibility: hidden;
}
/* Shell matches the grid's original geometry exactly */
.carousel-shell {
position: relative;
width: 90%;
max-width: 66.66rem;
margin: 0 auto;
margin-top: clamp(1rem, calc(50vh - 22.5rem), 12rem);
overflow: hidden;
padding-bottom: 2.75rem;
box-sizing: border-box;
touch-action: pan-y;
}
/* Grid resets its own sizing now that shell handles it */
.carousel-shell .video-grid-container,
.carousel-shell .podcast-grid-container {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
grid-template-columns: none !important;
visibility: visible;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
gap: 0;
overflow: visible;
will-change: transform;
}
.carousel-shell .video-item,
.carousel-shell .podcast-item {
flex: 0 0 auto;
width: min(600px, 75vw);
min-width: 0;
max-width: none;
margin: 0 12px;
box-sizing: border-box;
cursor: pointer;
transition: opacity 0.25s ease;
}
.carousel-shell .video-container {
aspect-ratio: 3 / 2;
width: 100%;
overflow: hidden;
}
/* Override base min-width that causes overflow at narrow card widths */
.carousel-shell .podcast-item video {
min-width: 0;
max-width: none;
width: 100%;
}
.carousel-shell .pod-placeholder {
width: 100%;
margin-left: 0;
}
/* Restore video player controls to match base CSS at carousel breakpoint */
.carousel-shell .timeline-container {
width: 100%;
height: 1.5rem;
position: relative;
display: flex;
align-items: center;
margin: 0;
flex-direction: row;
}
.carousel-shell .timeline {
position: relative;
width: 100%;
height: 0.25rem;
padding: 0;
background: rgba(255,255,255,0.25);
cursor: pointer;
z-index: 0;
}
.carousel-shell .timeline-played {
position: absolute;
left: 0;
top: 50%;
height: 50%;
background: white;
z-index: 2;
}
.carousel-shell .timeline-thumb {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: white;
border: 1px solid #00474D;
pointer-events: auto;
z-index: 5;
}
/* Align titles to consistent top position across all cards */
.carousel-shell .video-item,
.carousel-shell .podcast-item {
display: flex;
flex-direction: column;
}
.carousel-shell .video-copy,
.carousel-shell .podcast-copy {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 0.65rem;
}
.carousel-shell .video-item:not(.carousel-active),
.carousel-shell .podcast-item:not(.carousel-active) {
opacity: 0.35;
pointer-events: none;
}
.carousel-shell .video-item.carousel-active,
.carousel-shell .podcast-item.carousel-active {
opacity: 1;
}
.carousel-arrow {
position: absolute;
top: 40%;
transform: translateY(-50%);
z-index: 10;
background: none;
border: none;
padding: 0 1rem;
cursor: pointer;
opacity: .8;
display: none;
}
.carousel-arrow.carousel-prev { left: 0; }
.carousel-arrow.carousel-next { right: 0; }
.carousel-arrow img {
display: block;
pointer-events: none;
}
.carousel-arrow {
filter: invert(1)
drop-shadow(1px 0 0 black)
drop-shadow(0 1px 0 black)
drop-shadow(-1px 0 0 black)
drop-shadow(0 -1px 0 black);
}
.carousel-dots {
position: absolute;
bottom: 0.5rem;
left: 0;
right: 0;
height: 2rem;
overflow: hidden;
pointer-events: all;
}
/* Inner strip: all dots in a row, shifted by JS to keep active centred */
.carousel-dots-strip {
display: flex;
align-items: center;
height: 100%;
width: max-content;
transition: transform 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
padding-top: .25rem;
}
.carousel-dot {
/* 12px dot + 4px margin each side = 20px step — must match DOT_STEP in JS */
width: 12px;
height: 12px;
border-radius: 50%;
background: light-dark(#bbb, #555);
flex-shrink: 0;
border: none;
padding: 0;
cursor: pointer;
margin: 0 4px;
transition: transform 0.25s ease, opacity 0.25s ease, background 0.2s;
position: relative;
/* Default: dist >= 5, locked at lowest level */
opacity: 0.53;
transform: scale(0.65);
}
.carousel-dot::after {
content: '';
position: absolute;
inset: -0.35rem;
}
.carousel-dot.dot-active {
background: light-dark(#333, #eee);
opacity: 1;
transform: scale(1.5);
}
/* dist 1–2 */
.carousel-dot.dot-d1 {
opacity: 0.80;
transform: scale(1.1);
}
/* dist 3–4 */
.carousel-dot.dot-d2 {
opacity: 0.64;
transform: scale(0.85);
}
/* Reduce podcast page copy so it doesn't crowd the carousel */
.podBody .podcasts {
margin: -2rem auto;
width: 100%;
max-width: none;
}
.podBody .pod-container {
align-items: center;
width: 100%;
}
.podBody .page-title-wrapper {
margin-top: var(--nav-height);
}
.podBody .podp2 {
font-size: clamp(0.85rem, 1.8vw, 1.25rem);
margin-bottom: 0.75rem;
}
.podBody .podp {
font-size: clamp(0.8rem, 1.6vw, 1.1rem);
margin-bottom: 0.4rem;
}
.podBody hr.review-bar {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
/* Hide page copy and hr on mobile; show YouTube button instead */
.pod-desktop-only {
display: none !important;
}
/* YouTube catalog button — matches sorter button height/style */
.pod-yt-btn {
display: inline-flex;
align-items: center;
height: 2rem;
padding: 0 0.5rem;
gap: 0.5rem;
border: 1px solid #000;
color: light-dark(#fff, Canvas);
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
filter: invert(1);
margin: .5rem 0 0 1rem;
}
.pod-yt-btn img {
display: block;
width: 22px;
height: 22px;
flex-shrink: 0;
filter: invert(0);
}
}
@media screen and (max-width: 375px) {
.vidBody .page-title-wrapper {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.vidBody .sorters {
margin-right: 0;
}
.podBody .podcasts {
margin: 0 auto; /*-6rem*/
}
.vid-container {
top: 1rem;
}
.carousel-shell {
padding-bottom: 5.5rem;
}
.carousel-arrow {
top: 13.5rem;
transform: none;
bottom: auto;
padding: 0;
}
.carousel-arrow.carousel-prev {
left: calc((100% - 65vw) / 2 + 12px);
padding-right: 0.5rem;
}
.carousel-arrow.carousel-next {
right: calc((100% - 65vw) / 2 + 12px);
padding-left: 0.5rem;
}
.carousel-dots {
bottom: 0rem;
}
.carousel-dots-strip {
padding-top: .5rem;
}
}
@media screen and (max-width:320px) {
.carousel-arrow.carousel-next {
top: 11.5rem;
}
.carousel-arrow.carousel-prev {
top: 11.5rem;
}
}
/* Carousel dots gap: redistribute saved line-height to bottom spacing.
Title is 1 line from 1240→804px (mobile-break hidden), saving ~1.5rem.
Increase shell padding-bottom by that amount. */
@media screen and (max-width: 1240px) and (min-width: 805px) {
.carousel-shell {
padding-bottom: 4.25rem;
}
}
@media screen and (max-width: 804px) {
.carousel-shell .video-item, .carousel-shell .podcast-item {
width: min(500px, 75vw);
}
}
@media screen and (max-width: 540px) {
.carousel-shell {
padding-bottom: 4.25rem;
}
.carousel-shell .video-item, .carousel-shell .podcast-item {
width: min(500px, 65vw);
}
.carousel-shell .video-controls, .carousel-shell .pod-controls {
padding-top: 0;
bottom: -0.4rem;
pointer-events: none !important;
}
.carousel-shell .video-controls .timeline-container,
.carousel-shell .pod-controls .timeline-container,
.carousel-shell .video-controls .controls-row,
.carousel-shell .pod-controls .controls-row {
pointer-events: auto;
}
.carousel-shell .timeline-container {
top: .75rem;
}
}
@media screen and (max-width: 420px) {
.pressQuote {
width: 70% !important;
}
}
@media screen and (max-width: 375px) {
.carousel-shell .video-item, .carousel-shell .podcast-item {
width: 90vw;
}
.pressBody .pressQuote {
width: 90% !important;
text-indent:0;
}
.pressQuote p {
margin: .5rem .5rem .5rem 0.5rem;
}
}
@media screen and (max-width: 805px) {
.carousel-shell {
margin-top: clamp(1rem, calc(50vh - 17rem), 8rem);
}
}
/* ── Landscape / short-viewport fix ────────────────────────────────
At portrait the viewport is tall; card fits naturally.
At landscape (≤1240px wide, ≤600px tall) the video at full 3:2 width
overflows — dots clip off screen, copy has no room.
Only the copy fonts are reduced here. Card widths, video aspect
ratio, and dot positioning are all untouched. Smaller copy means the
long-title card compresses enough for the dots to remain on screen. */
@media screen and (max-width: 1240px) and (max-height: 600px) {
.carousel-arrow {
top: 20vh;
}
.podcast-item .media-title {
margin: 0 0 .25rem 0;
}
.podcast-item .media-subtitle {
margin-bottom: .25rem;
}
.carousel-shell {
margin-top: 1rem;
padding-bottom: 2.5rem;
}
.carousel-shell .pod-container {
padding-top: 0.5rem;
}
.carousel-shell .video-item, .carousel-shell .podcast-item {
width: min(450px, 60vh);
}
.carousel-shell .podcast-item {
text-align: left;
padding-bottom: .5rem;
}
.carousel-shell .video-copy,
.carousel-shell .media-copy {
padding-top: 0.25rem;
padding-bottom: 0;
padding-left: 1rem;
margin-top: 0.25rem;
}
.carousel-shell .video-copy .media-date,
.carousel-shell .media-copy .media-date {
padding-bottom: 0.25rem;
}
.carousel-shell .video-title {
font-size: 1.1rem;
line-height: 1.15;
}
.carousel-shell .video-title2 {
font-size: 0.85rem;
line-height: 1.15;
}
.carousel-shell .media-date {
font-size: 0.75rem;
margin-top: 0.1rem;
}
.carousel-shell .media-title {
font-size: 1.1rem;
line-height: 1.15;
margin-left: 0;
}
.carousel-shell .media-subtitle {
display: none;
}
.carousel-shell .media-subtitle-mobile {
display: block;
font-size: 0.8rem;
line-height: 1.15;
}
}
/* ── Carousel caption (tall-screen mode) ───────────────────────── */
/* Hidden at desktop and short viewports — copy stays inside card */
.carousel-caption {
display: none;
}
/* At carousel breakpoint + enough height: move copy outside the shell */
@media screen and (max-width: 1240px) and (max-height: 700px) {
.carousel-shell .video-copy,
.carousel-shell .media-copy {
display: none !important;
}
.carousel-caption {
display: block;
max-width: 100%;
width: 90%;
margin: 0.5rem auto 0;
text-align: center;
}
.carousel-caption-inner {
opacity: 1;
transition: opacity 0.25s ease;
}
/* Font sizes ×1.5 relative to global values. The long-title card
("I Know and Feel That Fate is Harsh...") may reflow to 2–3 lines
at narrow widths — acceptable given available vertical space. */
.carousel-caption .video-title,
.carousel-caption .video-title2 {
font-size: 1.5rem;
line-height: 1.3;
}
.carousel-caption .video-title {
font-size: 1.875rem;
}
.carousel-caption .media-date {
font-size: 1.275rem;
margin-top: 0.5rem;
}
.carousel-caption .media-title {
font-size: 1.5rem;
line-height: 1.3;
margin-left: 0;
}
.carousel-caption .media-subtitle {
font-size: 1.15rem;
line-height: 1.3;
}
}
@media screen and (max-width: 375px) {
.carousel-caption {
margin: 2rem auto 0;
}
}
@media screen and (max-width: 375px) and (min-height: 667px) {
.vidBody .vid-container, .podBody .pod-container {
margin-top: 10.5rem;
}
.carousel-shell .video-item, .carousel-shell .podcast-item {
width: 89vw;
}
.carousel-dots {
bottom: 2rem;
}
}
/* ── Contact form hover cursor ───────────────────────────────────────────── */
@media (hover: hover) {
label::after {
content: '';
display: inline-block;
width: 0;
height: 1.3rem;
margin: 0 0 0.3rem 0.2rem;
border-left: 1.5px solid currentColor;
vertical-align: middle;
visibility: hidden;
}
input:hover + label::after,
label:not([for="message"]):hover::after {
visibility: visible;
animation: input-cursor-blink 1.06s linear infinite;
}
input:not(:placeholder-shown) + label::after {
visibility: hidden;
animation: none;
}
input[type="name"]:focus + label::after,
input[type="email"]:focus + label::after,
input[type="tel"]:focus + label::after,
input[type="subject"]:focus + label::after,
input[type="inquiry"]:focus + label::after {
visibility: hidden;
animation: none;
}
.textarea-wrap {
position: relative;
}
.textarea-wrap::after {
content: '';
position: absolute;
width: 0;
height: 0.9em;
border-left: 1.5px solid currentColor;
top: 0.3rem;
left: 0.9rem;
visibility: hidden;
pointer-events: none;
}
.textarea-wrap:hover::after {
visibility: visible;
animation: input-cursor-blink 1.06s linear infinite;
}
.textarea-wrap:has(textarea:focus)::after,
.textarea-wrap:has(textarea:not(:placeholder-shown))::after {
visibility: hidden;
animation: none;
}
@keyframes input-cursor-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
}
@media screen and (min-width: 1241px) and (max-width: 1400px) {
.video-grid-container {
width: 90%;
}
}
/* ── Landscape small-screen: hide by default ────────────────────────────── */
.nav-sort-flyout { display: none; }
.video-title-small-screen { display: none; }
.nav-pod-yt-btn { display: none; }
.nav-page-title { display: none; }
/* ── Landscape 375px and below ──────────────────────────────────────────── */
@media screen and (orientation: landscape) and (max-height: 600px) { /* and (max-width: 900px) */
:root { --nav-height: 2.75rem; }
.poundQuote {
top: 51%;
left: 7%;
width:80%;
}
.redBody .prod-menu {
padding-top: .75rem;
}
.indexBody nav {
padding-top: 5px;
}
.pressBody .press {
margin-top: calc(var(--nav-height) - 1rem);
}
.vidBody .page-title-wrapper .sorters {display: none;}
.vidBody {overflow-x: hidden}
.fade-left.page-title2 {
display: inline-block;
}
.vidBody .sorters {
display: none
}
.page-title, .prod-subtitle {
display: none;
}
.redBody .prod-set {
margin-top: 1rem !important;
}
.prod-deets p:not(.vids-title1) {
margin: .5rem 0 0rem 0;
}
/* .vidBody .nav-container > a:first-child, .podBody .nav-container > a:first-child { display: none; }*/
.vidBody .page-title-wrapper { display: none; }
.podBody .page-title-wrapper { display: none; }
/* .page-title-wrapper { display: none; }*/
.timeline-container2 {
top: calc(var(--nav-height) + 1.5rem + var(--wrapper-pad-bottom));
}
.productions-container {
padding-top: calc(var(--nav-height) + 1.5rem + var(--wrapper-pad-bottom) * 2 + 5rem);
}
.timeline-container2 {
padding: 1rem 1rem 0 1rem;
margin-top: -1rem;
}
.about {
margin-top: calc(var(--nav-height) + 1.3rem);
}
.menu li a {
line-height: 1.25;
}
.menu li.mobile-socials-wrapper {
padding-top: 0;
margin-top: 0;
}
.menulogo {
height: 1.8rem;
width: auto;
margin-top: -.5rem;
}
.vidBody .menulogo, .podBody .menulogo {
padding-top: 0;
}
.podBody .pod-controls-center {
display: none;
}
nav {
height: var(--nav-height);
min-height: unset;
padding-top: 0;
padding-bottom: 0;
}
.nav-container {
align-items: center;
padding-top: .6rem
}
.vidBody .nav-container {
align-items: center;
padding-top: .5rem
}
.hamburger {
display: flex;
align-items: center;
justify-content: center;
height: 2rem;
width: 2rem;
padding: 0rem 0 0 0;
margin-top: -0.5rem;
flex-shrink: 0;
}
.hamburger img {
width: 1.5rem;
height: 1.5rem;
}
.nav-sort-flyout {
display: flex;
align-items: center;
height: var(--nav-height);
position: relative;
margin-left: 0.75rem;
flex-shrink: 0;
margin: -0.5rem .5rem 0 auto;
}
.carousel-shell .timeline-container {
height: 0rem;
}
.nav-sort-trigger {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: .75rem;
padding: .1rem .5rem;
line-height: 1.15rem;
background: transparent;
border: 1px solid light-dark(#aaa, #666);
border-radius: .5rem;
color: light-dark(#000, #fff);
cursor: pointer;
white-space: nowrap;
transition: border-color 350ms ease-in-out, background-color 350ms ease-in-out;
z-index: 1001;
}
.nav-sort-trigger:hover {
border-color: light-dark(#666, #ccc);
background-color: light-dark(#eee, #333);
}
.nav-sort-trigger--open .nav-sort-arrow {
display: inline-block;
transform: rotate(90deg);
}
.nav-sort-buttons {
display: flex;
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%) translateX(100%);
flex-direction: row;
gap: 0.4rem;
align-items: center;
padding: 0 0 0 0.4rem;
z-index: 100;
opacity: 0;
visibility: hidden
transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
}
.nav-sort-buttons.nav-sort-open {
display: flex;
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(-100%);
}
.nav-sort-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: .75rem;
padding: .1rem .5rem;
line-height: 1.15rem;
height: auto;
width: auto;
min-width: 0;
white-space: nowrap;
background: transparent;
border: 1px solid light-dark(#aaa, #666);
border-radius: .5rem;
color: light-dark(#000, #fff);
cursor: pointer;
transition: border-color 350ms ease-in-out, background-color 350ms ease-in-out;
}
.nav-sort-btn:hover {
border-color: light-dark(#666, #ccc);
background-color: light-dark(#eee, #333);
}
.nav-sort-btn.sorter--active {
background: transparent;
border: 2px solid light-dark(#000, #fff);
cursor: auto;
box-sizing: border-box;
}
.nav-sort-btn svg {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.nav-sort-btn svg path, .nav-sort-btn svg line, .nav-sort-btn svg polyline {
fill: currentColor;
stroke: currentColor;
}
.nav-sort-btn.alpha svg line, .nav-sort-btn.alpha svg polyline {
fill: none;
}
.nav-sort-btn.chrono svg path {
stroke: none;
}
.nav-sort-btn.favs {
position: relative;
min-width: 5rem;
}
.nav-sort-btn.favs .favOn,
.nav-sort-btn.favs .favOff {
position: static;
transform: none;
font-size: 1rem;
color: light-dark(#000, #fff);
}
.vidBody .vid-container {
top: 3.75rem;
margin-top: 0;
}
.video-item[data-val="3"] .video-title2,
.video-item[data-val="5"] .video-title2,
.video-item[data-val="8"] .video-title2,
.video-item[data-val="9"] .video-title2,
.video-item[data-val="14"] .video-title2 { display: none; }
.carousel-shell .video-title {
font-size: 1rem;
}
.video-title-small-screen {
display: block;
font-size: 1rem;
font-style: italic;
line-height: 1.2;
}
.video-title-small-screen span {
font-size: 0.8rem;
font-style: normal;
}
.vidBody .carousel-shell {
margin-top: 0.5rem;
}
.podBody .nav-container { justify-content: space-between; }
.nav-pod-yt-btn {
display: inline-flex;
zoom: 0.7;
margin: 0.5rem 0 0 0.75rem;
}
.nav-page-title {
display: block;
font-size: 2rem;
font-weight: bold;
color: light-dark(#666, #999);
letter-spacing: -.05rem;
white-space: nowrap;
align-self: center;
margin-left: 1rem;
width: 86%;
}
.vidBody .nav-page-title {
width: 73%;
}
.vidBody .nav-sort-buttons {
display: flex;
opacity: 1;
visibility: hidden;
pointer-events: none;
left: auto;
right: 100%;
transform: translateY(-50%) translateX(110%);
transition: transform 0.35s ease-in-out, visibility 0s 0.35s;
padding-right: 0.5rem;
z-index: 1;
}
.vidBody .nav-sort-buttons.nav-sort-open {
display: flex;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(-50%) translateX(0%);
transition: transform 0.35s ease-in-out, visibility 0s 0s;
z-index: 1;
}
.nav-right-mask {
display: none;
}
.vidBody .nav-right-mask {
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 8rem;
background: light-dark(#fff, Canvas);
pointer-events: none;
z-index: 3;
}
.podBody .nav-pod-yt-btn {
margin: -.5rem 0.5rem 0 auto;
}
.podBody .vid-container,
.podBody .pod-container {
top: 4.5rem;
margin-top: 0;
}
.podBody .carousel-shell {
margin-top: 0.5rem;
}
}
/* ── Landscape 320px and below ──────────────────────────────────────────── */
@media screen and (orientation: landscape) and (max-height: 320px) and (max-width: 900px) {
.nav-sort-flyout { display: none; }
.vidBody .vid-container, .vidBody .sorters { display: none; }
.vidBody .page-title-wrapper { display: block; }
.podBody .page-title-wrapper { display: none; }
.vidBody .nav-page-title, .podBody .nav-page-title {
display: block;
font-size: 2rem;
font-weight: bold;
color: light-dark(#666, #999);
letter-spacing: -.05rem;
white-space: nowrap;
align-self: center;
margin-left: 1rem;
}
.vidBody .nav-page-title {
display: none;
}
.menu.show {
padding-top: 0.5rem;
}
.menu li a {
line-height: 1.15;
font-size: 1.15rem;
}
.podBody .nav-container { justify-content: space-between; }
.nav-pod-yt-btn {
display: inline-flex;
zoom: 0.7;
margin-bottom: 0;
margin-left: auto;
margin-right: 0.5rem;
}
#loading-overlay { display: none; }
.current-time, .duration, .time-separator { display: none; }
.vidBody::after {
content: 'Please rotate to portrait orientation to view videos';
display: flex;
align-items: center;
justify-content: center;
position: fixed;
inset: 0;
top: var(--nav-height);
font-size: 1.35rem;
font-weight: bold;
text-align: center;
padding: 1rem 2rem;
color: light-dark(#666, #999);
}
}
.redBody .page-title {
line-height: 1.15;
hyphens: none;
margin-bottom: -.2rem;
}
br.title-cb { display: none; }
.page-title-wrapper.cb-active br.title-cb { display: inline; }
.redBody .page-title.title-s { font-size: var(--title-font-size); }
.redBody .page-title.title-m { font-size: var(--title-font-size); }
.redBody .page-title.title-l { font-size: var(--title-font-size); }
.redBody.dd .page-title.title-l { line-height: 1; }
.redBody.dd .page-title.title-l::before { content: ""; display: block; margin-top: 0.65em; }
.redBody .page-title.title-xl { font-size: 2.2rem; }
@media screen and (max-width: 1920px) {
.redBody .page-title.title-s { font-size: var(--title-font-size); }
.redBody .page-title.title-m { font-size: var(--title-font-size); }
.redBody .page-title.title-l { font-size: var(--title-font-size); }
.redBody .page-title.title-xl { font-size: clamp(2rem, calc(1.462rem + 0.615vw), 2.2rem); }
}
@media screen and (max-width: 1400px) {
.redBody .page-title.title-s { font-size: var(--title-font-size); }
.redBody .page-title.title-m { font-size: var(--title-font-size); }
.redBody .page-title.title-l { font-size: var(--title-font-size); }
.redBody .page-title.title-xl { font-size: clamp(1.8rem, calc(0.25rem + 2vw), 2rem); }
}
@media screen and (max-width: 1240px) {
.redBody .page-title.title-s { font-size: var(--title-font-size); }
.redBody .page-title.title-m { font-size: var(--title-font-size); }
.redBody .page-title.title-l { font-size: var(--title-font-size); }
.redBody .page-title.title-xl { font-size: 1.8rem; }
}
@media screen and (max-width: 1024px) {
.redBody .page-title.title-s { font-size: var(--title-font-size); }
.redBody .page-title.title-m { font-size: var(--title-font-size); }
.redBody .page-title-wrapper.cb-active .page-title.title-l { font-size: var(--title-font-size); }
.redBody .page-title.title-l.r, .redBody .page-title.title-l.rr { font-size: calc(var(--title-font-size) - .5rem); }
.redBody .page-title-wrapper.cb-active .page-title.title-xl { font-size: clamp(2rem, calc(1.269rem + 1.455vw), 2.2rem); }
}
@media screen and (max-width: 804px) {
.redBody .page-title.title-s { font-size: var(--title-font-size); }
.redBody .page-title.title-m { font-size: var(--title-font-size); }
.redBody .page-title-wrapper.cb-active .page-title.title-l { font-size: var(--title-font-size); }
.redBody .page-title-wrapper.cb-active .page-title.title-l.rr { font-size: calc(var(--title-font-size) - .5rem); }
.redBody .page-title-wrapper.cb-active .page-title.title-l.rr + div { font-size: calc(var(--title-font-size) - 1rem); }
.redBody .page-title-wrapper.cb-active .page-title.title-xl { font-size: clamp(1.7rem, calc(1.086rem + 1.818vw), 2rem); }
}
@media screen and (max-width: 540px) {
.redBody .page-title.title-s { font-size: var(--title-font-size); }
.redBody .page-title.title-m { font-size: var(--title-font-size); }
.redBody .page-title-wrapper.cb-active .page-title.title-l { font-size: var(--title-font-size); }
.redBody .page-title-wrapper.cb-active .page-title.title-xl { font-size: clamp(1.6rem, calc(1.373rem + 0.97vw), 1.7rem); }
.redBody.dd .page-title-wrapper .page-title.title-l {
font-size: calc(var(--title-font-size) - 0.3rem);
}
}
@media screen and (max-width: 375px) {
.redBody .page-title.title-s { font-size: var(--title-font-size); }
.redBody.po .page-title.title-s { font-size: calc(var(--title-font-size) - .2rem); }
.redBody .page-title.title-m { font-size: var(--title-font-size); }
.redBody .page-title-wrapper.cb-active .page-title.title-l { font-size: var(--title-font-size); }
.redBody .page-title-wrapper.cb-active .page-title.title-xl { font-size: 1.6rem; }
.redBody.dd .page-title-wrapper .page-title.title-l {
font-size: calc(var(--title-font-size) - 0.3rem);
}
}
@media screen and (max-width: 320px) {
.redBody .page-title.title-s { font-size: var(--title-font-size); }
.redBody.po .page-title.title-s { font-size: calc(var(--title-font-size) - .3rem); }
.redBody .page-title.title-m { font-size: var(--title-font-size); }
.redBody .page-title-wrapper.cb-active .page-title.title-l { font-size: var(--title-font-size); }
.redBody .page-title-wrapper.cb-active .page-title.title-xl { font-size: 1.4rem; }
.redBody.dd .page-title-wrapper .page-title.title-l {
font-size: calc(var(--title-font-size) - 0.3rem);
}
}
.subtitle {
display: block;
font-size: 67%;
line-height: 1;
}
label {
padding-left: calc(var(--existing-padding, 0rem) + 0.35rem) !important;
}
input.charcoal,
textarea.charcoal {
text-indent: 0.35rem !important;
}
@media screen and (max-width: 375px) {
html body.redBody[class] .prod-set {
margin-top: 83px !important;
}
html body.redBody.wit .prod-set {
margin-top: 83px !important;
}
}
@media screen and (max-width: 360px) {
html body.redBody[class] .prod-set {
margin-top: 83px !important;
}
}
@media screen and (max-width: 320px) {
html body.redBody[class] .prod-set {
margin-top: 97px !important;
}
}
@media screen and (max-width: 1024px) {
.redBody .page-title,
.vidBody .page-title,
.podBody .page-title,
.page-title {
font-size: calc(var(--title-font-size) * 0.85) !important;
}
}
/*
@media (pointer: coarse) {
@supports (-webkit-line-clamp: 2) {
.video-controls .controls-row .controls-left {
margin-left:4em;
}
.video-controls .controls-row .controls-right {
margin-right:1em;
}
}
}
*/
/*
@supports (-webkit-touch-callout: none) {
@media (pointer: coarse) {
@supports (-webkit-line-clamp: 2) {
*/
@supports (-webkit-touch-callout: none) {
.play-btn, .pause-icon, .rewind-btn, .forward-btn, .mute-btn, .fullscreen-btn, .pod-controls .play-btn, .pod-controls .pause-icon, .pod-controls .rewind-btn, .pod-controls .forward-btn, .pod-controls .mute-btn {
width:1.25rem;height:1.25rem;
}
.video-controls .controls-row .controls-left {
margin-left: 0;
}
/* iPhone portrait — 320px — iPhone SE */
@media (orientation: portrait) and (min-width: 320px) and (max-width: 339px) {
.video-controls .controls-row .controls-left {
margin-left: 1em;
}
.video-controls .controls-row .controls-right {
margin-right: 1em;
}
.video-player {
margin-top:1.5em;
}
}
/* iPhone portrait — 360px — iPhone 12 mini / 13 mini */
@media (orientation: portrait) and (min-width: 340px) and (max-width: 367px) {
.podBody .podcasts {
margin-top: 2.5rem;
}
}
/* iPhone portrait — 375px — iPhone 6/7/8/SE 2/SE 3/X/XS/11 Pro */
@media (orientation: portrait) and (min-width: 368px) and (max-width: 382px) {
}
/* iPhone portrait — 390px — iPhone 12/13/14/16e */
@media (orientation: portrait) and (min-width: 383px) and (max-width: 391px) {
.video-controls .controls-row .controls-left {
margin-left: 0;
}
.video-controls .controls-row .controls-right {
margin-right: 0;
}
.play-btn, .pause-icon, .rewind-btn, .forward-btn, .mute-btn, .fullscreen-btn, .pod-controls .play-btn, .pod-controls .pause-icon, .pod-controls .rewind-btn, .pod-controls .forward-btn, .pod-controls .mute-btn {
width:1rem;height:1rem;
}
}
/* iPhone portrait — 393px — iPhone 14/15/16 */
@media (orientation: portrait) and (min-width: 392px) and (max-width: 397px) {
}
/* iPhone portrait — 402px — iPhone 17/17 Pro */
@media (orientation: portrait) and (min-width: 398px) and (max-width: 408px) {
}
/* iPhone portrait — 414px — iPhone 6/7/8 Plus/XR/XS Max/11/11 Pro Max */
@media (orientation: portrait) and (min-width: 409px) and (max-width: 416px) {
.video-controls .controls-row .controls-left {
margin-left: 0em;
}
.video-controls .controls-row .controls-right {
margin-right: 0;
}
.play-btn, .pause-icon, .rewind-btn, .forward-btn, .mute-btn, .fullscreen-btn, .pod-controls .play-btn, .pod-controls .pause-icon, .pod-controls .rewind-btn, .pod-controls .forward-btn, .pod-controls .mute-btn {
width:1rem;height:1rem;
}
}
/* iPhone portrait — 420px — iPhone Air */
@media (orientation: portrait) and (min-width: 417px) and (max-width: 424px) {
}
/* iPhone portrait — 428px — iPhone 12/13 Pro Max, 14 Plus */
@media (orientation: portrait) and (min-width: 425px) and (max-width: 429px) {
.video-controls .controls-row .controls-left {
margin-left: 0;
}
.video-controls .controls-row .controls-right {
margin-right: 0;
}
.play-btn, .pause-icon, .rewind-btn, .forward-btn, .mute-btn, .fullscreen-btn, .pod-controls .play-btn, .pod-controls .pause-icon, .pod-controls .rewind-btn, .pod-controls .forward-btn, .pod-controls .mute-btn {
width:1rem;height:1rem;
}
}
/* iPhone portrait — 430px — iPhone 14 Pro Max/15 Plus/15 Pro Max/16 Plus */
@media (orientation: portrait) and (min-width: 430px) and (max-width: 434px) {
}
/* iPhone portrait — 440px — iPhone 16 Pro Max/17 Pro Max */
@media (orientation: portrait) and (min-width: 435px) and (max-width: 743px) {
}
/* iPhone landscape — 568px */
@media (orientation: landscape) and (min-width: 568px) and (max-width: 617px) {
}
/* iPhone landscape — 667px */
@media (orientation: landscape) and (min-width: 618px) and (max-width: 701px) {
}
/* iPhone landscape — 736px */
@media (orientation: landscape) and (min-width: 702px) and (max-width: 757px) {
}
/* iPhone landscape — 780px */
@media (orientation: landscape) and (min-width: 758px) and (max-width: 795px) {
}
/* iPhone landscape — 812px */
@media (orientation: landscape) and (min-width: 796px) and (max-width: 827px) {
}
/* iPhone landscape — 844px */
@media (orientation: landscape) and (min-width: 828px) and (max-width: 847px) {
}
/* iPhone landscape — 852px */
@media (orientation: landscape) and (min-width: 848px) and (max-width: 862px) {
}
/* iPhone landscape — 874px */
@media (orientation: landscape) and (min-width: 863px) and (max-width: 884px) {
}
/* iPhone landscape — 896px */
@media (orientation: landscape) and (min-width: 885px) and (max-width: 903px) {
}
/* iPhone landscape — 912px */
@media (orientation: landscape) and (min-width: 904px) and (max-width: 918px) {
}
/* iPhone landscape — 926px */
@media (orientation: landscape) and (min-width: 919px) and (max-width: 928px) {
}
/* iPhone landscape — 932px */
@media (orientation: landscape) and (min-width: 929px) and (max-width: 943px) {
}
/* iPhone landscape — 956px */
@media (orientation: landscape) and (min-width: 944px) and (max-width: 1023px) {
}
/* iPad portrait — 744px — iPad mini */
@media (orientation: portrait) and (min-width: 744px) and (max-width: 755px) {
}
/* iPad portrait — 768px — iPad mini / iPad */
@media (orientation: portrait) and (min-width: 756px) and (max-width: 788px) {
}
/* iPad portrait — 810px — iPad 7/8/9 */
@media (orientation: portrait) and (min-width: 789px) and (max-width: 814px) {
}
/* iPad portrait — 820px — iPad 10/11 */
@media (orientation: portrait) and (min-width: 815px) and (max-width: 826px) {
}
/* iPad portrait — 834px — iPad Air / iPad Pro 11 */
@media (orientation: portrait) and (min-width: 827px) and (max-width: 928px) {
}
/* iPad portrait — 1024px — iPad Pro 12.9/13 */
@media (orientation: portrait) and (min-width: 929px) {
}
/* iPad landscape — 1024px */
@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1051px) {
}
/* iPad landscape — 1080px */
@media (orientation: landscape) and (min-width: 1052px) and (max-width: 1095px) {
}
/* iPad landscape — 1112px */
@media (orientation: landscape) and (min-width: 1096px) and (max-width: 1145px) {
}
/* iPad landscape — 1180px */
@media (orientation: landscape) and (min-width: 1146px) and (max-width: 1186px) {
}
/* iPad landscape — 1194px */
@media (orientation: landscape) and (min-width: 1187px) and (max-width: 1279px) {
}
/* iPad landscape — 1366px */
@media (orientation: landscape) and (min-width: 1280px) {
}
/*
}
}
*/
}