/* ============================================================ ROSE GARDEN RECORDS — Version E "EDITORIAL" Inspired by blonded / print-specimen design: cold grotesk type, high-contrast black-and-white photography, generous whitespace, thin rules, and ONE decisive accent doing all the work. Four accent palettes are switchable live (tester control, bottom-left). Change the default by editing :root below. ============================================================ */ :root{ --paper:#EFEBE1; /* uncoated warm off-white */ --paper2:#E5E0D3; --ink:#141310; /* near-black */ --muted:#5C5849; /* 5.99:1 on paper — was #6E6A5E at 4.54:1, barely over the 4.5 line */ --line:#CEC8B8; /* hairline rules */ --accent:#EA4E1B; /* safety orange (blond) — large display / fills */ --accent-ink:#BE3F16; /* AA-safe deeper orange for small text + buttons (4.5:1 on paper) */ --on-accent:#FFFFFF; } /* Coral — warm coral field, gray-blue text, cream accent */ [data-theme="specimen"]{--paper:#E9674C;--paper2:#D9573D;--ink:#20364A;--muted:#3E566B;--line:#F08974;--accent:#FBF3E4;--accent-ink:#FBF3E4;--on-accent:#E9674C;} /* Acid — neon yellow field, deep raspberry-pink text (legible), hot-pink accent */ [data-theme="field"]{--paper:#E9FF00;--paper2:#DBF000;--ink:#B01E63;--muted:#9B3A6C;--line:#C9DE00;--accent:#FF1F7A;--accent-ink:#D80057;--on-accent:#FFF3B0;} /* Ink — dark mode */ [data-theme="ink"]{--paper:#16150F;--paper2:#201E15;--ink:#EEE8D9;--muted:#9A9384;--line:#37342A;--accent:#EA4E1B;--accent-ink:#EA4E1B;--on-accent:#16150F;} *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--paper);color:var(--ink);font-family:"Newsreader",Georgia,serif;font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s;} img{max-width:100%;display:block;} /* Visually hidden but available to screen readers + the heading outline. */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent-ink);color:var(--on-accent);font-family:"Space Mono",monospace;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;padding:.7rem 1.1rem;} .skip:focus{left:.5rem;top:.5rem;} .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;} /* is only a wrapper for the webp ; it must not become a layout box, or ".duo img{height:100%}" would resolve against the picture instead of the figure. */ picture{display:contents;} /* The Live section ships hidden and is revealed by JS only when the tour widget actually returns shows — make sure nothing can out-specify that. */ [hidden]{display:none !important;} figure{margin:0;} a{color:var(--ink);text-decoration:none;} h1,h2,h3{font-family:"Archivo",Helvetica,Arial,sans-serif;font-weight:800;line-height:.98;margin:0 0 .3em;letter-spacing:-.03em;} p{margin:0 0 1rem;} .wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 2.4rem;} .section{padding-top:2.5rem;padding-bottom:2.5rem;} /* tighter vertical rhythm for the home scroller strips */ .home-strip{padding-top:1.3rem;padding-bottom:1.3rem;} .muted{color:var(--muted);} .mono{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.02em;text-transform:uppercase;} .eyebrow{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem;} .accent{color:var(--accent);} em.hl{font-style:normal;color:var(--accent-ink);} .rule{height:1px;background:var(--ink);opacity:.9;} .rule--thin{background:var(--line);} .lk{font-family:"Space Mono",monospace;font-size:.76rem;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-ink);border-bottom:1px solid var(--accent-ink);padding-bottom:2px;transition:opacity .18s;} .lk:hover{opacity:.6;} .lk--ink{color:var(--ink);border-color:var(--ink);} /* ---- IMAGERY: full color; press photos get a soft polaroid grain ---- */ .duo{position:relative;overflow:hidden;background:var(--paper2);} .duo img{width:100%;height:100%;object-fit:cover;filter:none;transition:transform .8s cubic-bezier(.2,.8,.2,1);} /* Press photos: warm, faintly faded polaroid tone + fine film grain */ .card__media img,.spread__img img,.artist-hero__photo img{filter:saturate(.97) contrast(.97) brightness(1.03) sepia(.07);object-position:center 30%;} .card__media::after,.spread__img::after,.artist-hero__photo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:150px 150px;opacity:.16;mix-blend-mode:soft-light;} /* ---- HEADER ---- */ .site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--paper) 88%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--ink);} .nav{display:flex;align-items:center;justify-content:space-between;height:72px;} .brand{display:inline-flex;align-items:center;gap:.55rem;font-family:"Archivo",sans-serif;font-weight:800;font-size:1.35rem;letter-spacing:-.03em;text-transform:uppercase;color:var(--ink);} .brand__logo{height:2rem;width:auto;display:block;} [data-theme="ink"] .brand__logo{filter:invert(1);} .nav__links{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;align-items:center;} .nav__links a{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);} .nav__links a:hover,.nav__links a.is-active{color:var(--accent-ink);} .nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:.4rem;} .nav__toggle span{display:block;width:26px;height:1.5px;background:var(--ink);margin:6px 0;} @media(max-width:860px){ .nav__toggle{display:block;} .nav__links{position:fixed;inset:72px 0 auto 0;flex-direction:column;gap:0;background:var(--paper);padding:1rem 2.4rem 2rem;transform:translateY(-135%);visibility:hidden;transition:transform .25s,visibility 0s .25s;border-bottom:1px solid var(--ink);} .nav__links.is-open{transform:translateY(0);visibility:visible;transition:transform .25s,visibility 0s 0s;} .nav__links li{width:100%;border-bottom:1px solid var(--line);} .nav__links a{display:block;padding:1rem 0;font-size:.9rem;} } /* ---- HERO / MASTHEAD ---- */ .hero{padding-top:clamp(1.5rem,3.5vw,2.75rem);padding-bottom:clamp(1rem,2vw,1.6rem);} .hero + .section{padding-top:0.9rem;} .hero h1{font-size:clamp(2.3rem,10vw,8.7rem);font-weight:800;letter-spacing:-.045em;text-transform:uppercase;margin:0;line-height:.9;} /* home hero: wordmark on the left, interactive rose field (invisible box) on the right */ .hero__row{display:grid;grid-template-columns:1.05fr 1fr;gap:2rem;align-items:stretch;} .hero__lockup{align-self:center;} /* center the wordmark block vertically between header and Releases */ .rose-field-wrap{display:flex;flex-direction:column;} .rose-field{position:relative;flex:1;min-height:250px;} .rose-field canvas{position:absolute;inset:0;display:block;width:100%;height:100%;} .rose-controls{display:flex;align-items:center;gap:1.1rem;margin-top:.9rem;} .rose-add{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;padding:.5rem 1.1rem;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:background .18s,color .18s;} .rose-add:hover{background:var(--ink);color:var(--paper);} .rose-reset{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:none;border:0;border-bottom:1px solid var(--muted);padding:0 0 2px;cursor:pointer;transition:color .18s,border-color .18s;} .rose-reset:hover{color:var(--accent);border-color:var(--accent);} @media(max-width:820px){.hero__row{grid-template-columns:1fr;}.rose-field-wrap{display:none;}} .hero__lede{font-family:"Newsreader",serif;font-style:italic;font-size:clamp(.87rem,1.6vw,1.27rem);max-width:34ch;margin:1rem 0 .6rem;line-height:1.35;} /* ---- SECTION HEAD ---- */ .shead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--ink);margin-bottom:2.6rem;} .shead h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;} .shead .mono{color:var(--muted);margin-left:auto;} /* "scroll →" affordance — injected by JS on horizontal strips, only shown when the strip actually overflows (desktop + mobile). The old baked .vscroll is superseded. */ .vscroll{display:none;} .shint{display:none;font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);white-space:nowrap;} .shead.has-scroll .shint{display:inline;} /* mobile: keep the section count/scroll hint on the right (no wrap under the name) and tighten the gap to the rule */ @media(max-width:640px){ .shead{flex-wrap:nowrap;gap:.55rem;padding-bottom:.4rem;margin-bottom:1.9rem;} .shead h2{font-size:1.15rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .shead .mono{flex:0 0 auto;white-space:nowrap;font-size:.68rem;} .shint{font-size:.58rem;} } /* ---- HOME FEATURE ROWS (editorial spread) ---- */ .spread{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(2.5rem,5vw,4rem) 0;border-bottom:1px solid var(--line);} .spread:first-child{border-top:1px solid var(--line);} .spread__img{aspect-ratio:4/3;} .spread:nth-child(even) .spread__img{order:2;} .spread__num{font-family:"Space Mono",monospace;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);} .spread__name{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(2.4rem,5.5vw,4.2rem);letter-spacing:-.04em;text-transform:uppercase;margin:.4rem 0 .3rem;} .spread__name a{color:var(--ink);} .spread__name a:hover{color:var(--accent);} .spread__meta{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);} .spread__bio{font-family:"Newsreader",serif;font-size:1.18rem;line-height:1.5;color:var(--ink);margin:1.1rem 0 1.4rem;max-width:44ch;} /* ---- GRIDS ---- */ .grid--releases{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem 2rem;} .grid--releases>*,.grid--videos>*,.grid--merch>*{min-width:0;} @media(max-width:359px){.grid--releases,.grid--videos{grid-template-columns:1fr;}} .grid--merch{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 2rem;} .grid--videos{display:grid;grid-template-columns:1fr;gap:2.5rem;} @media(min-width:900px){.grid--releases{grid-template-columns:repeat(3,1fr);}.grid--merch{grid-template-columns:repeat(4,1fr);}.grid--videos{grid-template-columns:repeat(3,1fr);}} /* ---- HOME HORIZONTAL SCROLLERS (recent releases + roster) ---- */ .hscroll{display:flex;gap:2rem;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:1.3rem;margin-top:.4rem;scrollbar-width:thin;scrollbar-color:var(--accent) var(--line);} .hscroll>*{flex:0 0 auto;scroll-snap-align:start;} .hscroll--releases>*{width:300px;} .hscroll--artists>*{width:305px;} .hscroll--merch>*{width:240px;} .hscroll--videos>*{width:360px;} /* merch product mocks: show the whole product (contain), not cropped */ .hscroll--merch .merch__media img{object-fit:contain;padding:7%;} .hscroll::-webkit-scrollbar{height:8px;} .hscroll::-webkit-scrollbar-track{background:var(--line);} .hscroll::-webkit-scrollbar-thumb{background:var(--accent);border-radius:0;} /* Phone: items were 304px inside a 313px viewport — 0.96 of a card visible, so every swipe advanced exactly one item and the catalog took 14 swipes. Narrower cards put ~1.6-1.9 in view and halve the travel; proximity snapping (not mandatory) lets momentum carry. */ @media(max-width:640px){ .hscroll{gap:.9rem;scroll-snap-type:x proximity;overscroll-behavior-x:contain;} .hscroll--releases>*{width:46vw;max-width:210px;} .hscroll--merch>*{width:40vw;max-width:180px;} .hscroll--artists>*{width:52vw;max-width:230px;} .hscroll--videos>*{width:70vw;max-width:300px;} } /* ---- ROSTER (clean B&W index grid) ---- */ .grid--artists{display:grid;grid-template-columns:1fr;gap:3.5rem 2.4rem;} /* Phone: a single column made the roster 2380px tall on the homepage. Two up, with the card type scaled to the narrower column. */ @media(max-width:640px){ .grid--artists{grid-template-columns:repeat(2,1fr);gap:1.5rem .9rem;} .grid--artists .card__title{font-size:1.05rem;line-height:1.15;} .grid--artists .card__meta{font-size:.68rem;} .grid--artists .card__body{padding-top:.6rem;margin-top:.6rem;} } @media(min-width:640px){.grid--artists{grid-template-columns:repeat(2,1fr);}} @media(min-width:1000px){.grid--artists{grid-template-columns:repeat(3,1fr);}} .card{color:var(--ink);position:relative;} .card__media{aspect-ratio:4/3;} .card:hover .card__media img{transform:scale(1.04);} .card__body{padding:.9rem 0 0;border-top:1px solid var(--ink);margin-top:.9rem;position:relative;} .card__title{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.55rem;text-transform:uppercase;letter-spacing:-.03em;margin:0;} .card:hover .card__title{color:var(--accent);} .card__meta{font-family:"Space Mono",monospace;font-size:.72rem;text-transform:uppercase;color:var(--muted);margin:.35rem 0 0;} .card__tags{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin:.2rem 0 0;} .card__cta{display:none;} /* ---- RELEASE CARD ---- */ .release__cover{aspect-ratio:1/1;} .release__coverlink{display:block;width:100%;height:100%;line-height:0;cursor:pointer;transition:opacity .18s;} .release__coverlink:hover{opacity:.88;} .release__body{padding:.9rem 0 0;border-top:1px solid var(--ink);margin-top:.9rem;} .release__cat{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);} .release__title{font-family:"Archivo",sans-serif;font-weight:800;font-size:1.2rem;text-transform:uppercase;letter-spacing:-.03em;margin:.2rem 0;} .release__artist{font-family:"Newsreader",serif;font-style:italic;font-size:1rem;} .release__artist a{color:var(--ink);border-bottom:1px solid var(--line);} .release__artist a:hover{color:var(--accent);border-color:var(--accent);} .release__formats{font-family:"Space Mono",monospace;font-size:.72rem;text-transform:uppercase;color:var(--muted);margin-top:.35rem;} .release__links{display:flex;gap:1.1rem;margin-top:.75rem;align-items:center;} .badge{display:inline-block;font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;background:var(--accent-ink);color:var(--on-accent);padding:.2rem .5rem;vertical-align:middle;margin-left:.4rem;} /* ---- MERCH / VIDEO ---- */ .merch__media{aspect-ratio:1/1;} .merch__soldout{position:absolute;top:.6rem;left:.6rem;z-index:3;background:var(--accent-ink);color:var(--on-accent);padding:.2rem .55rem;font-family:"Space Mono",monospace;font-size:.6rem;text-transform:uppercase;} .merch__name{font-family:"Archivo",sans-serif;font-weight:700;text-transform:uppercase;font-size:.95rem;margin-top:.7rem;} .merch__price{font-family:"Space Mono",monospace;font-size:.72rem;color:var(--muted);} .video{cursor:pointer;} .video__thumb{aspect-ratio:16/9;position:relative;} .video__thumb--empty{display:grid;place-items:center;text-align:center;background:var(--paper2);color:var(--muted);font-family:"Space Mono",monospace;font-size:.72rem;padding:1rem;border:1px solid var(--line);} .video__play{position:absolute;inset:0;display:grid;place-items:center;z-index:3;} .video__play svg{width:56px;height:56px;} .video__play circle{fill:var(--accent);} .video__play path{fill:var(--on-accent);} .video__title{font-family:"Archivo",sans-serif;font-weight:700;text-transform:uppercase;margin-top:.7rem;font-size:1.05rem;} .video__artist{font-family:"Space Mono",monospace;font-size:.72rem;color:var(--muted);text-transform:uppercase;} .video iframe{width:100%;aspect-ratio:16/9;border:0;} .vid-group{scroll-margin-top:96px;} .vid-group + .vid-group{margin-top:1.25rem;} /* desktop videos page: tighter gap between the artist name and its rule, and less space overall */ @media(min-width:641px){.vid-group .shead{padding-bottom:.5rem;margin-bottom:1.7rem;}} /* mobile videos page: less vertical space between artist sections */ @media(max-width:640px){.vid-group + .vid-group{margin-top:1.1rem;}} /* ---- PAGE HEAD ---- */ .page-head{padding-top:clamp(1.5rem,3.5vw,2.75rem);padding-bottom:clamp(1rem,2vw,1.6rem);} .page-head h1{font-size:clamp(2rem,6.7vw,4.7rem);font-weight:800;text-transform:uppercase;letter-spacing:-.045em;margin:0;} .page-head p{max-width:50ch;color:var(--muted);font-family:"Newsreader",serif;} .filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.8rem 0 .5rem;} .home-strip .filters{margin:.1rem 0 .6rem;} /* Touch targets. These add hit area only — a transparent overlay owned by the control, or padding canceled by an equal negative margin — so nothing shifts by a pixel. Applied only where neighbours are far enough apart that the expanded areas cannot overlap. */ @media(hover:none){ .nav__toggle{padding:.75rem;margin:-.35rem;} .release__links .lk,.footer__legal a{position:relative;} .release__links .lk::after,.footer__legal a::after{content:"";position:absolute;left:-6px;right:-6px; top:50%;transform:translateY(-50%);height:44px;} .chip::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px;} .chip{position:relative;} } .chip{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;padding:.42rem 1rem;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;} .chip.is-active,.chip:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);} /* ---- ARTIST DETAIL ---- */ .artist-hero{display:grid;grid-template-columns:1fr;gap:2.6rem;} .artist-hero>*{min-width:0;} /* grid items default to min-content width and force overflow */ @media(min-width:860px){.artist-hero{grid-template-columns:minmax(0,460px) 1fr;align-items:start;}.artist-hero__photo{position:sticky;top:96px;}} .artist-hero__photo{aspect-ratio:4/3;} .artist-hero .eyebrow{color:var(--accent-ink);} .artist-hero h1{font-size:clamp(2.8rem,7vw,5.5rem);font-weight:800;text-transform:uppercase;letter-spacing:-.045em;margin:.2rem 0;} .artist-hero__info{container-type:inline-size;} @supports (font-size:1cqw){.artist-hero h1{font-size:clamp(2.05rem,13cqw,5.5rem);}} .artist-links{display:flex;flex-wrap:wrap;gap:1.2rem;margin:1.5rem 0;align-items:center;} .artist-bio{max-width:60ch;} .artist-bio p{font-family:"Newsreader",serif;font-size:1.2rem;line-height:1.55;} .artist-bio__more{margin:0;} .artist-bio__more>*:not(summary){animation:bioReveal .28s ease both;} @keyframes bioReveal{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}} .artist-bio__toggle{display:inline-flex;align-items:center;gap:.4em;list-style:none;cursor:pointer;margin:.4rem 0 .2rem;font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);border-bottom:1px solid var(--accent-ink);padding-bottom:2px;width:max-content;transition:opacity .18s;} .artist-bio__toggle:hover{opacity:.6;} .artist-bio__toggle::-webkit-details-marker{display:none;} .artist-bio__more .rm-less{display:none;} .artist-bio__more[open] .rm-more{display:none;} .artist-bio__more[open] .rm-less{display:inline;} .artist-bio__more[open] .artist-bio__toggle{margin-top:1rem;} .artist-releases .eyebrow{margin-top:1rem;color:var(--accent-ink);} .artist-tour .eyebrow{color:var(--accent-ink);} .artist-tour{border-top:1px solid var(--line);padding-top:2rem;} /* Seated widget (data-seated-theme="none" inherits our fonts). Lay each show out as a clean row and style the ticket link as a button. Wildcard [class*=] selectors are resilient to Seated's versioned class-name suffixes. */ .artist-tour [id^="seated-"]{max-width:64ch;font-family:"Newsreader",serif;} .artist-tour [class*="seated-event-row"]{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem 1.1rem;padding:1.05rem 0;border-bottom:1px solid var(--line);} .artist-tour [class*="seated-event-date"]{flex:0 0 auto;min-width:8.5rem;font-family:"Space Mono",monospace;font-size:.78rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);} .artist-tour [class*="seated-event-venue"]{font-weight:600;font-size:1.05rem;} .artist-tour [class*="seated-event-location"]{color:var(--muted);font-size:1.05rem;} .artist-tour [class*="seated-event-details"]{width:100%;color:var(--muted);font-size:.92rem;} .artist-tour a{display:inline-block;margin-left:auto;font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);border-bottom:1px solid var(--accent-ink);padding-bottom:2px;white-space:nowrap;} .artist-tour [class*="seated-empty"]{font-family:"Space Mono",monospace;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);} /* --- artist detail redesign (Spotify / videos / merch / releases) --- */ .adetail-sec{padding-top:2.4rem;padding-bottom:0;} .sp-wrap{width:100%;} .sp-embed{display:block;width:100%;border:0;border-radius:12px;background:var(--paper2);} .artist-hero__media{display:flex;flex-direction:column;gap:1.4rem;} @media(min-width:860px){.adetail--a .artist-hero__photo{position:static;}} .adetail-banner{padding-bottom:1.4rem;margin-bottom:2.2rem;border-bottom:1px solid var(--ink);} .adetail-banner .eyebrow{color:var(--accent-ink);} .adetail-banner h1{font-size:clamp(2.8rem,9vw,6.5rem);font-weight:800;text-transform:uppercase;letter-spacing:-.045em;margin:.1rem 0 .3rem;line-height:.95;} .adetail-banner .artist-links{margin:1rem 0 0;} @media(min-width:860px){.artist-hero--c{grid-template-columns:minmax(0,460px) 1fr;}} /* Listen player: constrained to a square-ish block (not a full-width bar) */ .adetail-listen .sp-wrap{max-width:460px;} /* ---- ETHOS / CTA ---- */ .ethos{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);} .ethos__q{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(2rem,5.5vw,4rem);text-transform:uppercase;letter-spacing:-.04em;max-width:18ch;line-height:.98;} .ethos__q em{font-style:normal;color:var(--accent);} .ethos p.muted{font-family:"Newsreader",serif;max-width:50ch;margin-top:1.2rem;} .cta h2{font-size:clamp(2.2rem,6vw,4.5rem);font-weight:800;text-transform:uppercase;letter-spacing:-.04em;} .cta h2 em{font-style:normal;color:var(--accent);} .btn{display:inline-block;font-family:"Space Mono",monospace;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;padding:.95rem 2.2rem;background:var(--accent-ink);color:var(--on-accent);border:0;cursor:pointer;transition:opacity .18s;} .btn:hover{opacity:.82;} .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);} .btn--ghost:hover{background:var(--ink);color:var(--paper);opacity:1;} /* ---- FOOTER ---- */ .site-footer{border-top:1px solid var(--ink);margin-top:1.5rem;padding-top:1.25rem;padding-bottom:1.25rem;} .footer__top{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;align-items:flex-start;} /* Wordmark + newsletter stack in one left column so the signup fills the empty space under "Rose Garden" instead of making the footer taller. */ .footer__brand{display:flex;flex-direction:column;gap:.8rem;flex:1 1 320px;min-width:min(100%,300px);} .footer__name{font-family:"Archivo",sans-serif;font-weight:800;font-size:clamp(2.4rem,6vw,4.5rem);text-transform:uppercase;letter-spacing:-.045em;line-height:.9;} .footer__cols{display:flex;gap:3rem;} .footer__cols ul{list-style:none;margin:0;padding:0;} .footer__cols li{margin-bottom:.28rem;line-height:1.2;} .footer__h{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:.5rem;} .footer__cols a{font-family:"Space Mono",monospace;font-size:.76rem;text-transform:uppercase;color:var(--ink);} .footer__cols a:hover{color:var(--accent);} /* padding-left keeps the sub-footer clear of the palette pill parked in the lower-left. */ .footer__fine{display:flex;gap:2rem;flex-wrap:wrap;font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:1.25rem;border-top:1px solid var(--line);padding-top:.7rem;padding-left:7.5rem;} /* Phone: the 2rem flex gap applied to WRAPPED ROWS too, so the three stacked lines sat 32px apart — ~184px of sub-footer. Tight row gap, generous column gap. The bottom padding is the clearance the fixed palette pill needs (it occupies the bottom 49px), not decoration. */ @media(max-width:640px){ /* .68rem (not the desktop .7rem) is what lets the city and the founding year sit on one line at 390px, so the middot reads as a separator rather than a line break. */ .footer__fine{font-size:.68rem;gap:.4rem .8rem;padding-left:0;padding-bottom:3.4rem;margin-top:.9rem;padding-top:.6rem;} /* Middot between the city and the founding year. Attached to the END of "Brooklyn, New York" with a non-breaking space, not the start of the year — if the line wraps, a trailing separator reads correctly whereas a leading one looks like a stray bullet. */ .footer__fine .ff-place::after{content:"\00a0·";} } /* Phone: drop the trailing clause so the signup line stays on one line. */ @media(max-width:640px){.nn-tail{display:none;}} /* ---- FORM ---- */ .form{max-width:560px;} .form label{display:block;font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:1.2rem 0 .4rem;} .form input,.form textarea,.form select{width:100%;font-family:"Newsreader",serif;font-size:1.05rem;padding:.75rem .85rem;border:1px solid var(--ink);background:transparent;color:var(--ink);} .form input:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:-2px;} .form select option{color:#000;} .form textarea{min-height:150px;resize:vertical;} .form .btn{margin-top:1.5rem;} .form__note{font-family:"Newsreader",serif;font-style:italic;color:var(--muted);margin-top:1rem;} /* ---- CONTACT COPY ---- */ .contact-layout{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start;} @media(min-width:900px){.contact-layout{grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,5rem);}} .contact-copy{max-width:60ch;} .contact-copy p{font-family:"Newsreader",serif;font-size:1.12rem;line-height:1.55;} .contact-copy .eyebrow{color:var(--accent-ink);} .contact-copy strong{font-weight:600;} .contact-layout .form{max-width:none;} /* email addresses stay lowercase, not uppercased like other .lk links */ a[href^="mailto:"]{text-transform:none;letter-spacing:0;} /* email addresses in the contact copy + footer use the Newsreader body serif, not mono */ .contact-copy a[href^="mailto:"]{font-family:"Newsreader",Georgia,serif;font-size:inherit;} .footer__cols a[href^="mailto:"]{font-family:"Newsreader",Georgia,serif;font-size:.95rem;} /* 320px: the Inquiries email is unbreakable and pushed the page 4px wide. */ @media(max-width:400px){.footer__cols{gap:1.3rem;}.footer__cols a[href^="mailto:"]{font-size:.8rem;}} /* Phone: footer links sat 4px apart, so a 14px-tall link couldn't grow its hit area without colliding with its neighbor. Give each link a full-width block with real padding so the whole row is tappable rather than just the word. Padding is tuned to ~29px rows: the first pass used .95rem for 45px Apple-style targets, which read as dead vertical space next to the desktop footer's 19px rows. 29px still clears WCAG 2.2 AA target size (24x24 CSS px, SC 2.5.8) with room to spare — 44px is the AAA figure, not the conformance bar. */ @media(max-width:640px){ .footer__cols li{margin-bottom:0;border-bottom:0;} .footer__cols a{display:block;padding:.4rem 0;line-height:1.35;} .footer__cols .footer__h{margin-bottom:.15rem;} /* the 2.5rem desktop gap becomes a wrapped-row gap on phones, stranding the signup form ~40px above the link columns. */ .footer__top{gap:1.5rem;} .footer__news .form__note{margin-top:.4rem;} } /* ---- PALETTE "FILTER" SWITCHER (Bypass / High-Pass / Low-Pass) ---- */ .pal{position:fixed;left:1rem;bottom:1rem;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;z-index:100;display:flex;gap:2px;background:color-mix(in srgb, var(--paper) 86%, transparent);backdrop-filter:blur(8px);border:1px solid var(--ink);border-radius:999px;padding:3px;box-shadow:0 3px 12px rgba(0,0,0,.16);} .pal__sw{width:27px;height:27px;border-radius:50%;border:0;background:transparent;color:var(--ink);font-size:0;line-height:0;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .18s,color .18s;} .pal__sw.on{background:var(--accent-ink);color:var(--on-accent);} .pal__sw:not(.on):hover{background:color-mix(in srgb, var(--ink) 10%, transparent);} .pal__sw:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;} .pal--drag{cursor:grabbing;box-shadow:0 8px 22px rgba(0,0,0,.26);} /* Draw the three marks with CSS (hollow circle / up / down) instead of relying on Unicode glyphs, which render inconsistently (emoji-colored or invisible) across platforms. currentColor tracks the ink / on-accent color, so all three stay visible in every palette and in the active state. */ .pal__sw::before{content:"";display:block;} .pal__sw[data-pal=""]::before{width:9px;height:9px;box-sizing:border-box;border-radius:50%;border:1.6px solid currentColor;} .pal__sw[data-pal="field"]::before{width:0;height:0;border-left:5.5px solid transparent;border-right:5.5px solid transparent;border-bottom:9.5px solid currentColor;} .pal__sw[data-pal="ink"]::before{width:0;height:0;border-left:5.5px solid transparent;border-right:5.5px solid transparent;border-top:9.5px solid currentColor;} @media(max-width:640px){.pal{left:.7rem;bottom:.7rem;}.pal__sw{width:30px;height:30px;}} /* Without JS the switcher is a dead control (no listeners), so don't show one. */ html:not(.js) .pal{display:none;} /* Pre-JS active state. The baked markup always marks Bypass active, but the head script restores the saved palette before first paint — these rules make the active pip agree with the palette that's actually applied, so there's no flash of the wrong mark. */ html[data-theme] .pal__sw.on[data-pal=""]{background:transparent;color:var(--ink);} html[data-theme="field"] .pal__sw[data-pal="field"], html[data-theme="ink"] .pal__sw[data-pal="ink"]{background:var(--accent-ink);color:var(--on-accent);} /* ---- MOTION ---- */ html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;} html.js .reveal.is-in{opacity:1;transform:none;} /* Above-the-fold items are revealed on load without the entrance fade — animating them only delays LCP. Set by initReveal(); stripped by the prerender so bakes stay stable. */ html.js .reveal.no-anim{transition:none;} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}.reveal{opacity:1!important;transform:none!important;}} /* ============================================================ ADDITIONS — QA/VA pass (July 2026) ============================================================ */ /* QA-4: the video play control is now a real