::selection{background:#00828A;color:#FFFFFF}
::-moz-selection{background:#00828A;color:#FFFFFF}
/* elrose: luminous silver / glass slide. index.html only. */
:root{--bone:#fff;--silver:rgba(255,255,255,.85);--meta:rgba(255,255,255,.5);--glass:rgba(255,255,255,.15);
--serif:'Cormorant Garamond',serif;--mono:'Share Tech Mono',monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:#000;color:var(--silver);font-family:var(--serif);font-size:1.3rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.grain{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

/* machine mono */
.meta,.site-nav a,.bracket,.ledger dt,.ledger a,.site-footer p{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.25em;color:#fff;font-weight:400}

/* 1. electronic heartbeat */
@keyframes breathe{0%,100%{opacity:.4}50%{opacity:.75}}
.meta,.site-nav a,.bracket,.ledger dt,.ledger a,.site-footer p{opacity:.4;animation:breathe 7s ease-in-out infinite}
.site-nav a:nth-child(2){animation-delay:-1.5s}.site-nav a:nth-child(3){animation-delay:-3s}.site-nav a:nth-child(4){animation-delay:-4.5s}
.ledger div:nth-child(2n) *{animation-delay:-2s}.ledger div:nth-child(3n) *{animation-delay:-4s}

/* 2. glass viewport: stained glass blur */
.site-header{position:fixed;top:0;left:0;right:0;z-index:20;padding:20px 8vw;
background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.site-nav{display:flex;gap:.9em;align-items:center}
.site-nav a+a::before{content:"//";margin-right:.9em;opacity:.6}
.glass-label{display:inline-block;padding:10px 16px;margin-bottom:28px;background:rgba(0,0,0,.35);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06)}

/* 3. signal dropout */
@keyframes dropout{0%{transform:translateX(0);opacity:.9}15%{transform:translateX(1px);opacity:.2;color:#fff}30%{transform:translateX(-1px);opacity:1;color:#fff}
45%{transform:translateX(1px);opacity:.35}60%{transform:translateX(0);opacity:1}75%{transform:translateX(-1px);opacity:.6}100%{transform:translateX(0);opacity:1}}
.site-nav a:hover,.bracket:hover,.ledger a:hover,.site-footer a:hover{animation:dropout .28s steps(1,end) 1;opacity:1}
.ledger a:hover,.bracket:hover{text-shadow:0 0 8px rgba(255,255,255,.6)}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:0 8vw;overflow:hidden;isolation:isolate}
.hero-video-bg,.hero-video-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 30% 50%,rgba(0,0,0,.25),rgba(0,0,0,.8) 80%),linear-gradient(to bottom,rgba(0,0,0,.5),transparent 30%,#000 100%)}
.hero-title{font-family:var(--serif);font-weight:300;font-size:clamp(5.5rem,22vw,19rem);line-height:.9;letter-spacing:.04em;color:#fff;margin:.15em 0 .2em -.04em;
text-shadow:0 0 40px rgba(255,255,255,.35),0 0 120px rgba(255,255,255,.15)}
.hero-sub{margin-bottom:34px}
.bracket{display:inline-block;opacity:.4}
#eyebrow-word{display:inline-block;transition:opacity .18s}
#eyebrow-word.is-slipping{opacity:0}

/* bands */
.band{position:relative;padding:18vh 8vw;border-top:1px solid rgba(255,255,255,.06)}
.col{max-width:480px}.col-wide{max-width:1100px}
.about-col p+p,.about-col .meta+p{margin-top:1.4em}
.about-col .meta{margin-bottom:2em}
.about{overflow:hidden;isolation:isolate}
.about-bg{position:absolute;inset:0;z-index:-1;opacity:.22}
.about-bg video{width:100%;height:100%;object-fit:cover}
.about-col p:not(.meta){color:var(--silver);text-shadow:0 0 18px rgba(255,255,255,.08)}

/* releases / visuals grid */
.viz-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.viz{position:relative;border:1px solid var(--glass);background:#050505;overflow:hidden;
box-shadow:0 0 40px rgba(255,255,255,.04),inset 0 0 30px rgba(255,255,255,.03)}
.viz.wide{grid-column:1/-1}
.viz iframe{display:block;width:100%;height:352px;border:0}
.viz video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(.35) contrast(1.1)}
.viz .meta{position:absolute;left:0;top:0;margin:14px;padding:6px 10px;background:rgba(0,0,0,.35);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06)}

/* contact ledger */
.ledger{margin-top:2rem}
.ledger div{display:flex;align-items:baseline;gap:14px;padding:14px 0}
.ledger dt{flex:none}
.ledger .rule{flex:1;height:1px;background:rgba(255,255,255,.25);min-width:24px;transform:translateY(-3px)}
.ledger dd{flex:none}
.site-footer{padding:6vh 8vw 8vh;border-top:1px solid rgba(255,255,255,.06)}

@media(max-width:640px){
.site-header{padding:16px 6vw}.hero,.band,.site-footer{padding-left:6vw;padding-right:6vw}
.band{padding-top:12vh;padding-bottom:12vh}
.viz-grid{grid-template-columns:1fr}
.ledger div{flex-wrap:wrap;gap:6px}.ledger .rule{display:none}
.site-nav{gap:.5em;letter-spacing:.15em}.site-nav a{letter-spacing:.15em}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.meta,.site-nav a,.bracket,.ledger dt,.ledger a{opacity:.6}}

/* about: still, no video. faint silver light instead */
.about{background:radial-gradient(ellipse at 20% 40%,rgba(255,255,255,.07),transparent 60%)}
.loops{padding-top:0;border-top:0}


/* about: pushed to the right, void on the left */
.about{padding-right:0}
.about-col{margin-left:auto;max-width:calc(460px + 10vw);padding-right:10vw}

/* full-bleed horizon line, edge to edge */
.horizon{padding:14vh 0;width:100vw;margin-left:calc(-50vw + 50%)}
.horizon-frame{position:relative;width:100%;aspect-ratio:2.39/1;overflow:hidden;
border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);background:#050505;box-shadow:0 0 80px rgba(255,255,255,.05)}
.horizon-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.08)}
.horizon-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
@media(max-width:640px){.horizon{padding:9vh 0}.horizon-frame{aspect-ratio:21/9}.about-col{padding-right:6vw;max-width:88%}}

