/* Fonts are loaded from the HTML (preconnect + link) for faster first paint. */
:root{
--black: #000000;
--near-black: #0A0A0A;
--white: #FFFFFF;
--grey: #ADADAD;
--grey-dim: #6E6E6E;
--line: rgba(255,255,255,0.12);
--line-soft: rgba(255,255,255,0.07);
--glow: rgba(255,255,255,0.08);
/* legacy aliases still used in inline styles */
--charcoal: var(--near-black);
--charcoal-deep: var(--black);
--sand: var(--white);
--sand-dim: var(--grey);
--olive: var(--grey);
--ember: var(--white);
--brass: var(--grey-dim);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
background:var(--black);
color:var(--white);
font-family:'Manrope', sans-serif;
font-weight:400;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
::selection{ background:var(--white); color:var(--black); }
/* slim monochrome scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--black); }
::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:99px; border:2px solid var(--black); }
::-webkit-scrollbar-thumb:hover{ background:#4a4a4a; }
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
h1,h2,h3{
font-family:'Fraunces', serif;
font-weight:500;
line-height:1.05;
letter-spacing:-0.02em;
text-wrap:balance;
}
a:focus-visible,
button:focus-visible{
outline:2px solid var(--white);
outline-offset:4px;
border-radius:4px;
}
.eyebrow{
font-family:'Manrope', sans-serif;
font-size:0.7rem;
font-weight:600;
letter-spacing:0.26em;
text-transform:uppercase;
color:var(--grey);
display:inline-flex;
align-items:center;
gap:0.7rem;
}
.eyebrow::before{
content:"";
width:26px;
height:1px;
background:var(--grey-dim);
}
/* ---------- Film grain over everything ---------- */
body::after{
content:"";
position:fixed;
inset:-50%;
width:200%;
height:200%;
pointer-events:none;
z-index:9999;
opacity:0.05;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation:grain 9s steps(6) infinite;
}
@keyframes grain{
0%,100%{ transform:translate(0,0); }
20%{ transform:translate(-3%,2%); }
40%{ transform:translate(2%,-3%); }
60%{ transform:translate(-2%,-2%); }
80%{ transform:translate(3%,3%); }
}
/* ---------- Layout shells ---------- */
.wrap{
max-width:1180px;
margin:0 auto;
padding:0 6vw;
}
/* ---------- Nav ---------- */
header.site-nav{
position:fixed;
top:0; left:0; right:0;
z-index:100;
display:flex;
align-items:center;
justify-content:space-between;
padding:1.4rem 6vw;
transition:padding 0.4s ease, background 0.4s ease, border-color 0.4s ease;
border-bottom:1px solid transparent;
}
header.site-nav.scrolled{
padding:0.85rem 6vw;
background:rgba(0,0,0,0.55);
-webkit-backdrop-filter:blur(14px);
backdrop-filter:blur(14px);
border-bottom-color:var(--line-soft);
}
.logo{
display:flex;
align-items:center;
transition:opacity 0.3s ease;
}
.logo:hover{ opacity:0.75; }
.logo img{
height:42px;
width:auto; /* the PNG itself is transparent, so it sits cleanly on any background */
}
.nav-links{
display:flex;
gap:2.4rem;
align-items:center;
}
.nav-links a{
position:relative;
font-size:0.74rem;
font-weight:600;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--grey);
padding-bottom:4px;
transition:color 0.3s ease;
}
.nav-links a::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height:1px;
background:var(--white);
transform:scaleX(0);
transform-origin:right;
transition:transform 0.35s cubic-bezier(.65,0,.35,1);
}
.nav-links a:hover{ color:var(--white); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a.current{ color:var(--white); }
.nav-links a.current::after{ transform:scaleX(1); }
/* ---------- Loop ring signature ---------- */
.loop-ring{
width:46px;
height:46px;
border-radius:50%;
border:1.5px dashed var(--grey-dim);
animation:spin 18s linear infinite;
}
@keyframes spin{
to{ transform:rotate(360deg); }
}
.loop-ring.small{ width:14px; height:14px; border-width:1px; }
.loop-marker{
display:inline-block;
width:9px;
height:9px;
border-radius:50%;
border:1px dashed var(--white);
margin-right:0.7rem;
flex-shrink:0;
transform:translateY(2px);
}
/* ---------- Hero ---------- */
.hero{
position:relative;
min-height:100vh;
min-height:100svh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
overflow:hidden;
padding:0 6vw;
background:
radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255,255,255,0.09), transparent 60%),
var(--black);
}
/* giant slow-turning dashed loop behind the headline */
.hero::before{
content:"";
position:absolute;
top:50%; left:50%;
width:min(78vw, 720px);
aspect-ratio:1;
margin:calc(min(78vw,720px) / -2);
border-radius:50%;
border:1px dashed rgba(255,255,255,0.10);
animation:spin 90s linear infinite;
pointer-events:none;
}
.hero-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0.20;
filter:grayscale(1) contrast(1.05) brightness(0.9);
-webkit-mask-image:linear-gradient(to bottom, #000 35%, transparent 100%);
mask-image:linear-gradient(to bottom, #000 35%, transparent 100%);
pointer-events:none;
animation:heroDrift 36s ease-in-out infinite alternate; /* slow cinematic drift */
}
@keyframes heroDrift{
from{ transform:scale(1); }
to{ transform:scale(1.07); }
}
.hero-content{
position:relative;
z-index:2;
max-width:820px;
}
.hero .eyebrow{
margin-bottom:2rem;
animation:rise 0.9s cubic-bezier(.2,.7,.3,1) both;
}
.hero .eyebrow::after{
content:"";
width:26px;
height:1px;
background:var(--grey-dim);
}
.hero h1{
font-size:clamp(2.6rem, 7vw, 5.4rem);
color:var(--white);
animation:rise 0.9s 0.12s cubic-bezier(.2,.7,.3,1) both;
}
.hero h1 em{
font-style:italic;
font-weight:400;
color:var(--grey);
}
.hero p.sub{
margin:1.8rem auto 2.8rem;
max-width:500px;
color:var(--grey);
font-size:1.05rem;
animation:rise 0.9s 0.24s cubic-bezier(.2,.7,.3,1) both;
}
.hero .btn{
animation:rise 0.9s 0.36s cubic-bezier(.2,.7,.3,1) both;
}
.hero-stats{
margin-top:2.6rem;
font-size:0.68rem;
font-weight:600;
letter-spacing:0.24em;
text-transform:uppercase;
color:var(--grey-dim);
animation:rise 0.9s 0.48s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise{
from{ opacity:0; transform:translateY(28px); }
to{ opacity:1; transform:translateY(0); }
}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;
align-items:center;
gap:0.6rem;
padding:1rem 2.3rem;
border:1px solid rgba(255,255,255,0.4);
border-radius:999px;
font-size:0.76rem;
font-weight:600;
letter-spacing:0.18em;
text-transform:uppercase;
transition:background 0.35s ease, color 0.35s ease, border-color 0.35s ease,
transform 0.35s ease, box-shadow 0.35s ease;
}
.btn::after{
content:"→";
font-size:0.9rem;
transition:transform 0.35s ease;
}
.btn:hover{
background:var(--white);
border-color:var(--white);
color:var(--black);
transform:translateY(-2px);
box-shadow:0 12px 40px -8px var(--glow);
}
.btn:hover::after{ transform:translateX(4px); }
.btn:active{ transform:translateY(0) scale(0.98); }
.btn.solid{
background:var(--white);
border-color:var(--white);
color:var(--black);
}
.btn.solid:hover{
background:transparent;
color:var(--white);
box-shadow:0 12px 40px -8px var(--glow);
}
/* ---------- Marquee divider ---------- */
.marquee{
position:relative;
overflow:hidden;
border-top:1px solid var(--line-soft);
border-bottom:1px solid var(--line-soft);
padding:1.3rem 0;
white-space:nowrap;
}
/* fade the scrolling text in and out at the screen edges */
.marquee::before,
.marquee::after{
content:"";
position:absolute;
top:0; bottom:0;
width:14vw;
z-index:2;
pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(to right, var(--black), transparent); }
.marquee::after{ right:0; background:linear-gradient(to left, var(--black), transparent); }
.marquee-track{
display:inline-flex;
animation:marquee 32s linear infinite;
}
.marquee-track span{
display:inline-flex;
align-items:center;
font-family:'Fraunces', serif;
font-style:italic;
font-size:1rem;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--grey-dim);
}
.marquee-track span::after{
content:"";
width:5px;
height:5px;
border-radius:50%;
border:1px dashed var(--grey-dim);
margin:0 1.6rem;
flex-shrink:0;
}
@keyframes marquee{
to{ transform:translateX(-50%); }
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
/* ---------- Scroll reveal ---------- */
.reveal{
opacity:0;
transform:translateY(32px);
transition:opacity 0.8s cubic-bezier(.2,.7,.3,1), transform 0.8s cubic-bezier(.2,.7,.3,1);
}
.reveal.in{
opacity:1;
transform:none;
}
/* ---------- Manifesto ---------- */
.manifesto{
padding:10rem 0 9rem;
}
.manifesto .wrap{
display:grid;
grid-template-columns:1fr 1.4fr;
gap:4rem;
align-items:start;
}
.manifesto h2{
font-size:clamp(2rem,3.4vw,2.8rem);
position:sticky;
top:8rem;
}
.manifesto h2::after{
content:"";
display:block;
width:56px;
height:1px;
background:var(--line);
margin-top:1.4rem;
}
.manifesto p{
font-size:1.15rem;
line-height:1.75;
color:var(--grey);
max-width:560px;
margin-bottom:1.6rem;
}
.manifesto p:last-child{ margin-bottom:0; }
.manifesto p em{
font-style:italic;
color:var(--white);
}
/* ---------- Volume teaser (homepage) ---------- */
.volume-teaser{
padding:0 0 8rem;
}
.teaser-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:2rem;
margin-bottom:2.4rem;
}
.teaser-head h2{
font-size:clamp(1.9rem, 3.4vw, 2.8rem);
margin-top:1.2rem;
}
.teaser-link{
position:relative;
flex-shrink:0;
font-size:0.74rem;
font-weight:600;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--grey);
padding-bottom:5px;
transition:color 0.3s ease;
}
.teaser-link::before{ content:"→ "; }
.teaser-link::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height:1px;
background:var(--white);
transform:scaleX(0);
transform-origin:right;
transition:transform 0.35s cubic-bezier(.65,0,.35,1);
}
.teaser-link:hover{ color:var(--white); }
.teaser-link:hover::after{ transform:scaleX(1); transform-origin:left; }
.teaser-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:1.4rem;
}
/* ---------- Footer ---------- */
footer{
border-top:1px solid var(--line-soft);
padding:4rem 6vw 2.6rem;
overflow:hidden;
}
.foot-mark{
font-family:'Fraunces', serif;
font-weight:500;
font-size:clamp(2.6rem, 13vw, 11rem);
line-height:0.9;
text-align:center;
letter-spacing:0.04em;
color:transparent;
-webkit-text-stroke:1px rgba(255,255,255,0.12);
user-select:none;
white-space:nowrap;
}
@supports not (-webkit-text-stroke:1px black){
.foot-mark{ color:rgba(255,255,255,0.06); }
}
.foot-row{
margin-top:3rem;
display:flex;
justify-content:space-between;
align-items:center;
font-size:0.72rem;
font-weight:600;
color:var(--grey-dim);
letter-spacing:0.16em;
text-transform:uppercase;
}
/* ---------- Archive page ---------- */
.archive-head{
padding:12rem 0 3rem;
background:radial-gradient(ellipse 70% 60% at 30% 0%, rgba(255,255,255,0.06), transparent 60%);
}
.archive-head h1{
font-size:clamp(2.2rem, 4.8vw, 3.6rem);
max-width:680px;
margin-top:1.4rem;
}
.archive-head p{
margin-top:1.4rem;
color:var(--grey);
max-width:560px;
}
.archive-head .event-meta{
margin-top:1.6rem;
font-size:0.78rem;
font-weight:600;
letter-spacing:0.2em;
text-transform:uppercase;
color:var(--white);
}
/* ---------- Program strip ---------- */
.program{
padding:3.5rem 0 1rem;
}
.program ul{
list-style:none;
margin-top:1.8rem;
border-top:1px solid var(--line-soft);
}
.program li{
display:flex;
align-items:baseline;
gap:2rem;
padding:1rem 0;
border-bottom:1px solid var(--line-soft);
}
.program .time{
font-size:0.74rem;
font-weight:600;
letter-spacing:0.16em;
color:var(--grey-dim);
min-width:72px;
}
.program .act{
font-family:'Fraunces', serif;
font-style:italic;
font-size:1.1rem;
color:var(--white);
}
/* ---------- Gallery ---------- */
.gallery{
padding:4rem 0 7rem;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:1.4rem;
}
.card{
position:relative;
border-radius:16px;
overflow:hidden;
aspect-ratio:4/5;
background:linear-gradient(155deg, #1C1C1C, #0A0A0A 60%);
border:1px solid var(--line-soft);
cursor:pointer;
transition:transform 0.5s cubic-bezier(.2,.7,.3,1), border-color 0.5s ease, box-shadow 0.5s ease;
}
.card:hover{
transform:translateY(-6px);
border-color:rgba(255,255,255,0.25);
box-shadow:0 24px 60px -20px rgba(255,255,255,0.10);
}
/* photos & videos — monochrome by default, full colour on hover or while playing */
.card .photo{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(1) contrast(1.06);
transition:transform 0.6s cubic-bezier(.2,.7,.3,1), filter 0.6s ease;
}
.card:hover .photo{
transform:scale(1.04);
filter:grayscale(0) contrast(1);
}
.card video.photo.playing{
transform:none;
filter:grayscale(0) contrast(1);
}
.card video.photo{ background:#000; }
.testimonial{
padding:6rem 0 9rem;
border-top:1px solid var(--line-soft);
text-align:center;
position:relative;
}
.testimonial::before{
content:"\201C";
display:block;
font-family:'Fraunces', serif;
font-size:5rem;
line-height:0.5;
color:var(--grey-dim);
margin-bottom:2rem;
}
.testimonial blockquote{
font-family:'Fraunces', serif;
font-style:italic;
font-size:clamp(1.4rem, 2.8vw, 2.1rem);
line-height:1.4;
max-width:760px;
margin:0 auto 1.6rem;
color:var(--white);
padding:0 6vw;
}
.testimonial cite{
font-style:normal;
font-size:0.74rem;
font-weight:600;
letter-spacing:0.2em;
text-transform:uppercase;
color:var(--grey-dim);
}
/* ---------- Lightbox ---------- */
.lightbox{
position:fixed;
inset:0;
z-index:1000;
background:rgba(0,0,0,0.96);
display:none;
align-items:center;
justify-content:center;
}
.lightbox.open{ display:flex; }
.lightbox img,
.lightbox video{
max-width:92vw;
max-height:84vh;
object-fit:contain;
border-radius:6px;
}
.lightbox video{
display:none;
background:#000;
min-width:min(320px, 92vw);
}
.lightbox button{
position:absolute;
width:46px;
height:46px;
border-radius:50%;
border:1px solid var(--line);
background:rgba(0,0,0,0.5);
color:var(--white);
font-size:1.1rem;
line-height:1;
cursor:pointer;
transition:border-color 0.3s ease, background 0.3s ease;
}
.lightbox button:hover{ border-color:var(--white); background:rgba(255,255,255,0.08); }
.lb-close{ top:1.4rem; right:1.4rem; font-size:1.4rem; }
.lb-prev{ left:1.4rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1.4rem; top:50%; transform:translateY(-50%); }
.lb-count{
position:absolute;
bottom:1.6rem;
left:50%;
transform:translateX(-50%);
font-size:0.72rem;
font-weight:600;
letter-spacing:0.2em;
color:var(--grey);
}
.gallery .card:has(img){ cursor:zoom-in; }
@media (max-width: 860px){
/* keep arrows on touch screens (swipe also works), just smaller and tucked in */
.lightbox button{ width:38px; height:38px; font-size:0.95rem; }
.lb-prev{ left:0.5rem; }
.lb-next{ right:0.5rem; }
.lb-close{ top:0.9rem; right:0.9rem; }
.lightbox img, .lightbox video{ max-width:100vw; max-height:78vh; border-radius:0; }
}
/* ---------- Instagram CTA ---------- */
.insta-cta{
padding:8rem 0;
border-top:1px solid var(--line-soft);
text-align:center;
background:radial-gradient(ellipse 60% 70% at 50% 100%, rgba(255,255,255,0.05), transparent 65%);
}
.insta-cta h2{
font-size:clamp(1.9rem, 4vw, 3rem);
margin-top:1.4rem;
}
.insta-cta p:not(.eyebrow){
margin:1.4rem auto 2.4rem;
max-width:460px;
color:var(--grey);
}
/* ---------- Responsive ---------- */
/* Tablet */
@media (max-width: 1024px){
.gallery{ grid-template-columns:repeat(2,1fr); }
.manifesto .wrap{ gap:3rem; }
}
/* Mobile */
@media (max-width: 860px){
header.site-nav{ padding:1rem 5vw; }
header.site-nav.scrolled{ padding:0.7rem 5vw; }
.logo img{ height:32px; }
.nav-links{ gap:1.3rem; }
.nav-links a{ font-size:0.7rem; letter-spacing:0.14em; }
.nav-links a span.long{ display:none; }
.wrap{ padding:0 5vw; }
.hero{ padding:7rem 5vw 6rem; min-height:100svh; }
.hero h1{ font-size:clamp(2.2rem, 10vw, 3.2rem); }
.hero p.sub{ font-size:0.98rem; margin:1.5rem auto 2.2rem; }
.hero::before{ width:min(120vw, 480px); margin:calc(min(120vw,480px) / -2); }
.marquee{ padding:1rem 0; }
.marquee-track span{ font-size:0.85rem; }
.manifesto{ padding:5.5rem 0; }
.manifesto .wrap{ grid-template-columns:1fr; gap:2.4rem; }
.manifesto h2{ position:static; }
.manifesto p{ font-size:1.05rem; }
.archive-head{ padding:9rem 0 2rem; }
.program{ padding:2.5rem 0 0.5rem; }
.program li{ gap:1.2rem; }
.gallery{ padding:2.5rem 0 5rem; grid-template-columns:repeat(2,1fr); gap:0.9rem; }
.testimonial{ padding:4.5rem 0 6.5rem; }
.testimonial::before{ font-size:4rem; margin-bottom:1.6rem; }
.insta-cta{ padding:5.5rem 0; }
.volume-teaser{ padding:0 0 5.5rem; }
.teaser-head{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
/* swipeable strip instead of a long stack of full-width photos */
.teaser-grid{
display:flex;
gap:1rem;
overflow-x:auto;
scroll-snap-type:x mandatory;
margin:0 -5vw;
padding:0 5vw 0.6rem;
scrollbar-width:none;
}
.teaser-grid::-webkit-scrollbar{ display:none; }
.teaser-grid .card{
flex:0 0 76%;
scroll-snap-align:center;
}
footer{ padding:3rem 5vw 2rem; }
.foot-row{ margin-top:2rem; flex-direction:column; gap:0.7rem; text-align:center; }
}
/* Narrow phones: single-column gallery so faces and video controls stay comfortable */
@media (max-width: 560px){
.gallery{ grid-template-columns:1fr; gap:1.2rem; }
}
/* Small phones */
@media (max-width: 420px){
.logo img{ height:28px; }
.nav-links{ gap:1rem; }
.hero h1{ font-size:2rem; }
.eyebrow{ font-size:0.62rem; letter-spacing:0.2em; }
.btn{ padding:0.9rem 1.7rem; font-size:0.72rem; }
}
/* Touch devices: skip hover lift effects */
@media (hover: none){
.card:hover{ transform:none; box-shadow:none; }
.btn:hover{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
.loop-ring, .hero::before, .marquee-track, .card .art svg, body::after, .hero-bg{ animation:none; }
.hero .eyebrow, .hero h1, .hero p.sub, .hero .btn, .hero-stats{ animation:none; }
.reveal{ opacity:1; transform:none; transition:none; }
*{ scroll-behavior:auto; }
}