/* ============================================================================ RAHA NA RHYTHM — stylesheet Colour and type decisions are documented in ACCESSIBILITY.txt. Every text colour here has been contrast-checked against its background. ========================================================================== */ :root{ /* --- palette, sampled from the wordmark --------------------------------- */ --brown:#251408; /* wordmark background, used for raised sections */ --ink:#1A0F06; /* page background */ --gold:#CD9A30; /* 7.4:1 on ink — AAA */ --cream:#E6E3DB; /* 14.7:1 on ink — AAA, body text */ --lilac:#DB9AEF; /* 8.9:1 on ink — AAA, single accent */ --dim:#BEB09C; /* 8.4:1 on brown — AAA, secondary text */ --faint:#B0A08B; /* 7.4:1 on ink — AAA, placeholders and TBC */ --edge:#9A7B4F; /* 4.8:1 on ink — clears 3:1 for controls (1.4.11) */ --rule:#3B2814; /* decorative dividers only, never a border on a control and never behind text */ /* --- type -------------------------------------------------------------- */ --display:"Bricolage Grotesque",system-ui,sans-serif; --body:"Newsreader",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,monospace; /* smallest text on the site is 12px; labels never go below it */ --t-label:12px; --t-body:18px; --pad:clamp(20px,5vw,76px); /* --max is the CONTENT width. --shell adds the gutters, so every container below can use the same value and land on the same left and right edge. Before this, .wrap put its padding inside the max-width while the footer put it outside, which made the footer a gutter wider than every section. */ --max:1480px; --shell:calc(var(--max) + var(--pad) * 2); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--ink);color:var(--cream); /* Weight 400, not 300. A light serif holds up on white and goes thin and grey on a dark background, which reads as low contrast even when the measured ratio is fine. Antialiasing is left at the browser default for the same reason: -webkit-font-smoothing:antialiased thins light text on dark backgrounds in Safari. */ font-family:var(--body);font-weight:400; font-size:var(--t-body);line-height:1.62; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit} h1,h2,h3{margin:0} /* text stays selectable and zoomable to 200% without horizontal scroll */ .wrap{max-width:var(--shell);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} .eyebrow{font-family:var(--mono);font-size:var(--t-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .sec{padding-top:clamp(56px,7.5vw,104px);padding-bottom:clamp(56px,7.5vw,104px);border-top:1px solid var(--rule)} .sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,46px)} .h2{font-family:var(--display);font-weight:800;font-size:clamp(29px,4.2vw,50px);line-height:1.02;letter-spacing:-.02em} /* --- skip link ----------------------------------------------------------- */ .skip{ position:absolute;left:-9999px;top:0;z-index:60; background:var(--gold);color:var(--ink);padding:13px 20px; font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em; text-transform:uppercase;text-decoration:none; } .skip:focus{left:12px;top:12px} /* --- header -------------------------------------------------------------- */ .bar{ position:sticky;top:0;z-index:30; background:rgba(26,15,6,.94); border-bottom:1px solid transparent;transition:border-color .3s ease; } /* backdrop-filter is desktop only, and deliberately so: an element with a backdrop-filter becomes the containing block for its position:fixed descendants, which would size the mobile menu panel against the 65px header instead of the viewport. Above the breakpoint there is no panel, so the blur is free. */ @media(min-width:901px){ .bar{background:rgba(26,15,6,.9);backdrop-filter:blur(10px)} } /* Same column as .wrap and .hero-in, so the logo sits directly above the hero wordmark and the button ends level with the content edge below it. */ .bar-in{ max-width:var(--shell);margin:0 auto;padding:11px var(--pad); display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:16px; } .bar-logo{flex:0 0 auto;order:1} .nav{order:2} .nav{flex:0 1 auto;min-width:0} .lbl-short{display:none} .bar.stuck{border-bottom-color:var(--rule)} .bar-logo{display:block;padding:4px 0} .bar-logo img{height:44px;width:auto} .nav{display:flex;align-items:center;gap:4px} .bar-right{display:none;align-items:center;gap:8px;order:3} .bar-right .bar-cta{display:none} /* the nav carries the CTA on desktop. Scoped so it beats .btn, which is declared later at equal specificity. */ .burger{display:none} .nav a:not(.btn){ font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em; text-transform:uppercase;text-decoration:none;color:var(--dim); padding:13px 10px; /* 44px tall touch target */ } .nav a:not(.btn):hover,.nav a:not(.btn):focus-visible{color:var(--cream)} .nav a[aria-current=page]{color:var(--gold)} .nav .wide{display:none} @media(min-width:900px){.nav .wide{display:inline-block}} /* --- buttons ------------------------------------------------------------- */ .btn{ display:inline-block;font-family:var(--mono);font-size:13px;font-weight:500; letter-spacing:.13em;text-transform:uppercase;text-decoration:none; padding:16px 29px;border:1px solid var(--gold);background:var(--gold); color:var(--ink);cursor:pointer; transition:background .2s,color .2s,border-color .2s,transform .2s; } .btn:hover,.btn:focus-visible{background:var(--lilac);border-color:var(--lilac);transform:translateY(-2px)} /* Outline buttons: same shape and weight as the filled ones, gold border and gold text, no fill until hover. They then wipe to the same light purple as every other call to action, so the whole set behaves alike. */ .btn-ghost{background:transparent;color:var(--gold);border-color:var(--gold)} .btn-ghost:hover,.btn-ghost:focus-visible{color:var(--ink);border-color:var(--lilac)} .btn-ghost::before{background:var(--lilac)} .btn-sm{padding:13px 18px;font-size:12px;min-height:44px;line-height:1.35} /* Not yet available. The label carries that meaning, so it keeps the outline button's appearance and hover; only the pointer changes, since there is nothing to click yet. */ .btn[aria-disabled=true]{cursor:default} .btn[aria-disabled=true]:hover,.btn[aria-disabled=true]:focus-visible{transform:none} /* --- hero ---------------------------------------------------------------- */ .hero{position:relative;min-height:min(88vh,780px);display:flex;align-items:flex-end;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;filter:saturate(.95)} /* The bottom stays near-solid so the headline keeps its contrast, but the top two thirds are left largely clear so the photograph actually reads. */ .hero-bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(to top,var(--ink) 3%,rgba(26,15,6,.78) 32%,rgba(26,15,6,.3) 62%,rgba(26,15,6,.12) 100%), linear-gradient(to right,rgba(37,20,8,.62),rgba(37,20,8,.06) 62%); } .hero-in{position:relative;z-index:1;width:100%;max-width:var(--shell);margin:0 auto;padding:clamp(46px,8vw,96px) var(--pad) clamp(40px,6vw,72px)} .hero-logo{width:clamp(230px,34vw,430px);margin-bottom:clamp(22px,3.4vw,34px)} .meta{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:clamp(16px,2.4vw,22px)} .meta .sl{color:var(--edge)} .bill{font-family:var(--display);font-weight:800;font-size:clamp(44px,8.6vw,116px);line-height:.92;letter-spacing:-.035em;text-transform:lowercase} .bill em{font-family:var(--body);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--gold);text-transform:none} .hero-foot{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;margin-top:clamp(26px,4vw,40px)} .hero-note{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;color:var(--cream);max-width:28ch;margin:0} /* --- page head (gallery) ------------------------------------------------- */ /* Block padding only. A `padding` shorthand here would reset the horizontal inset that .wrap applies, pushing this block out of line with the sections below it. */ .phead{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(30px,4vw,48px)} .phead h1{font-family:var(--display);font-weight:800;font-size:clamp(38px,7vw,84px);line-height:.98;letter-spacing:-.035em} .phead .intro{max-width:54ch;margin:22px 0 0;color:var(--cream);font-size:19px;line-height:1.6} .phead .intro a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--edge)} .phead .intro a:hover,.phead .intro a:focus-visible{border-bottom-color:var(--gold)} /* --- about --------------------------------------------------------------- */ .about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,72px);align-items:start} .about p { margin: 0; font-size: clamp(21px, 2.4vw, 25px); line-height: 1.42; letter-spacing: -.005em; font-weight: 400; } .about ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px} .about li{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-bottom:13px;border-bottom:1px solid var(--rule)} @media(max-width:760px){.about{grid-template-columns:1fr}} /* --- carousel ------------------------------------------------------------ */ .rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px} .rail-nav{display:flex;gap:9px} .arrow{ width:46px;height:46px;border:1px solid var(--edge);background:transparent; color:var(--cream);cursor:pointer;display:grid;place-items:center; font-family:var(--mono);font-size:16px;transition:border-color .2s,color .2s; } .arrow:hover,.arrow:focus-visible{border-color:var(--gold);color:var(--gold)} .arrow[disabled]{opacity:.4;cursor:default} .rail{ display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px; margin-right:calc(var(--pad) * -1);padding-right:var(--pad); } .rail::-webkit-scrollbar{display:none} .slide{flex:0 0 min(78vw,660px);scroll-snap-align:start;position:relative;background:var(--brown);overflow:hidden} .slide-img{aspect-ratio:3/2;width:100%} .slide-img img{width:100%;height:100%;object-fit:cover} .slide figcaption{ position:absolute;left:0;right:0;bottom:0;margin:0;padding:30px 18px 15px; font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em; text-transform:uppercase;color:var(--cream); background:linear-gradient(to top,rgba(26,15,6,.94),transparent); } .dots{display:flex;gap:7px;margin-top:18px} .dot{width:26px;height:12px;background:transparent;border:0;padding:5px 0;cursor:pointer} .dot::before{content:"";display:block;height:2px;background:var(--edge)} .dot[aria-current=true]::before{background:var(--gold)} /* --- the record ---------------------------------------------------------- */ .rec{border-top:1px solid var(--rule)} .row{display:grid;grid-template-columns:58px 1fr auto;gap:clamp(12px,3vw,30px);align-items:baseline;padding:clamp(19px,2.5vw,28px) 0;border-bottom:1px solid var(--rule)} .row-no,.row-stat{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase;color:var(--dim)} .row-stat{text-align:right;white-space:nowrap} .row-t{font-family:var(--display);font-weight:700;font-size:clamp(22px,3.1vw,36px);line-height:1.04;letter-spacing:-.02em} .row-sub{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:8px} .row.open .row-t,.row.open .row-no,.row.open .row-stat{color:var(--gold)} @media(max-width:720px){ .row{grid-template-columns:44px 1fr;row-gap:7px} .row-stat{grid-column:2;text-align:left} } /* --- lineup -------------------------------------------------------------- */ .slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--rule)} .slot{background:var(--ink);padding:clamp(22px,2.8vw,34px) clamp(18px,2.2vw,26px);min-height:190px;display:flex;flex-direction:column;justify-content:space-between;gap:24px} .slot-kind{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--lilac)} .slot-name,.slot-tbc{font-family:var(--display);font-weight:700;font-size:clamp(23px,2.7vw,32px);line-height:1.04;letter-spacing:-.02em} .slot-tbc{color:var(--faint)} .slot-note{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:9px 0 0} /* --- the list ------------------------------------------------------------ */ .list-sec{background:var(--brown)} .list{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,6vw,76px);align-items:start} .list p{margin:14px 0 0;max-width:44ch;font-size:18px;line-height:1.62} .list .fine{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;color:var(--dim);margin-top:20px} .field{display:flex;flex-direction:column;gap:10px} .field label{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .field input{width:100%;background:transparent;border:1px solid var(--edge);padding:14px 13px;color:var(--cream);font-family:var(--body);font-size:19px} .field input::placeholder{color:var(--faint);opacity:1} .field input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)} .field .hint{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;color:var(--dim)} .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .msg{font-family:var(--mono);font-size:13px;letter-spacing:.05em;margin:18px 0 0;padding:14px 15px;border-left:3px solid var(--gold);background:rgba(205,154,48,.1)} .msg.bad{border-left-color:var(--lilac);background:rgba(219,154,239,.1)} @media(max-width:820px){.list{grid-template-columns:1fr}} /* --- instagram ----------------------------------------------------------- */ .ig{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule)} .ig a{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--brown)} .ig img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,opacity .3s ease} .ig a:hover img,.ig a:focus-visible img{transform:scale(1.05);opacity:.45} .ig .tag{ position:absolute;inset:auto 0 0 0;padding:13px;opacity:0;transition:opacity .3s ease; font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em; text-transform:uppercase;color:var(--gold); } .ig a:hover .tag,.ig a:focus-visible .tag{opacity:1} /* --- partners ------------------------------------------------------------ */ .snap{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--rule);margin-bottom:clamp(28px,4vw,42px)} .cell{background:var(--ink);padding:clamp(20px,2.5vw,30px)} .fig{font-family:var(--display);font-weight:800;font-size:clamp(37px,5vw,58px);line-height:.94;letter-spacing:-.03em;color:var(--gold)} .fig-l{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase;color:var(--cream);margin-top:11px;max-width:22ch} .fig-s{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase;color:var(--dim);margin-top:6px;max-width:24ch} .p-copy{max-width:54ch} .p-copy p{margin:0 0 17px;font-size:18px;line-height:1.62} .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} /* --- gallery page -------------------------------------------------------- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px} .tile{position:relative;display:block;padding:0;border:0;background:var(--brown);cursor:zoom-in;overflow:hidden;aspect-ratio:3/2} .tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .tile:hover img,.tile:focus-visible img{transform:scale(1.04)} .vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:16px;max-width:620px} .vid{position:relative;aspect-ratio:16/9;background:var(--brown);border:0;padding:0;cursor:pointer;overflow:hidden;width:100%} .vid img{width:100%;height:100%;object-fit:cover;opacity:.8} .vid .play{ position:absolute;inset:0;display:grid;place-items:center; font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em; text-transform:uppercase;color:var(--cream); } .vid .play span{border:1px solid var(--cream);padding:13px 22px;background:rgba(26,15,6,.6)} .vid:hover .play span,.vid:focus-visible .play span{border-color:var(--gold);color:var(--gold)} .vid iframe{width:100%;height:100%;border:0} .empty{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--dim);border:1px dashed var(--edge);padding:26px} /* --- lightbox ------------------------------------------------------------ */ .lb{position:fixed;inset:0;z-index:50;background:rgba(12,7,3,.96);display:none;align-items:center;justify-content:center;padding:clamp(14px,4vw,50px)} .lb[open],.lb.on{display:flex} .lb img{max-width:100%;max-height:82vh;object-fit:contain} .lb-close{ position:absolute;top:14px;right:14px;width:46px;height:46px; border:1px solid var(--edge);background:transparent;color:var(--cream); cursor:pointer;font-family:var(--mono);font-size:17px; } .lb-close:hover,.lb-close:focus-visible{border-color:var(--gold);color:var(--gold)} .lb-cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} /* --- audio toggle -------------------------------------------------------- */ .audio{ position:fixed;right:14px;bottom:14px;z-index:40;display:flex;align-items:center;gap:9px; padding:10px 15px;min-height:46px;border:1px solid var(--edge); background:rgba(37,20,8,.94);backdrop-filter:blur(8px); color:var(--cream);cursor:pointer; font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase; } .audio:hover,.audio:focus-visible{border-color:var(--gold);color:var(--gold)} .audio .bars{display:flex;align-items:flex-end;gap:2px;height:13px} .audio .bars i{width:2px;height:4px;background:currentColor;display:block} .audio[aria-pressed=true] .bars i{animation:eq .9s ease-in-out infinite} .audio[aria-pressed=true] .bars i:nth-child(2){animation-delay:.15s} .audio[aria-pressed=true] .bars i:nth-child(3){animation-delay:.3s} @keyframes eq{0%,100%{height:4px}50%{height:13px}} /* --- footer -------------------------------------------------------------- */ .foot{border-top:1px solid var(--rule);padding:42px 0 60px} .foot-in{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap} .foot img{height:44px;width:auto;margin-bottom:16px} .foot-l{display:flex;gap:6px;flex-wrap:wrap} .foot-l a{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--dim);padding:13px 10px;display:inline-flex;align-items:center;min-height:44px} .foot-l a:hover,.foot-l a:focus-visible{color:var(--gold)} .powered{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin:0} .powered a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--edge)} .powered a:hover,.powered a:focus-visible{color:var(--gold);border-bottom-color:var(--gold)} /* --- motion and accessibility preferences -------------------------------- */ .rise{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease} .rise.in{opacity:1;transform:none} :focus-visible{outline:2px solid var(--gold);outline-offset:3px} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rise{opacity:1;transform:none;transition:none} .rail{scroll-behavior:auto} .btn,.ig img,.tile img,.arrow{transition:none} .btn:hover,.btn:focus-visible{transform:none} .audio[aria-pressed=true] .bars i{animation:none;height:9px} } @media(prefers-contrast:more){ :root{--dim:#D6CBBC;--faint:#D6CBBC;--edge:#C6B49B;--rule:#6B5030} .hero-bg::after{background:linear-gradient(to top,var(--ink) 6%,rgba(26,15,6,.88) 42%,rgba(26,15,6,.5) 100%)} } @media print{ .bar,.audio,.rail-nav,.dots{display:none} body{background:#fff;color:#000} } /* ========================================================================== VISUAL LAYER Added after the base rules so these win on equal specificity. Everything here is disabled under prefers-reduced-motion at the bottom. ========================================================================== */ /* --- film grain, very low opacity, sits above everything ------------------ */ body::after{ content:"";position:fixed;inset:0;z-index:35;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --- warm bloom behind the fold ------------------------------------------ */ .hero-in::before{ content:"";position:absolute;left:calc(var(--pad) * -0.4);bottom:-30%; width:min(680px,80vw);aspect-ratio:1;z-index:-1;pointer-events:none; background:radial-gradient(circle at 40% 60%,rgba(205,154,48,.22),transparent 66%); } /* --- entrance stagger ---------------------------------------------------- */ @keyframes lift{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} @keyframes settle{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .hero-logo{animation:settle .9s cubic-bezier(.2,.7,.2,1) both} .hero .meta{animation:lift .8s cubic-bezier(.2,.7,.2,1) .14s both} .bill{animation:lift .9s cubic-bezier(.2,.7,.2,1) .24s both} .hero-foot{animation:lift .8s cubic-bezier(.2,.7,.2,1) .4s both} /* --- the hero image drifts, very slowly ---------------------------------- */ @keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.07)}} .hero-bg img{animation:drift 26s ease-in-out infinite alternate;will-change:transform} /* --- headings wipe in from the baseline ---------------------------------- */ .h2,.phead h1{ clip-path:inset(0 0 110% 0); transition:clip-path .85s cubic-bezier(.2,.75,.2,1); } .h2.shown,.phead h1.shown{clip-path:inset(0 0 -20% 0)} /* --- section rules draw across --------------------------------------------*/ .sec{position:relative} .sec::before{ content:"";position:absolute;top:-1px;left:0;height:1px;width:0; background:linear-gradient(90deg,var(--gold),transparent); transition:width 1.1s cubic-bezier(.2,.75,.2,1); } .sec.shown::before{width:min(320px,42%)} /* --- ledger rows: gold sweep on hover, index tick ------------------------ */ .row{position:relative;transition:padding-left .35s ease} .row::after{ content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0; background:var(--gold);transition:width .5s cubic-bezier(.2,.75,.2,1); } .row:hover::after{width:100%} .row:hover{padding-left:10px} .row-link{ font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em; text-transform:uppercase;color:var(--gold);text-decoration:none; border-bottom:1px solid transparent;white-space:nowrap; display:inline-flex;align-items:center;min-height:44px;padding:0 2px; } .row-link:hover,.row-link:focus-visible{border-bottom-color:var(--gold)} .row-quiet{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)} /* --- lineup slots warm on hover ----------------------------------------- */ .slot{transition:background .4s ease,transform .4s ease} .slot:hover{background:var(--brown)} /* --- stat cells count up visually --------------------------------------- */ .cell{transition:background .4s ease} .cell:hover{background:var(--brown)} .snap .cell .fig{transition:transform .5s cubic-bezier(.2,.75,.2,1)} .snap .cell:hover .fig{transform:translateY(-3px)} /* --- carousel: dim the slides that aren't centred ------------------------ */ .slide{transition:opacity .45s ease} .rail:hover .slide{opacity:.62} .rail .slide:hover{opacity:1} /* --- marquee band, the poster device ------------------------------------- */ .marquee{ overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule); background:var(--brown);padding:16px 0; } .marquee-track{display:flex;width:max-content;animation:slide 34s linear infinite} .marquee span{ font-family:var(--display);font-weight:700;font-size:clamp(20px,3.1vw,34px); letter-spacing:-.01em;text-transform:lowercase;color:var(--cream); padding:0 clamp(14px,2.4vw,26px);white-space:nowrap; } .marquee span.gold{color:var(--gold)} .marquee span.mark{color:var(--edge)} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .marquee:hover .marquee-track{animation-play-state:paused} /* --- buttons get a fill wipe -------------------------------------------- */ .btn{position:relative;overflow:hidden;isolation:isolate} .btn::before{ content:"";position:absolute;inset:0;z-index:-1;background:var(--lilac); transform:translateY(101%);transition:transform .38s cubic-bezier(.2,.75,.2,1); } .btn:hover::before,.btn:focus-visible::before{transform:none} .btn-ghost::before{background:transparent} /* --- gallery tiles ------------------------------------------------------- */ .tile::after{ content:"";position:absolute;inset:0;background:rgba(205,154,48,0); transition:background .35s ease; } .tile:hover::after,.tile:focus-visible::after{background:rgba(205,154,48,.14)} /* --- audio control gets a first-visit nudge ----------------------------- */ @keyframes nudge{0%,88%,100%{transform:none}92%{transform:translateY(-4px)}96%{transform:translateY(-2px)}} .audio.hint{animation:nudge 5s ease-in-out 2s 2} /* --- reduced motion switches all of it off ------------------------------ */ @media(prefers-reduced-motion:reduce){ .hero-logo,.hero .meta,.bill,.hero-foot,.hero-bg img,.marquee-track,.audio.hint{animation:none} .h2,.phead h1{clip-path:none;transition:none} .sec::before{transition:none;width:min(320px,42%)} .row,.row::after,.slot,.cell,.snap .cell .fig,.slide,.btn::before,.tile::after{transition:none} .row:hover{padding-left:0} body::after{opacity:.03} } /* ========================================================================== UPCOMING EVENT CARD ========================================================================== */ .up-card{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); background:var(--brown);border:1px solid var(--rule);overflow:hidden; } .up-art{position:relative;min-height:320px;background:var(--ink)} .up-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .up-flag{ position:absolute;top:16px;left:16px;z-index:2; font-family:var(--mono);font-size:var(--t-label);font-weight:500; letter-spacing:.14em;text-transform:uppercase; background:var(--gold);color:var(--ink);padding:9px 15px; } /* typographic stand-in until a poster exists */ .up-panel{ position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between; padding:clamp(24px,3vw,40px); background: radial-gradient(120% 90% at 15% 12%,rgba(205,154,48,.2),transparent 60%), var(--ink); } .up-panel-no{ font-family:var(--display);font-weight:800;font-size:clamp(96px,15vw,190px); line-height:.8;letter-spacing:-.05em;color:transparent; -webkit-text-stroke:1.5px var(--gold); } .up-panel-tag{ font-family:var(--body);font-style:italic;font-weight:400;font-size:clamp(24px,3.4vw,42px); line-height:1.1;color:var(--cream); } .up-panel-date{ font-family:var(--mono);font-size:var(--t-label);letter-spacing:.2em; text-transform:uppercase;color:var(--gold); } .up-body{padding:clamp(26px,3.2vw,44px);display:flex;flex-direction:column;gap:14px;justify-content:center} .up-title{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,42px);line-height:1.04;letter-spacing:-.025em} .up-meta{ font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em; text-transform:uppercase;color:var(--gold);margin:0; } .up-copy{margin:0;max-width:46ch;color:var(--cream);font-size:18px;line-height:1.62} .up-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px} @media(max-width:840px){ .up-card{grid-template-columns:1fr} .up-art{min-height:min(80vw,420px)} } /* ========================================================================== EDITIONS RAIL — cards scroll on their own, pause on hover, focus or button ========================================================================== */ .rail-pause{ border:1px solid var(--edge);background:transparent;color:var(--cream); padding:13px 20px;min-height:46px;cursor:pointer; font-family:var(--mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase; transition:border-color .2s,color .2s; } .rail-pause:hover,.rail-pause:focus-visible{border-color:var(--gold);color:var(--gold)} .cardrail{overflow:hidden;padding:2px 0 6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .cardrail-track{display:flex;gap:16px;width:max-content;animation:railmove 44s linear infinite;padding-left:16px} @keyframes railmove{from{transform:translateX(0)}to{transform:translateX(-50%)}} .cardrail:hover .cardrail-track, .cardrail:focus-within .cardrail-track{animation-play-state:paused} .cardrail.stopped .cardrail-track{animation-play-state:paused} .ecard{ flex:0 0 clamp(196px,22vw,268px);text-decoration:none;position:relative; display:block;background:var(--brown);overflow:hidden; } .ecard-art{position:relative;aspect-ratio:4/5;overflow:hidden} .ecard-art img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.75,.2,1)} .ecard:hover .ecard-art img,.ecard:focus-visible .ecard-art img{transform:scale(1.06)} .ecard-art::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(26,15,6,.92) 6%,rgba(26,15,6,.25) 46%,transparent 78%); } .ecard-blank{ position:absolute;inset:0;display:grid;place-items:center; background:repeating-linear-gradient(135deg,var(--ink) 0 9px,#1F1208 9px 18px); } .ecard-blank span{ font-family:var(--display);font-weight:800;font-size:74px;line-height:1; color:transparent;-webkit-text-stroke:1.5px var(--edge); } .ecard-info{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:6px; } .ecard-no{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .ecard-title{font-family:var(--display);font-weight:700;font-size:clamp(19px,2.1vw,25px);line-height:1.06;letter-spacing:-.02em;color:var(--cream)} .ecard-venue{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} .ecard::after{ content:"";position:absolute;inset:0;z-index:3;border:1px solid transparent; transition:border-color .3s ease; } .ecard:hover::after,.ecard:focus-visible::after{border-color:var(--gold)} @media(prefers-reduced-motion:reduce){ /* No self-moving content. It becomes a plain scrollable row instead. */ .cardrail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none} .cardrail-track{animation:none;width:auto} .ecard{scroll-snap-align:start} .ecard-art img,.ecard::after{transition:none} } /* ========================================================================== PER EDITION STRIPS One auto-scrolling row an edition. Everything past the third edition lives on the gallery page. ========================================================================== */ .estrip{padding:clamp(26px,3.4vw,44px) 0} .estrip + .estrip{border-top:1px solid var(--rule)} .estrip-head{ display:flex;align-items:baseline;gap:clamp(10px,1.6vw,20px); flex-wrap:wrap;margin-bottom:clamp(16px,2vw,24px); } .estrip-no{ font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em; text-transform:uppercase;color:var(--gold); } .estrip-title{ font-family:var(--display);font-weight:700;font-size:clamp(21px,2.6vw,32px); line-height:1.04;letter-spacing:-.02em; } .estrip-meta{ font-family:var(--mono);font-size:var(--t-label);letter-spacing:.11em; text-transform:uppercase;color:var(--dim); } .estrip-link{ margin-left:auto;font-family:var(--mono);font-size:var(--t-label); letter-spacing:.13em;text-transform:uppercase;color:var(--gold); text-decoration:none;border-bottom:1px solid transparent; /* padded to a 44px target: it is a control, not running text */ padding:14px 0;display:inline-flex;align-items:center;min-height:44px; } .estrip-link:hover,.estrip-link:focus-visible{border-bottom-color:var(--gold)} .estrip-empty{ font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--dim); border:1px dashed var(--edge);padding:20px;margin:0; } .estrip-empty code{color:var(--cream);font-size:12px} /* every other strip travels the other way */ .cardrail.rev .cardrail-track{animation-direction:reverse} @media(prefers-reduced-motion:reduce){ .estrip-link{padding:6px 0} } /* ========================================================================== RESPONSIVE Widths chosen from where the layout actually breaks, not round numbers. The header is the tightest element: at 360px the logo, Gallery link and full button need about 344px of the 320px available, so the label shortens and the logo steps down before that point. ========================================================================== */ /* --- tablet and below ---------------------------------------------------- */ @media(max-width:900px){ .hero{min-height:min(84vh,700px)} .marquee{padding:13px 0} .estrip-link{margin-left:0;flex-basis:100%} /* own line, no crowding */ .rail-pause{padding:12px 16px} } /* --- phones -------------------------------------------------------------- */ @media(max-width:620px){ :root{--t-body:16px} /* dvh accounts for the mobile browser chrome that vh ignores */ .hero{min-height:76vh;min-height:76dvh;align-items:flex-end} .hero-bg img{object-position:52% 28%} .hero-in{padding-top:clamp(30px,10vw,60px)} .hero-logo{width:min(280px,72vw);margin-bottom:20px} .bill{font-size:clamp(40px,12vw,64px);line-height:.96} .hero-note{max-width:none;flex-basis:100%;margin-top:2px} .hero-foot{gap:10px 12px} .hero-foot .btn{flex:1 1 auto;text-align:center} .bar-in{gap:10px;padding:9px var(--pad)} .bar-logo img{height:38px} .nav{gap:2px} .nav a:not(.btn){padding:13px 7px;letter-spacing:.1em} .btn-sm{padding:11px 14px;letter-spacing:.1em} .lbl-full{display:none} .lbl-short{display:inline} .sec{padding-top:clamp(40px,10vw,60px);padding-bottom:clamp(40px,10vw,60px)} .sec-head{margin-bottom:22px} .about p{font-size:19px} /* two up rather than one, so a phone screen isn't one tile tall */ .grid{grid-template-columns:repeat(2,1fr);gap:8px} .ig{grid-template-columns:repeat(2,1fr)} .snap{grid-template-columns:repeat(2,1fr)} .slots{grid-template-columns:1fr} .up-art{min-height:0;aspect-ratio:4/3} .up-panel{padding:20px} .up-panel-no{font-size:84px} .up-panel-tag{font-size:26px} .up-body{padding:24px 20px 28px} .up-acts .btn{flex:1 1 auto;text-align:center} .ecard{flex:0 0 62vw} .estrip{padding:22px 0} .estrip-head{gap:8px 12px} .marquee span{font-size:19px;padding:0 11px} .field input{font-size:17px} .foot-in{gap:20px} .foot img{height:38px} /* Icon only on a phone. At full width the label sat on top of body text as you scrolled. The text is clipped rather than removed so screen readers still announce it. */ .audio{ right:12px;bottom:calc(12px + env(safe-area-inset-bottom)); width:46px;height:46px;padding:0;gap:0;justify-content:center; } .audio > span:not(.bars){ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } /* the slow hero zoom costs more than it gives on a phone */ .hero-bg img{animation:none;transform:scale(1.02)} body::after{opacity:.04} } /* --- very narrow ---------------------------------------------------------- */ @media(max-width:360px){ .bar-logo img{height:34px} .nav a:not(.btn){padding:13px 5px} .up-panel-no{font-size:66px} .ecard{flex:0 0 70vw} } /* --- landscape phone: don't let the hero eat the screen ------------------- */ @media(max-height:520px) and (orientation:landscape){ .hero{min-height:auto;padding-top:20px} .hero-in{padding-top:28px;padding-bottom:28px} .hero-logo{width:min(240px,30vw)} } /* --- touch tidiness ------------------------------------------------------ */ @media(hover:none){ /* hover states never fire on touch, so make sure nothing depends on them */ .rail:hover .slide,.cardrail:hover .cardrail-track{opacity:1} .ig .tag{opacity:1;background:linear-gradient(to top,rgba(26,15,6,.8),transparent)} } * { -webkit-tap-highlight-color: rgba(205,154,48,.25) } /* ========================================================================== MOBILE MENU Under 900px the nav becomes a panel and the burger opens it. It is the same