/* links: soft silver base, teal on hover */
@keyframes breathe-link{0%,100%{opacity:.6}50%{opacity:1}}
.site-nav a,.bracket,.ledger a,.site-footer a{color:rgba(255,255,255,.85);animation:breathe-link 7s ease-in-out infinite;transition:color .15s}
.site-nav a:hover,.bracket:hover,.ledger a:hover,.site-footer a:hover{color:#00828A;opacity:1;text-shadow:0 0 12px rgba(0,130,138,.7);animation:dropout .28s steps(1,end) 1}
.site-nav a:hover::before{color:#fff}

/* light rolling through the letters */
@keyframes roll{0%{background-position:200% 0}100%{background-position:-100% 0}}
.hero-title{
background:linear-gradient(100deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.62) 38%,#fff 47%,#9ff0f4 52%,rgba(255,255,255,.62) 62%,rgba(255,255,255,.62) 100%);
background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
text-shadow:none;filter:drop-shadow(0 0 28px rgba(255,255,255,.3));animation:roll 6s linear infinite}
/* sub line: blue highlight sweep only */
.hero-sub{font-size:13px;opacity:1;
background:linear-gradient(100deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.5) 40%,#00b4c0 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,.5) 100%);
background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
animation:roll 5.5s linear infinite}
@media(prefers-reduced-motion:reduce){.hero-title,.hero-sub{animation:none;-webkit-text-fill-color:rgba(255,255,255,.85)}}

/* LOOM OF THE FATES: one continuous teal thread, ends above the contact ledger */
.threaded{position:relative}
.loom{position:absolute;top:0;bottom:0;left:25vw;width:1px;z-index:0;pointer-events:none;
background:#00828A;box-shadow:0 0 8px rgba(0,130,138,.45);
-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 92%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 92%,transparent 100%);
animation:hum 9s ease-in-out infinite}
@keyframes hum{0%,100%{opacity:.3}50%{opacity:.65}}
main>section,main .threaded>section,.site-footer{position:relative;z-index:10}
.horizon-frame{background:#000}
@media(max-width:640px){.loom{left:10vw}}
@media(prefers-reduced-motion:reduce){.loom{animation:none;opacity:.45}}