@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Barlow:wght@400;500;600&display=swap'); :root{ --bg:#000; --panel:#111; --text:#fff; --muted:#b5b5b5; --line:rgba(255,255,255,.18); --head:'Oswald',sans-serif; --body:'Barlow',sans-serif; --space-s:clamp(.5rem,1vw,1rem); --space-m:clamp(1rem,2.2vw,2.25rem); --space-l:clamp(2.5rem,6vw,7rem); --ease:cubic-bezier(.2,.7,.3,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:clamp(15.5px, 14px + 0.38vw, 30px);-webkit-text-size-adjust:100%} html,body{overflow-x:clip} body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased} a{color:var(--text)} img,svg,iframe{max-width:100%;display:block} img{height:auto} .wrap{width:min(92vw,68rem);margin:0 auto;padding:0 clamp(12px,3vw,2rem)} h1,h2,h3,h4{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-weight:500} :focus-visible{outline:2px solid #fff;outline-offset:3px} .honey{position:absolute!important;left:-9999px!important;opacity:0;height:0;overflow:hidden} @keyframes barPulse{0%,100%{background:#fff}50%{background:#ffd9a8}} @keyframes dotBlink{0%,49%{opacity:1}50%,100%{opacity:.15}} .announce{display:block;background:#fff;color:#000;text-align:center;text-decoration:none;padding:clamp(.55rem,1.1vw,1rem) clamp(12px,3vw,2rem);font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:clamp(.6rem,.58rem + .25vw,.95rem);font-weight:600;animation:barPulse 2.4s ease-in-out infinite;border-bottom:2px solid #000} .announce .dot{display:inline-block;animation:dotBlink 1.2s steps(1) infinite;margin-right:.4em} .announce:hover{animation-play-state:paused;background:#ffd9a8} header{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} @media (max-width:760px){header{backdrop-filter:none;background:#000}} .nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);min-height:clamp(54px,6vh,6.5rem);padding:.4rem 0} .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--head);text-transform:uppercase;letter-spacing:.1em;font-size:clamp(.78rem,.72rem + .38vw,1.25rem);line-height:1.15} .brand img{height:clamp(26px,2.1rem,3.5rem);width:auto;flex:none} nav ul{display:flex;gap:clamp(.7rem,1.9vw,2rem);list-style:none;align-items:center} nav a{text-decoration:none;font-family:var(--head);text-transform:uppercase;font-size:clamp(.64rem,.58rem + .28vw,1rem);letter-spacing:.14em;color:var(--muted);transition:color .15s} nav a:hover,nav a.active{color:var(--text)} .navToggle{display:none;background:none;border:1px solid var(--line);color:#fff;width:2.9rem;height:2.9rem;cursor:pointer;align-items:center;justify-content:center;transition:border-color .15s} .navToggle:hover{border-color:#fff} .navToggle svg{width:1.35rem;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round} /* drawer + scrim are appended to by script, so no ancestor can trap position:fixed (backdrop-filter/transform create containing blocks) */ .navScrim[hidden],.navDrawer[hidden]{display:none} .navScrim,.navDrawer{display:none} #mainNav{display:block} .navDrawer{ position:fixed;top:0;right:0;bottom:0;height:100dvh;width:min(84vw,360px); background:#0a0a0a;border-left:1px solid var(--line); transform:translateX(100%);visibility:hidden; transition:transform .3s var(--ease),visibility 0s linear .3s; z-index:1000;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:calc(4.6rem + env(safe-area-inset-top)) 1.2rem calc(2rem + env(safe-area-inset-bottom)); } .navScrim{position:fixed;top:0;right:0;bottom:0;left:0;height:100dvh;background:rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .3s;z-index:999} .navClose{position:absolute;top:calc(1rem + env(safe-area-inset-top));right:1rem;background:none;border:1px solid var(--line);color:#fff;width:2.9rem;height:2.9rem;font-size:1.8rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center} .navClose:hover{border-color:#fff} .navDrawer nav ul{list-style:none;display:flex;flex-direction:column;gap:0;margin:0;padding:0} .navDrawer li{border-bottom:1px solid rgba(255,255,255,.1)} .navDrawer li:first-child{border-top:1px solid rgba(255,255,255,.1)} .navDrawer a{ display:block;width:100%;padding:1.25rem .6rem; font-family:var(--head);text-transform:uppercase;letter-spacing:.18em; font-size:1.12rem;color:var(--muted);text-decoration:none; -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent; touch-action:manipulation;transition:color .15s,padding-left .18s var(--ease),background .15s; } .navDrawer a:hover,.navDrawer a:active{ color:#fff;padding-left:1.1rem;background:rgba(255,255,255,.05); } .navDrawer a:focus-visible,.navDrawer a.active{color:#fff} @media (max-width:760px){ header{backdrop-filter:none;background:#000} .navToggle{display:flex} #mainNav{display:none} .navScrim[hidden],.navDrawer[hidden]{display:block} .navScrim,.navDrawer{display:block} body.nav-open .navDrawer{transform:translateX(0);visibility:visible;transition:transform .3s var(--ease),visibility 0s} body.nav-open .navScrim{opacity:1;pointer-events:auto} body.nav-open{overflow:hidden} } .hero{position:relative;overflow:hidden;min-height:clamp(340px,78svh,900px);display:flex;align-items:center;justify-content:center;text-align:center;background:#000} .heroBg{ position:absolute;inset:0; background:#000 url('../img/mic.jpg') 34% 42%/auto 130% no-repeat; filter:grayscale(1) contrast(1.05) brightness(1.15); } .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.35) 45%,rgba(0,0,0,.65));z-index:1} .hero .inner{position:relative;z-index:2;padding:var(--space-l) clamp(12px,4vw,2rem)} .hero h1{font-size:clamp(1.6rem,1rem + 4.4vw,5.4rem);letter-spacing:.11em;font-weight:600;line-height:1.05} .hero .sub{margin-top:var(--space-s);font-size:clamp(.85rem,.7rem + .68vw,1.6rem);letter-spacing:.08em;text-transform:uppercase;color:#e8e8e8} .hero .loc{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-size:clamp(.7rem,.6rem + .38vw,1.1rem)} .hero .pill{display:inline-block;margin-top:1.2rem;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.35);padding:.45em 1em;text-shadow:0 1px 3px rgba(0,0,0,.9)} .cta-row{display:flex;gap:clamp(.6rem,1.5vw,1.2rem);justify-content:center;flex-wrap:wrap} .btn{display:inline-block;margin-top:var(--space-m);padding:clamp(.7rem,1.2vw,1.2rem) clamp(1.4rem,3vw,3rem);border:1px solid #fff;color:#fff;background:transparent;text-decoration:none;font-family:var(--head);text-transform:uppercase;letter-spacing:.2em;font-size:clamp(.65rem,.6rem + .25vw,1rem);cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .15s,color .15s;will-change:transform} .btn:hover,.btn:focus-visible{background:#fff;color:#000;transform:translateY(-3px);box-shadow:0 10px 22px rgba(255,255,255,.16)} .btn:active{transform:translateY(-1px)} .btn.solid{background:#fff;color:#000} .btn.solid:hover{background:#ffd9a8;border-color:#ffd9a8} .btn[disabled]{opacity:.4;pointer-events:none} section{padding:var(--space-l) 0;border-bottom:1px solid var(--line)} .sec-title{text-align:center;margin-bottom:.5rem;font-size:clamp(1.2rem,1rem + 2vw,3rem)} .sec-sub{text-align:center;color:var(--muted);text-transform:uppercase;letter-spacing:.2em;font-size:clamp(.65rem,.6rem + .25vw,1rem);margin-bottom:var(--space-l)} .panel,.card{background:var(--panel);border:1px solid var(--line);transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)} .panel:hover,.card:hover{border-color:#fff;box-shadow:0 8px 26px rgba(255,255,255,.07)} .panel{padding:clamp(1.2rem,2.4vw,2.4rem)} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:clamp(.8rem,1.6vw,1.6rem)} .card{padding:clamp(1rem,2vw,2rem);min-height:clamp(150px,11rem,16rem);display:flex;flex-direction:column;gap:.5rem} .card:hover{transform:translateY(-4px)} .card .cat{color:var(--muted);font-size:clamp(.62rem,.58rem + .2vw,.9rem);letter-spacing:.18em;text-transform:uppercase} .card h3{font-size:clamp(1rem,.9rem + .6vw,1.7rem);letter-spacing:.08em} .card p{color:var(--muted);font-size:clamp(.8rem,.75rem + .25vw,1.1rem)} .card a{margin-top:auto;font-family:var(--head);text-transform:uppercase;font-size:clamp(.62rem,.58rem + .2vw,.9rem);letter-spacing:.16em;text-decoration:none} .card a:hover{text-decoration:underline} .card.soon{align-items:center;justify-content:center;text-align:center;border-style:dashed} .card.soon:hover{transform:none} .card.soon p{font-style:italic} .featured{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;gap:var(--space-m);flex-wrap:wrap;border-color:#fff;padding:clamp(1rem,2vw,2rem)} .featured:hover{transform:none} .featured .art{width:clamp(140px,15rem,20rem);aspect-ratio:1;background:#1c1c1c;border:1px solid var(--line);flex:none;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;text-align:center;padding:.8rem} .featured .art img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .35s var(--ease)} .featured .art::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .3s var(--ease)} .featured .art .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;opacity:0;transform:scale(.85);transition:opacity .3s var(--ease),transform .3s var(--ease)} .featured .art .play svg{width:clamp(46px,4.4rem,5.5rem);height:auto;fill:#fff;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6))} .featured:hover .art img,.featured:focus-within .art img{transform:scale(1.07);filter:brightness(.72)} .featured:hover .art::after,.featured:focus-within .art::after{opacity:1} .featured:hover .art .play,.featured:focus-within .art .play{opacity:1;transform:scale(1)} .featured .body{flex:1 1 18rem} .featured h3{font-size:clamp(1.3rem,1.1rem + 1.2vw,2.4rem)} .twocol{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-l);align-items:center} .twocol p{color:#dcdcdc;margin-bottom:var(--space-s)} .twocol p:last-child{margin-bottom:0} .crow{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:.9rem;color:var(--muted)} .crow:last-child{margin-bottom:0} .crow svg{flex:none;width:clamp(17px,1.25rem,1.9rem);height:auto;margin-top:.25em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:color .15s} .crow a{text-decoration:none;color:var(--muted);transition:color .15s} .crow a:hover{color:#fff;text-decoration:underline} .crow:hover{color:#fff} form label{display:block;margin:1rem 0 .35rem;font-size:clamp(.65rem,.62rem + .2vw,.95rem);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)} input,textarea,select{width:100%;padding:clamp(.6rem,1vw,1rem) clamp(.7rem,1.1vw,1.1rem);background:transparent;border:1px solid var(--line);color:#fff;font-family:var(--body);font-size:clamp(.85rem,.8rem + .25vw,1.15rem);transition:border-color .15s,box-shadow .15s} input:hover,textarea:hover,select:hover{border-color:rgba(255,255,255,.5)} input:focus,textarea:focus,select:focus{border-color:#fff;outline:none;box-shadow:0 0 0 1px rgba(255,255,255,.35)} .check{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;font-size:clamp(.75rem,.72rem + .2vw,1rem);color:var(--muted)} .check input{width:auto} footer{padding:var(--space-l) 0 var(--space-m);color:var(--muted)} .foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-l);padding-bottom:var(--space-m);border-bottom:1px solid var(--line)} .foot-grid h4{margin-bottom:1rem;letter-spacing:.14em;color:#fff} .legal{display:flex;justify-content:center;text-align:center;padding-top:1.5rem;font-size:clamp(.7rem,.68rem + .2vw,1rem)} @media (max-width:820px){ .twocol,.foot-grid{grid-template-columns:1fr} .featured{flex-direction:column;align-items:flex-start} .featured .art{width:100%;max-width:20rem;align-self:center} } @media (max-width:340px){.grid{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} .announce{background:#ffd9a8} .btn:hover{transform:none} } /* panels that shouldn't lift/glow on hover (footer + contact info boxes) */ .panel.flat{transition:none} .panel.flat:hover{border-color:var(--line);box-shadow:none;transform:none} /* inline brand mark inside headings */ .mark{display:inline-flex;flex:none;align-items:center} .mark svg{width:clamp(20px,1.5rem,2.4rem);height:auto} .foot-grid h4{display:flex;align-items:center;gap:.6rem} /* fully clickable release card */ a.card.cardlink{text-decoration:none;color:inherit} a.card.cardlink .cta{margin-top:auto;font-family:var(--head);text-transform:uppercase;font-size:clamp(.62rem,.58rem + .2vw,.9rem);letter-spacing:.16em;color:#fff;transition:transform .2s var(--ease)} a.card.cardlink:hover .cta,a.card.cardlink:focus-visible .cta{transform:translateX(4px)} a.card.cardlink:hover h3{color:#fff} /* tinted section: separates Releases from the Artist section above */ section.tinted{ position:relative; background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.075), rgba(255,255,255,0) 62%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 55%, rgba(255,255,255,0)); border-top:1px solid rgba(255,255,255,.28); } section.tinted::before{ content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%); width:min(28rem,60%);height:1px; background:linear-gradient(90deg,transparent,#fff,transparent); } section.tinted .card{background:rgba(255,255,255,.035);backdrop-filter:blur(2px)} section.tinted .card.soon{background:rgba(255,255,255,.015)} /* headings inside panels: mark + text on one line, sensible size */ .panel-head{display:flex;align-items:center;gap:.65rem;font-size:clamp(1.1rem,.95rem + .9vw,1.9rem);line-height:1.1} .panel-head .mark svg{width:clamp(20px,1.4rem,2.2rem)} /* checkboxes — themed to match the site's square, high-contrast language */ input[type=checkbox]{ appearance:none;-webkit-appearance:none; width:clamp(1rem,1.05rem,1.4rem);height:clamp(1rem,1.05rem,1.4rem); flex:none;padding:0;margin:0;border:1px solid var(--line);background:transparent; cursor:pointer;position:relative;border-radius:0; transition:border-color .15s var(--ease),background .15s var(--ease), box-shadow .18s var(--ease),transform .15s var(--ease); } input[type=checkbox]:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-1px);box-shadow:0 3px 10px rgba(255,255,255,.12)} input[type=checkbox]:focus-visible{outline:2px solid #fff;outline-offset:2px} input[type=checkbox]:checked{background:#fff;border-color:#fff} input[type=checkbox]:checked::after{ content:"";position:absolute;left:32%;top:14%; width:26%;height:56%;border:solid #000;border-width:0 2px 2px 0; transform:rotate(45deg); } input[type=checkbox]:checked:hover{background:#ffd9a8;border-color:#ffd9a8} input[type=checkbox]:active{transform:translateY(0)} /* whole label row responds so the hit area feels intentional */ .check{cursor:pointer;transition:color .15s} .check:hover{color:#fff} .check:hover input[type=checkbox]{border-color:#fff;background:rgba(255,255,255,.08)} .check:hover input[type=checkbox]:checked{background:#ffd9a8;border-color:#ffd9a8} /* radios on the store page share the language, but stay round */ .opt input[type=radio]{ appearance:none;-webkit-appearance:none; width:1.05rem;height:1.05rem;flex:none;padding:0;border:1px solid var(--line); border-radius:50%;background:transparent;cursor:pointer;position:relative; transition:border-color .15s,box-shadow .18s var(--ease); } .opt:hover input[type=radio]{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.1)} .opt input[type=radio]:checked{border-color:#fff} .opt input[type=radio]:checked::after{content:"";position:absolute;inset:22%;border-radius:50%;background:#fff} .opt input[type=radio]:focus-visible{outline:2px solid #fff;outline-offset:2px} /* full-bleed photo background section (About) — same treatment as the hero */ section.photo-bg{position:relative;overflow:hidden;min-height:clamp(360px,70svh,820px);display:flex;align-items:center} .photo-bg-img{ position:absolute;inset:0; background:#000 url('../img/studio.jpg') center 40%/cover no-repeat; filter:grayscale(1) contrast(1.08) brightness(.9); } section.photo-bg::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:1} /* text card floating over the photo */ .photo-card{ max-width:44rem;margin:0 auto;text-align:center; padding:clamp(1.5rem,3.4vw,3.4rem) clamp(1.2rem,3vw,3.2rem); background:rgba(0,0,0,.42); border:1px solid var(--line); backdrop-filter:blur(3px) saturate(.85); box-shadow:0 24px 60px rgba(0,0,0,.45); position:relative; } .photo-card::before,.photo-card::after{ content:"";position:absolute;left:50%;transform:translateX(-50%); width:min(18rem,55%);height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); } .photo-card::before{top:-1px} .photo-card::after{bottom:-1px} .photo-card p{ color:#eaeaea; text-shadow:0 1px 5px rgba(0,0,0,.9), 0 0 18px rgba(255,255,255,.14); } .photo-card .sec-title{ color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.9), 0 0 26px rgba(255,255,255,.28), 0 0 60px rgba(255,255,255,.10); } .photo-card .sec-sub{ text-shadow:0 2px 8px rgba(0,0,0,.9), 0 0 20px rgba(255,255,255,.18); } .photo-card p:last-child{margin-bottom:0} .photo-card .sec-title{text-align:center} .photo-card .sec-sub{text-align:center} @media (max-width:640px){ .announce-cta{display:none} .announce{font-size:.88rem;letter-spacing:.09em;padding:.85rem 1rem;line-height:1.45} } /* ---------- narrow screens (Fold cover screen, small phones) ---------- */ @media (max-width:560px){ html{font-size:17.5px} .wrap{width:100%;padding:0 1.1rem} .hero{min-height:clamp(440px,74svh,660px)} .hero h1{font-size:clamp(1.85rem,8.4vw,2.6rem);letter-spacing:.07em} .hero .sub{font-size:1.05rem;letter-spacing:.06em} .hero .loc{font-size:.88rem} .hero .pill{font-size:.82rem;padding:.55em 1em} .cta-row{flex-direction:column;align-items:stretch;width:min(22rem,100%);margin:0 auto} .cta-row .btn{width:100%;margin-top:.8rem} .btn{padding:1.05rem 1.5rem;font-size:.92rem;letter-spacing:.15em} .sec-title{font-size:1.75rem} .sec-sub{font-size:.85rem;letter-spacing:.15em} .card h3{font-size:1.35rem} .card p,.twocol p,.photo-card p{font-size:1.02rem;line-height:1.65} .card .cat{font-size:.82rem} .card a,.card .cta{font-size:.85rem} .crow a,.crow p{font-size:1.02rem} .crow svg{width:1.35rem} .featured .art{max-width:100%} .price{font-size:2rem} .stock{font-size:.88rem} .opt strong{font-size:1.02rem} .opt small{font-size:.92rem} .note{font-size:.95rem} form label{font-size:.85rem} input,textarea,select{font-size:16px;padding:.9rem 1rem} .check{font-size:.95rem} .panel-head{font-size:1.5rem} .brand{font-size:.86rem;letter-spacing:.07em;gap:.55rem} .brand svg{height:28px} section{padding:3rem 0} .panel{padding:1.4rem} .photo-card{padding:1.8rem 1.2rem} .legal{font-size:.85rem} } @media (max-width:400px){ .brand span{display:none} .brand::after{content:"LHRC";font-family:var(--head);letter-spacing:.14em;font-size:1rem;color:#fff} }