/* ============================================================ A STORE — A Good Website Company demo Black-wall riso/print storefront. ONE wide-grotesque display family (Archivo, normal + Expanded widths), a humanist grotesque for text, and IBM Plex Mono for the shop's printout voice. Type loaded via the in each page . Site by Good Website Company. TYPE SYSTEM DISPLAY Archivo Expanded (wdth 125, 800/900) — the loud wall voice DISPLAY Archivo (normal width, 800) — utilitarian poster/UI TEXT Hanken Grotesk (400) — body copy ACCENT Hanken Grotesk italic (600) — the deadpan aside LABEL Hanken Grotesk (600, tracked caps) — connective tissue MONO IBM Plex Mono (400/500) — the printout / receipts ============================================================ */ /* -------- palette + tokens -------- DARK GIG-POSTER GROUND. The page is a near-black wall; bone is the ink; blood red is the one loud accent; torn flyers / covers / receipts stay light on purpose, like paper stapled to a black wall. */ :root{ --bone:#EDE4D3; /* light ink + light-paper surfaces */ --bone-2:#E2D7C1; /* light paper shade (flyers, receipts) */ --bone-dim:#B3A892; /* dim light text on the dark ground */ --ink:#0A0908; /* darkest accents, type on light paper */ --ink-soft:#1a1714; /* dim dark text on light paper */ --blood:#7A1518; /* loud accent — FILLS (buttons, tags) */ --blood-bright:#D85546; /* same family, lifted to clear WCAG AA as TEXT on the black grounds */ --bruise:#3D2840; /* event-tag fill */ --bruise-light:#A98CB3; /* gothic lavender — script accents on black */ --rust:#8A4A2B; /* price-label house-print, badge on light paper */ --rust-bright:#BC7544; /* used-condition badge / marks on black */ /* THE COUNTER-NOTE: one cool, quiet tone against all the heat. */ --slate:#5E7274; /* cool slate — trust microcopy + receipt ticks ONLY */ --slate-light:#8FA5A6; /* legible cool tone on the black wall */ /* dark ground surfaces */ --ground:#15100E; /* warm near-black page background */ --ground-2:#1F1815; /* raised: product cards, lifted dark blocks */ --ground-3:#0C0A09; /* deepest: footer */ --hair:rgba(237,228,211,.14); /* hairlines on the dark ground */ /* ---- ONE display family, two widths; one text face; one mono ---- */ --display:'Archivo', system-ui, sans-serif; /* base; gets stretched/weighted below */ --woodtype:'Archivo', system-ui, sans-serif; /* the loud EXPANDED display voice */ --black:'Archivo', system-ui, sans-serif; /* the heaviest block (maker's mark) */ --stencil:'Archivo', system-ui, sans-serif; /* utilitarian poster/UI display */ --script:'Hanken Grotesk', system-ui, sans-serif; /* casual aside — set ITALIC where used */ --type:'Hanken Grotesk', system-ui, sans-serif; /* body copy */ --mono:'IBM Plex Mono', ui-monospace, monospace; /* the shop's printout / receipts */ --ui:'Hanken Grotesk', system-ui, sans-serif; /* connective tissue — tracked caps */ /* expanded-width display shorthand (applied alongside --woodtype/--black) */ --wide:125%; --shadow-blood:4px 4px 0 var(--blood); --shadow-ink:4px 4px 0 var(--ink); --shadow-ink-sm:3px 3px 0 var(--ink); --gutter:clamp(18px,4vw,40px); --maxw:1240px; --ease-out:cubic-bezier(.16,1,.3,1); } /* ---------- reveal-on-scroll scaffold (one signature, gated) ---------- */ html.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);will-change:opacity,transform} html.js [data-reveal].is-in{opacity:1;transform:none} html.js [data-reveal="2"]{transition-delay:.07s} html.js [data-reveal="3"]{transition-delay:.14s} html.js [data-reveal="4"]{transition-delay:.21s} /* -------- reset -------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--ground); color:var(--bone); font-family:var(--type); font-weight:400; font-size:17px; line-height:1.6; letter-spacing:.002em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; /* faint photocopier grain on the black wall */ background-image: repeating-linear-gradient(0deg, rgba(237,228,211,.022) 0 1px, transparent 1px 3px), radial-gradient(rgba(237,228,211,.03) 1px, transparent 1px); background-size:auto, 4px 4px; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} ul{list-style:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} /* skip link (a11y) */ .skip-link{position:absolute;left:14px;top:-60px;z-index:2000;background:var(--blood);color:var(--bone);font-family:var(--stencil);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:13px;padding:12px 18px;transition:top .2s ease} .skip-link:focus{top:14px;color:var(--bone)} :focus-visible{outline:3px solid var(--blood-bright);outline-offset:3px} /* ============================================================ TYPE HELPERS — each family sticks to its job ============================================================ */ /* DISPLAY — Archivo, EXPANDED width, heaviest cut. Wide + tight-tracked = wall-poster punch. */ .woodtype{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.92} /* the heaviest block voice (maker's mark / event names) */ .black{font-family:var(--black);font-stretch:var(--wide);font-weight:900;letter-spacing:-.01em;line-height:.94} /* utilitarian poster/UI display — normal width, heavy, optically tracked open */ .stencil{font-family:var(--stencil);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1} /* the casual aside — humanist italic, lightly tracked */ .script{font-family:var(--script);font-style:italic;font-weight:600;letter-spacing:.005em;line-height:1.12} .mono{font-family:var(--mono);font-weight:400;line-height:1.3} .ui{font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.14em} .blood{color:var(--blood)} .bruise{color:var(--bruise)} .rust{color:var(--rust)} /* hand-drawn bracket label — the structural signature motif */ .label{ font-family:var(--ui);font-weight:700;text-transform:uppercase; letter-spacing:.2em;font-size:12px;color:var(--bone); display:inline-flex;align-items:center;gap:.55em; } .label::before{content:'\27E6';color:var(--blood);font-size:1.5em;line-height:0;transform:translateY(.02em)} .label::after{content:'\27E7';color:var(--blood);font-size:1.5em;line-height:0;transform:translateY(.02em)} .label.on-dark{color:var(--bone)} /* misregistered two-color wordmark — the off-press red ghost */ .misreg{position:relative;display:inline-block} .misreg::before{ content:attr(data-word);position:absolute;left:-2px;top:2px; color:var(--blood);z-index:-1; } /* THE SIGNATURE MOTION: the wordmark loads off-register, then the red plate slides into place once — like a press finding its mark. */ @keyframes plate-settle{ 0%{transform:translate(5px,4px);opacity:0} 55%{transform:translate(-2px,2px);opacity:1} 78%{transform:translate(1px,-1px)} 100%{transform:translate(-2px,2px)} } html.js .nav-logo .misreg::before{animation:plate-settle .62s var(--ease-out) .15s both} /* the store's maker's-mark stamp (AS roundel) */ .rh-mark{font-family:var(--black);font-stretch:var(--wide);font-weight:900;color:var(--blood);line-height:1;letter-spacing:-.02em;display:inline-block} /* oversized $ glyph ghosting behind headlines (number-free) */ .ghost-num{ font-family:var(--stencil);font-weight:900;color:rgba(237,228,211,.05); font-size:clamp(120px,26vw,340px);line-height:.8;letter-spacing:-.03em; position:absolute;z-index:0;pointer-events:none;user-select:none; } /* ============================================================ FLOATING NAV ============================================================ */ .nav-pad{padding:clamp(20px,3vw,38px) clamp(16px,3vw,38px) 0} .nav{ position:relative; display:flex;align-items:center;justify-content:space-between;gap:18px; background:var(--ink);color:var(--bone); box-shadow:var(--shadow-blood); border:1px solid var(--hair); padding:14px 20px; max-width:var(--maxw);margin:0 auto; transition:padding .25s ease, max-width .25s ease, transform .25s ease; } .nav-logo{display:flex;align-items:center;gap:12px} .nav-logo .logo-mark{flex:none;display:block} .nav-logo .logo-mark .tag-body{fill:var(--blood)} .nav-logo .logo-mark .tag-line{stroke:var(--bone)} .nav-logo .logo-mark .tag-hole{fill:var(--ink);stroke:var(--bone)} .nav-logo .logo-mark .tag-letter{fill:var(--bone)} .nav-logo .logo-words{display:flex;flex-direction:column;line-height:.85;gap:3px} .nav-logo .name{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:800;font-size:23px;letter-spacing:-.01em;text-transform:uppercase;color:var(--bone)} .nav-logo .est{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-light)} .nav-logo:focus-visible{outline:3px solid var(--blood-bright);outline-offset:4px} .nav-links{display:flex;align-items:center;gap:26px} .nav-links a{ font-family:var(--ui);font-weight:700;text-transform:uppercase; letter-spacing:.13em;font-size:12.5px;color:var(--bone); padding-bottom:2px;position:relative;transition:color .15s; } .nav-links a::after{ content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px; background:var(--blood);transition:right .2s ease; } .nav-links a:hover{color:var(--blood)} .nav-links a:hover::after,.nav-links a.active::after{right:0} .nav-right{display:flex;align-items:center;gap:18px} .cart-btn{position:relative;display:flex;align-items:center;gap:7px;padding:11px 6px;min-height:44px;color:var(--bone);font-family:var(--ui);font-weight:700;letter-spacing:.13em;font-size:12.5px;text-transform:uppercase} .cart-btn:hover{color:var(--blood)} .cart-count{ min-width:20px;height:20px;padding:0 5px;border-radius:0; background:var(--blood);color:var(--bone); font-family:var(--stencil);font-weight:800;font-size:12px; display:flex;align-items:center;justify-content:center;line-height:1; } .cart-count.empty{display:none} .enter-shop{ background:var(--blood);color:var(--bone); font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:12.5px;letter-spacing:.06em; padding:9px 16px;box-shadow:var(--shadow-ink-sm); transition:transform .12s ease, box-shadow .12s ease; display:inline-block; } .enter-shop:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);color:var(--bone)} .enter-shop:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)} .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 8px;border:1px solid var(--hair)} .hamburger span{width:24px;height:2.5px;background:var(--bone);transition:transform .25s ease, opacity .2s ease} .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0} .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} .hamburger:focus-visible,.cart-btn:focus-visible{outline:3px solid var(--blood-bright);outline-offset:3px} /* condensed sticky state (added by JS) */ .nav.condensed{ position:fixed;top:clamp(12px,2vw,20px);left:0;right:0; max-width:min(var(--maxw),calc(100vw - 2*clamp(16px,3vw,38px))); padding:9px 18px;z-index:900; } .nav.condensed .nav-links{display:none} .nav.condensed .nav-logo .est{display:none} .nav.condensed .nav-logo .name{font-size:20px} .nav.condensed .nav-logo .logo-mark{width:30px;height:30px} .nav.condensed .hamburger{display:flex} /* mobile full-screen takeover */ .mobile-menu{ position:fixed;inset:0;background:var(--ink);z-index:1000; display:flex;flex-direction:column;padding:clamp(28px,8vw,60px); transform:translateY(-100%);visibility:hidden; transition:transform .4s var(--ease-out), visibility .4s; } .mobile-menu.open{transform:translateY(0);visibility:visible} .mobile-menu .mm-close{align-self:flex-end;color:var(--bone);font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.08em;border:1px solid var(--hair);padding:8px 12px} .mobile-menu .mm-close:hover{color:var(--blood);border-color:var(--blood)} .mobile-menu .mm-close:focus-visible{outline:3px solid var(--blood-bright);outline-offset:3px} .mobile-menu nav{display:flex;flex-direction:column;gap:6px;margin-top:auto;margin-bottom:auto} .mobile-menu nav a{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;font-size:clamp(34px,11vw,58px);color:var(--bone);line-height:.96} .mobile-menu nav a:hover{color:var(--blood)} .mobile-menu nav a:focus-visible{outline:3px solid var(--blood-bright);outline-offset:4px} .mobile-menu .mm-foot{font-family:var(--black);font-stretch:var(--wide);font-weight:900;letter-spacing:-.01em;color:var(--blood);font-size:30px} body.drawer-open{overflow:hidden} /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-block;font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:14px;letter-spacing:.05em; padding:13px 24px;background:var(--bone);color:var(--ink); box-shadow:var(--shadow-blood);transition:transform .12s, box-shadow .12s; } .btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--blood);color:var(--ink)} .btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--blood)} .btn.blood{background:var(--blood);color:var(--bone);box-shadow:4px 4px 0 var(--ink)} .btn.blood:hover{box-shadow:5px 5px 0 var(--bone);color:var(--bone)} .btn.blood:active{box-shadow:1px 1px 0 var(--bone)} .btn.lg{font-size:17px;padding:16px 32px;letter-spacing:.06em} .btn.full{display:block;width:100%;text-align:center} .link-script{font-family:var(--script);font-style:italic;font-weight:600;font-size:19px;letter-spacing:.005em;color:var(--blood-bright);transition:color .15s} .link-script:hover{color:var(--bruise-light)} .link-script:focus-visible{outline:3px solid var(--blood-bright);outline-offset:4px} .link-script .arrow{font-family:var(--ui);font-style:normal;font-weight:700} .btn:focus-visible,.add:focus-visible,.enter-shop:focus-visible{outline:3px solid var(--bone);outline-offset:3px} /* trust microcopy — the cool slate counter-note, used sparingly */ .trust{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.02em;color:var(--slate-light)} .trust::before{content:'';width:8px;height:8px;background:var(--slate);flex:0 0 auto;transform:rotate(45deg)} /* ============================================================ THE RHYTHM-BREAK — full-bleed receipt ticker A quiet, edge-to-edge band that interrupts the cards/grid cadence. ============================================================ */ .ticker{ position:relative;width:100vw;left:50%;transform:translateX(-50%); background:var(--ink);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair); overflow:hidden;padding:16px 0; } .ticker-track{display:flex;width:max-content;animation:ticker-slide 38s linear infinite} .ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused} .ticker-track span{display:inline-flex;align-items:center;gap:18px;padding:0 26px;font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim);white-space:nowrap} .ticker-track .dot{color:var(--blood-bright)} @keyframes ticker-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============================================================ GENERATED PRICE-LABELS (no stock product art) Each thing is shown as an abstract two-color price tag: a stamped PRICE, the deadpan name, a punched hole + ticket footer. ============================================================ */ .cover{ position:relative;aspect-ratio:1/1;width:100%;overflow:hidden; display:flex;flex-direction:column;justify-content:space-between; gap:4%;padding:9% 9% 8%;border:2px solid var(--ink); container-type:inline-size; } /* top ticket row: store stamp + punched hole */ .cover .cv-top{display:flex;justify-content:space-between;align-items:center;flex:0 0 auto} .cover .cv-tick{font-family:var(--mono);font-weight:500;font-size:4.6cqw;letter-spacing:.16em;text-transform:uppercase;opacity:.85} .cover .cv-hole{width:7cqw;height:7cqw;border-radius:50%;border:2px solid currentColor;background:transparent;opacity:.7;flex:0 0 auto} /* the big stamped price = the hero of the label (Archivo Expanded, heaviest) */ .cover .cv-price{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:900;font-size:25cqw;line-height:.84;letter-spacing:-.04em;flex:0 1 auto;white-space:nowrap} .cover .cv-name{font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:6.6cqw;letter-spacing:.005em;line-height:1.02;flex:0 0 auto} .cover .cv-foot{display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-weight:500;font-size:4.6cqw;flex:0 0 auto;border-top:1.5px solid currentColor;padding-top:4%;opacity:.92} .cover .cv-cond{text-transform:uppercase;letter-spacing:.07em} .cover .cv-rh{font-family:var(--black);font-stretch:var(--wide);font-weight:900;font-size:9cqw;line-height:1;letter-spacing:-.02em;opacity:1} /* a deadpan center tag on some */ .cover .cv-band{font-family:var(--script);font-style:italic;font-weight:600;font-size:8cqw;transform:rotate(-3deg);line-height:1.05;flex:0 0 auto} /* color variants */ .cover.c-blood{background:var(--blood);color:var(--bone);border-color:var(--ink)} .cover.c-ink{background:var(--ink);color:var(--bone)} .cover.c-bone{background:var(--bone-2);color:var(--ink)} .cover.c-bruise{background:var(--bruise);color:var(--bone)} .cover.c-rust{background:var(--rust);color:var(--bone)} .cover.c-blood .cv-rh,.cover.c-ink .cv-rh,.cover.c-bruise .cv-rh,.cover.c-rust .cv-rh{color:var(--bone)} .cover.c-bone .cv-rh{color:var(--blood)} /* mini label for cart / summary */ .cover.mini{padding:0;border-width:1.5px;container-type:normal;aspect-ratio:1/1;align-items:center;justify-content:center} .cover.mini .cv-top,.cover.mini .cv-name,.cover.mini .cv-foot,.cover.mini .cv-band{display:none} .cover.mini .cv-price{font-family:var(--stencil);font-weight:800;font-size:13px;line-height:1;letter-spacing:0} /* ============================================================ STAMPS + BADGES ============================================================ */ .stamp{ position:absolute;top:14px;right:-6px;z-index:5; font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.05em; color:var(--blood);border:3px solid var(--blood); padding:6px 10px 4px;background:rgba(237,228,211,.78); transform:rotate(6deg);text-align:center;line-height:.95; box-shadow:1px 1px 0 rgba(122,21,24,.4); } .stamp small{display:block;font-size:9px;letter-spacing:.18em;opacity:.8} .badge{ display:inline-block;font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.06em; padding:4px 8px 3px;border:2px solid currentColor;line-height:1; } .badge.cond{color:var(--rust-bright)} .badge.new{color:var(--bone)} .badge.sale{color:var(--bone);background:var(--blood);border-color:var(--blood)} .badge.event{color:var(--bone);background:var(--bruise);border-color:var(--bruise)} .price{font-family:var(--stencil);font-weight:800;color:var(--blood-bright);font-size:21px;letter-spacing:.005em} .price s{color:var(--bone-dim);opacity:.6;font-size:.7em;margin-right:6px} /* ============================================================ SECTION SCAFFOLDING ============================================================ */ section{position:relative} .sec{padding:clamp(56px,9vw,104px) 0} .sec.tight{padding:clamp(40px,6vw,64px) 0} .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,44px)} .sec-title{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:800;text-transform:uppercase;font-size:clamp(36px,7vw,72px);line-height:.88;letter-spacing:-.015em} .sec-title .scr{font-family:var(--script);font-style:italic;font-weight:600;text-transform:none;color:var(--blood-bright);font-size:.42em;display:block;letter-spacing:.005em;margin-top:.35em;transform:rotate(-1.5deg)} .rule{height:3px;background:var(--bone);flex:1;min-width:40px;align-self:center} /* torn paper edge utility */ .torn{ background:var(--bone-2); clip-path:polygon(0 0,4% 2%,9% 0,15% 3%,21% 0,28% 2%,34% 0,41% 3%,48% 0,55% 2%,62% 0,69% 3%,76% 0,83% 2%,90% 0,96% 3%,100% 0,100% 100%,0 100%); } .torn-bottom{ clip-path:polygon(0 0,100% 0,100% 100%,96% 97%,90% 100%,83% 98%,76% 100%,69% 97%,62% 100%,55% 98%,48% 100%,41% 97%,34% 100%,28% 98%,21% 100%,15% 97%,9% 100%,4% 98%,0 100%); } /* ============================================================ HOME ============================================================ */ .hero{position:relative;padding:clamp(40px,7vw,86px) 0 clamp(48px,8vw,96px);overflow:hidden} .hero .ghost-num{top:-30px;right:2%} .hero-inner{position:relative;z-index:1;max-width:980px} .hero h1{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:900;text-transform:uppercase;font-size:clamp(54px,13vw,150px);line-height:.84;letter-spacing:-.025em} .hero h1 .ln2{color:var(--blood-bright)} /* outline word — solid fallback first so it NEVER vanishes, outline only where supported */ .hero h1 .ln3{color:var(--bone)} @supports ((-webkit-text-stroke:2px var(--bone)) or (text-stroke:2px var(--bone))){ .hero h1 .ln3{-webkit-text-stroke:2px var(--bone);text-stroke:2px var(--bone);color:transparent} } .hero .sub{font-family:var(--script);font-style:italic;font-weight:600;color:var(--bruise-light);font-size:clamp(24px,4.4vw,40px);letter-spacing:.005em;margin:20px 0 6px;transform:rotate(-1.5deg)} .hero .lede{font-family:var(--type);font-weight:400;max-width:560px;margin:18px 0 30px;font-size:18px;line-height:1.6} .hero-cta{display:flex;gap:18px;flex-wrap:wrap;align-items:center} /* featured thing block */ .spinning{background:var(--ground-2);color:var(--bone);border:1px solid var(--hair);transform:rotate(-1deg);box-shadow:var(--shadow-blood);padding:clamp(26px,4vw,40px);display:grid;grid-template-columns:230px 1fr;gap:clamp(20px,4vw,44px);align-items:center} .spinning .cover{border-color:var(--bone)} .spinning .label.on-dark::before,.spinning .label.on-dark::after{color:var(--blood)} .spinning h3{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:800;text-transform:uppercase;font-size:clamp(28px,4.5vw,46px);line-height:.9;letter-spacing:-.02em;margin:12px 0 4px} .spinning .meta{font-family:var(--mono);font-weight:400;font-size:15px;letter-spacing:.02em;color:#ccbfa8} .spinning .note{font-family:var(--type);font-weight:400;font-size:16px;line-height:1.6;margin-top:14px;color:#e6dcc8;max-width:46ch} .spinning .feat-tag{font-family:var(--script);font-style:italic;font-weight:600;color:var(--blood-bright);font-size:20px;display:inline-block;margin-top:8px} /* picks grid */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px)} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,28px)} .pick{position:relative;background:transparent;padding:0} .pick .cover-wrap{position:relative} .pick .pick-body{padding:14px 4px 0} .pick .pk-artist{font-family:var(--ui);font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.08em;color:var(--bone)} .pick .pk-title{font-family:var(--type);font-weight:400;font-size:15px;color:var(--bone-dim)} .pick .pk-note{font-family:var(--script);font-style:italic;font-weight:600;color:var(--bruise-light);font-size:17px;margin:8px 0;line-height:1.1} .pick .pk-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px} /* event poster card */ .poster{position:relative;background:var(--bone-2);color:var(--ink);padding:clamp(20px,3vw,30px);box-shadow:4px 4px 0 var(--blood)} .poster .ev-date{font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:clamp(28px,4.6vw,44px);color:var(--blood);line-height:.85;letter-spacing:.01em} .poster .ev-name{font-family:var(--black);font-stretch:var(--wide);font-weight:900;font-size:clamp(26px,4.2vw,40px);margin:12px 0 6px;line-height:.92;letter-spacing:-.02em} .poster .ev-meta{font-family:var(--mono);font-weight:400;font-size:14px;letter-spacing:.02em;color:var(--ink-soft);margin-bottom:10px} .poster .ev-desc{font-family:var(--type);font-weight:400;font-size:15px;line-height:1.55;margin-bottom:16px} .poster .ev-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} /* fresh in scroller */ .scroller{display:flex;gap:22px;overflow-x:auto;padding:6px 2px 22px;scroll-snap-type:x mandatory} .scroller::-webkit-scrollbar{height:9px} .scroller::-webkit-scrollbar-thumb{background:var(--ink)} .scroller::-webkit-scrollbar-track{background:var(--bone-2)} .scroller .fresh{flex:0 0 200px;scroll-snap-align:start} .fresh .fr-artist{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.04em;margin-top:9px;text-transform:uppercase} .fresh .fr-title{font-family:var(--type);font-weight:400;font-size:14px;color:var(--bone-dim);line-height:1.3} .fresh .fr-foot{display:flex;justify-content:space-between;align-items:center;margin-top:7px} /* ============================================================ FOOTER (ink takeover) ============================================================ */ .footer{background:var(--ground-3);color:var(--bone);padding:clamp(50px,7vw,88px) 0 26px;margin-top:clamp(40px,6vw,80px);position:relative;border-top:1px solid var(--hair)} .footer a:hover{color:var(--blood)} .foot-grid{display:grid;grid-template-columns:1.1fr 1.3fr 1fr;gap:clamp(28px,4vw,56px)} .foot-h{font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--blood-bright);margin-bottom:14px} .foot-info{font-family:var(--type);font-weight:400;font-size:15px;color:#d8cdb8;line-height:1.7} .foot-info .name{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:800;font-size:24px;letter-spacing:-.01em;color:var(--bone);text-transform:uppercase;display:block;margin-bottom:8px} .news-form{display:flex;gap:0;margin-top:12px;max-width:340px} .news-form input{flex:1;background:var(--bone);color:var(--ink);border:none;padding:11px 12px;font-family:var(--mono);font-weight:400;font-size:15px} .news-form button{background:var(--blood);color:var(--bone);font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:12px;padding:0 16px;letter-spacing:.06em} .news-note{font-family:var(--type);font-weight:400;font-size:13px;color:#a89c86;margin-top:8px} .foot-social{display:flex;flex-direction:column;gap:8px;font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:13px} .foot-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:clamp(40px,5vw,64px);border-top:1px solid #2a2520;padding-top:18px} .foot-credit{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.01em;color:#7a7062} .foot-rh{font-family:var(--black);font-stretch:var(--wide);font-weight:900;letter-spacing:-.02em;color:var(--blood-bright);font-size:50px;line-height:.7} /* ============================================================ PAGE HEADERS (secondary pages) ============================================================ */ .page-head{padding:clamp(36px,6vw,72px) 0 clamp(24px,3vw,40px);position:relative} .page-head .ghost-num{top:-10px;left:-1%} .page-head h1{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:900;text-transform:uppercase;font-size:clamp(48px,10vw,120px);line-height:.86;letter-spacing:-.025em;position:relative;z-index:1} .page-head .scr{font-family:var(--script);font-style:italic;font-weight:600;color:var(--blood-bright);font-size:clamp(20px,3.4vw,32px);letter-spacing:.005em;transform:rotate(-1.5deg);display:inline-block;margin-top:10px;position:relative;z-index:1} /* ============================================================ SHOP ============================================================ */ .filterbar{display:flex;gap:clamp(14px,2vw,26px);flex-wrap:wrap;align-items:flex-end;padding:18px 0;border-top:3px solid var(--bone);border-bottom:3px solid var(--bone);margin-bottom:clamp(28px,4vw,44px)} .filt{display:flex;flex-direction:column;gap:6px} .filt label{font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--bone)} .filt select{font-family:var(--mono);font-weight:400;font-size:14px;background:var(--ground-2);border:2px solid var(--bone-dim);padding:8px 10px;color:var(--bone);min-width:140px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer} .filt select:focus{outline:none;border-color:var(--blood-bright)} .filt-count{margin-left:auto;font-family:var(--mono);font-weight:400;font-size:14px;letter-spacing:.02em;color:var(--bone-dim);align-self:center} .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,30px)} .card{position:relative;background:var(--ground-2);color:var(--bone);padding:0;border:1px solid var(--hair);transition:transform .14s, border-color .14s, box-shadow .14s} .card:hover{transform:translateY(-4px);border-color:var(--blood-bright);box-shadow:4px 4px 0 var(--blood)} .card .cover-wrap{position:relative} .card .card-body{padding:13px 12px 14px} .card .c-artist{font-family:var(--ui);font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.06em;line-height:1.15} .card .c-title{font-family:var(--type);font-weight:400;font-size:14px;color:var(--bone-dim);margin:2px 0 9px;line-height:1.3} .card .c-row{display:flex;justify-content:space-between;align-items:center;gap:8px} .card .add{ position:absolute;left:12px;right:12px;bottom:14px; opacity:0;transform:translateY(6px);transition:.16s; background:var(--ink);color:var(--bone);font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:12px; padding:10px;text-align:center;letter-spacing:.06em; } .card:hover .add{opacity:1;transform:translateY(0)} .card .add:hover{background:var(--blood)} @media(hover:none){.card .add{position:static;opacity:1;transform:none;margin:10px 12px 14px;display:block}} .pager{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:clamp(40px,5vw,64px)} .pager .pg{font-family:var(--stencil);font-weight:800;font-size:14px;padding:9px 14px;border:2px solid var(--bone);color:var(--bone)} .pager .pg.active{background:var(--blood);border-color:var(--blood);color:var(--bone)} .pager .pg-label{font-family:var(--mono);font-weight:400;font-size:16px;letter-spacing:.05em} /* ============================================================ PRODUCT DETAIL ============================================================ */ .pdp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start} .pdp-art{position:relative} .pdp-art .cover{box-shadow:var(--shadow-blood)} .pdp-info .badge{margin-bottom:16px} .pdp-info h1{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:900;text-transform:uppercase;font-size:clamp(38px,6vw,68px);line-height:.86;letter-spacing:-.025em;margin-bottom:8px} .pdp-info .alb-title{font-family:var(--type);font-style:italic;font-weight:400;font-size:20px;color:var(--bone-dim);margin-bottom:14px} .pdp-info .specs{font-family:var(--mono);font-weight:400;font-size:15px;letter-spacing:.01em;color:var(--bone-dim);line-height:1.6;margin-bottom:20px} .pdp-info .specs span{color:var(--bone)} .pdp-info .price{font-size:38px;display:block;margin-bottom:22px} .qty-row{display:flex;align-items:center;gap:16px;margin-bottom:22px} .qty{display:inline-flex;align-items:center;border:2px solid var(--bone)} .qty button{width:40px;height:42px;font-family:var(--stencil);font-weight:800;font-size:20px;background:var(--bone);color:var(--ink)} .qty button:hover{background:var(--blood);color:var(--bone)} .qty .q{width:48px;text-align:center;font-family:var(--mono);font-weight:500;font-size:20px} .ask-link{display:inline-block;margin-top:18px} .shop-says{position:relative;background:var(--bone-2);color:var(--ink);padding:clamp(26px,4vw,44px);box-shadow:4px 4px 0 var(--blood);margin-top:clamp(40px,6vw,72px)} .shop-says .label{margin-bottom:14px;color:var(--ink)} .shop-says p{font-family:var(--type);font-weight:400;font-size:17px;line-height:1.65;max-width:62ch} .shop-says .sig{font-family:var(--script);font-style:italic;font-weight:600;color:var(--blood);font-size:24px;letter-spacing:.005em;margin-top:14px;display:block} .cond-notes{margin-top:clamp(36px,5vw,56px)} .cond-notes ul{margin-top:14px;display:grid;gap:10px;max-width:64ch} .cond-notes li{font-family:var(--mono);font-weight:400;font-size:15px;letter-spacing:.01em;line-height:1.5;display:flex;gap:12px;align-items:flex-start;color:var(--bone-dim)} .cond-notes li::before{content:'';width:10px;height:10px;background:var(--rust-bright);margin-top:7px;flex:0 0 auto} .tracklist{margin-top:clamp(36px,5vw,56px)} .tracklist ol,.tracklist ul{margin-top:14px;columns:2;column-gap:48px;max-width:680px} .tracklist li{font-family:var(--mono);font-weight:400;font-size:15px;letter-spacing:.01em;padding:6px 0;border-bottom:1px solid var(--hair);break-inside:avoid;display:flex;justify-content:space-between;gap:14px} .tracklist li .tt{flex:1} .tracklist li .td{color:var(--bone-dim)} /* ============================================================ EVENTS ============================================================ */ .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,40px)} .ev-big{position:relative;background:var(--bone-2);color:var(--ink);padding:clamp(24px,3.5vw,40px);box-shadow:var(--shadow-blood)} .ev-big .ev-stamp{position:absolute;top:18px;right:14px} .ev-big .ev-date{font-family:var(--stencil);font-weight:800;text-transform:uppercase;font-size:clamp(38px,6.6vw,68px);color:var(--blood);line-height:.8;letter-spacing:.01em} .ev-big .ev-date small{display:block;font-family:var(--ui);font-weight:700;font-size:.26em;color:var(--ink);letter-spacing:.2em;margin-top:8px} .ev-big .ev-name{font-family:var(--black);font-stretch:var(--wide);font-weight:900;font-size:clamp(32px,5.2vw,52px);margin:14px 0 8px;line-height:.9;letter-spacing:-.02em} .ev-big .ev-meta{font-family:var(--mono);font-weight:400;font-size:15px;letter-spacing:.01em;color:var(--ink-soft);margin-bottom:12px} .ev-big .ev-desc{font-family:var(--type);font-weight:400;font-size:16px;line-height:1.55;margin-bottom:18px;max-width:48ch} .ev-big .ev-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px} .callout{background:var(--ground-2);color:var(--bone);border:1px solid var(--hair);padding:clamp(30px,4vw,52px);transform:rotate(-.5deg);box-shadow:var(--shadow-blood);margin-top:clamp(44px,6vw,72px)} .callout h3{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:800;text-transform:uppercase;font-size:clamp(28px,4.5vw,46px);line-height:.92;letter-spacing:-.02em;margin-bottom:12px} .callout h3 .scr{font-family:var(--script);font-style:italic;font-weight:600;color:var(--blood-bright);text-transform:none;font-size:.5em;letter-spacing:.005em} .callout p{font-family:var(--type);font-weight:400;font-size:16px;line-height:1.6;color:#e0d6c2;max-width:60ch;margin-bottom:20px} /* ============================================================ ABOUT ============================================================ */ .story{max-width:760px;margin:0 auto} .story .blk{margin-bottom:clamp(40px,6vw,68px);position:relative} .story .blk-num{font-family:var(--black);font-stretch:var(--wide);font-weight:900;color:var(--blood-bright);font-size:28px;line-height:1;letter-spacing:-.02em;margin-bottom:6px} .story h2{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:800;text-transform:uppercase;font-size:clamp(26px,4vw,42px);line-height:.92;letter-spacing:-.02em;margin-bottom:16px} .story p{font-family:var(--type);font-weight:400;font-size:17px;line-height:1.72;margin-bottom:16px} .story .photo-ph{ aspect-ratio:4/3;background:var(--ink);color:#8a7f6e; display:flex;align-items:center;justify-content:center;text-align:center; font-family:var(--mono);font-weight:400;font-size:15px;letter-spacing:.02em;padding:20px;margin:18px 0; border:1px solid var(--hair);position:relative; } .story .photo-ph .rh-mark{position:absolute;bottom:10px;right:14px;font-size:30px} /* number-free list — a stamped blood diamond marks each rule (no figures) */ .rules{margin-top:14px} .rules li{font-family:var(--stencil);font-weight:800;font-size:clamp(15px,2.2vw,19px);letter-spacing:.005em;padding:12px 0;border-bottom:2px solid var(--hair);display:flex;gap:16px;align-items:baseline;text-transform:uppercase;line-height:1.18} .rules li::before{content:'';width:.62em;height:.62em;flex:0 0 auto;background:var(--blood-bright);transform:rotate(45deg) translateY(.05em)} .pull{border-left:4px solid var(--blood-bright);padding:6px 0 6px 20px;margin:22px 0} .pull q{font-family:var(--type);font-style:italic;font-weight:400;font-size:19px;line-height:1.5;display:block;quotes:none} .pull cite{font-family:var(--mono);font-weight:400;font-size:14px;letter-spacing:.02em;color:var(--bone-dim);font-style:normal;display:block;margin-top:8px;text-transform:uppercase} .sig-big{font-family:var(--script);font-style:italic;font-weight:600;color:var(--blood-bright);font-size:36px;letter-spacing:.005em;transform:rotate(-2deg);display:inline-block;margin-top:10px} /* ============================================================ PHOTOS — duotone'd to fit the black-wall gig-poster look ============================================================ */ .ph-img{position:relative;border:1px solid var(--hair);overflow:hidden;margin:18px 0;box-shadow:5px 5px 0 var(--blood)} .ph-img img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.9)} .ph-img::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(122,21,24,.16),rgba(10,9,8,.6));mix-blend-mode:multiply} .ph-img figcaption{position:absolute;left:14px;bottom:11px;z-index:2;font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.03em;color:var(--bone);text-shadow:0 1px 4px #000} .ph-img .rh-mark{position:absolute;bottom:9px;right:14px;font-size:30px;z-index:2;text-shadow:0 1px 4px #000} .photo-band{position:relative;height:clamp(260px,40vw,440px);overflow:hidden;border:1px solid var(--hair);box-shadow:6px 6px 0 var(--blood)} .photo-band img{width:100%;height:100%;object-fit:cover;filter:grayscale(.9) contrast(1.05) brightness(.78)} .photo-band::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,9,8,.9),rgba(10,9,8,.3) 55%,rgba(122,21,24,.3))} .photo-band .pb-cap{position:absolute;left:clamp(20px,4vw,44px);bottom:clamp(18px,4vw,38px);z-index:2;max-width:34ch} .photo-band .pb-cap .scr{font-family:var(--script);font-style:italic;font-weight:600;color:var(--bone);font-size:clamp(24px,4.2vw,40px);letter-spacing:.005em;display:block;transform:rotate(-1.5deg);line-height:1.05;text-shadow:0 2px 8px #000} .photo-band .pb-cap .label{margin-top:12px;color:var(--bone)} /* ============================================================ VISIT / CONTACT ============================================================ */ .visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start} .hours{font-family:var(--type);font-weight:400;font-size:16px;line-height:1.55} .hours .hrow{display:flex;justify-content:space-between;gap:18px;padding:8px 0;border-bottom:1px dashed rgba(237,228,211,.28);max-width:360px} .hours .hrow .d{font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:13px} .hours .hrow .t{font-family:var(--mono);font-weight:400;font-size:15px;letter-spacing:.01em} .hours .hnote{font-family:var(--script);font-style:italic;font-weight:600;color:var(--blood-bright);font-size:18px;letter-spacing:.005em;margin-top:14px;transform:rotate(-1deg)} .info-block{margin-top:26px} .info-block .ib-h{font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--blood-bright);margin-bottom:6px} .info-block p{font-family:var(--type);font-weight:400;font-size:16px;line-height:1.6} .map-ph{position:relative;aspect-ratio:1/1;background:var(--bone-2);border:3px solid var(--bone);overflow:hidden} .map-ph svg{width:100%;height:100%;display:block} /* forms */ .form{display:grid;gap:18px;max-width:520px} .form.wide{max-width:none} .field{display:flex;flex-direction:column;gap:6px} .field label{font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--bone)} .field input,.field textarea,.field select{ font-family:var(--type);font-weight:400;font-size:16px;background:var(--bone); border:2px solid var(--ink);padding:11px 13px;color:var(--ink); } .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blood);box-shadow:3px 3px 0 var(--blood)} .field textarea{resize:vertical;min-height:120px} .form-msg{font-family:var(--type);font-weight:400;font-size:16px;line-height:1.55;background:var(--ink);color:var(--bone);padding:18px 20px;box-shadow:var(--shadow-blood);display:none} .form-msg.show{display:block} .form-msg .scr{font-family:var(--script);font-style:italic;font-weight:600;color:var(--blood-bright);font-size:20px;letter-spacing:.005em;display:block;margin-bottom:4px} /* ============================================================ CART DRAWER ============================================================ */ .cart-overlay{position:fixed;inset:0;background:rgba(10,9,8,.55);z-index:1100;opacity:0;pointer-events:none;transition:opacity .25s} .cart-overlay.open{opacity:1;pointer-events:auto} .cart-drawer{ position:fixed;top:0;right:0;height:100%;width:min(440px,92vw); background:var(--bone);color:var(--ink);z-index:1200;transform:translateX(105%); transition:transform .3s cubic-bezier(.5,0,.2,1); display:flex;flex-direction:column;box-shadow:-6px 0 0 var(--blood); } .cart-drawer.open{transform:translateX(0)} .cart-head{display:flex;justify-content:space-between;align-items:center;padding:22px 22px 16px;background:var(--ink);color:var(--bone)} .cart-head h2{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:800;text-transform:uppercase;font-size:28px;letter-spacing:-.01em} .cart-head .x{font-family:var(--stencil);font-weight:800;font-size:22px;color:var(--bone);width:38px;height:38px;display:flex;align-items:center;justify-content:center} .cart-head .x:hover{color:var(--blood)} .cart-drawer :focus-visible{outline:3px solid var(--blood);outline-offset:2px} .cart-foot .trust{margin-top:14px;justify-content:center;width:100%} .cart-items{flex:1;overflow-y:auto;padding:16px 22px} .cart-line{display:grid;grid-template-columns:56px 1fr auto;gap:14px;padding:14px 0;border-bottom:2px solid rgba(10,9,8,.12);align-items:start} .cart-line .cl-art{width:56px} .cart-line .cl-artist{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.02em;text-transform:uppercase;line-height:1.15} .cart-line .cl-title{font-family:var(--type);font-weight:400;font-size:13px;color:var(--ink-soft);line-height:1.3} .cart-line .cl-badge{margin-top:5px} .cart-line .cl-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px} .cart-line .cl-price{font-family:var(--stencil);font-weight:800;color:var(--blood);font-size:16px} .cart-line .cl-qty{display:inline-flex;align-items:center;border:2px solid var(--ink)} .cart-line .cl-qty button{width:26px;height:28px;font-family:var(--stencil);font-weight:800;font-size:14px} .cart-line .cl-qty button:hover{background:var(--ink);color:var(--bone)} .cart-line .cl-qty .q{width:30px;text-align:center;font-family:var(--mono);font-weight:500;font-size:15px} .cart-line .cl-rm{font-family:var(--ui);font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.12em;color:var(--ink-soft)} .cart-line .cl-rm:hover{color:var(--blood)} .cart-foot{padding:20px 22px;border-top:3px solid var(--ink);background:var(--bone-2)} .cart-sub{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px} .cart-sub .sl{font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px} .cart-sub .sv{font-family:var(--stencil);font-weight:800;color:var(--blood);font-size:26px} .cart-empty{text-align:center;padding:60px 20px;display:none} .cart-empty.show{display:block} .cart-empty .ce-h{font-family:var(--black);font-stretch:var(--wide);font-weight:900;font-size:34px;line-height:1;letter-spacing:-.02em;margin-bottom:10px} .cart-empty .ce-sub{font-family:var(--script);font-style:italic;font-weight:600;color:var(--blood);font-size:20px;letter-spacing:.005em} .cart-items.empty .cart-line{display:none} /* ============================================================ CHECKOUT ============================================================ */ .checkout-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,5vw,64px);align-items:start} .summary{background:var(--bone-2);color:var(--ink);padding:clamp(22px,3vw,34px);box-shadow:4px 4px 0 var(--blood);position:sticky;top:90px} .summary h2{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:800;text-transform:uppercase;font-size:26px;letter-spacing:-.01em;margin-bottom:18px} .sum-line{display:grid;grid-template-columns:44px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid rgba(10,9,8,.14);align-items:center} .sum-line .sl-artist{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.02em;text-transform:uppercase;line-height:1.15} .sum-line .sl-meta{font-family:var(--type);font-weight:400;font-size:12px;color:var(--ink-soft)} .sum-line .sl-price{font-family:var(--stencil);font-weight:800;color:var(--blood);font-size:15px} .sum-totals{margin-top:16px;font-family:var(--mono);font-weight:400;font-size:15px;letter-spacing:.01em} .sum-totals .tr{display:flex;justify-content:space-between;padding:5px 0} .sum-totals .tr.grand{border-top:3px solid var(--ink);margin-top:8px;padding-top:12px} .sum-totals .tr.grand .v{font-family:var(--stencil);font-weight:800;color:var(--blood);font-size:24px} .sum-totals .tr.grand .l{font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px;align-self:center} .ship-opts{display:grid;gap:10px;margin:6px 0 4px} .ship-opt{display:flex;align-items:center;gap:12px;border:2px solid var(--bone-dim);color:var(--bone);padding:12px 14px;cursor:pointer;font-family:var(--mono);font-weight:400;font-size:15px;letter-spacing:.01em} .ship-opt input{accent-color:var(--blood);width:18px;height:18px} .ship-opt.sel{border-color:var(--blood-bright);box-shadow:3px 3px 0 var(--blood)} .ship-opt .so-price{margin-left:auto;font-family:var(--stencil);font-weight:800;color:var(--blood-bright)} .summary .ship-opt{color:var(--ink);border-color:var(--ink)} .summary .ship-opt.sel{border-color:var(--blood)} .fieldset-h{font-family:var(--ui);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--blood-bright);margin:22px 0 4px;border-bottom:2px solid var(--hair);padding-bottom:6px} .grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px} .grid-3col{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px} /* confirmation */ .confirm{max-width:640px;margin:0 auto;text-align:center;padding:clamp(20px,4vw,40px) 0} .confirm .ghost-num{position:static;display:block;font-size:clamp(80px,16vw,200px);color:rgba(237,228,211,.06);margin-bottom:-10px} .confirm h1{font-family:var(--woodtype);font-stretch:var(--wide);font-weight:900;text-transform:uppercase;font-size:clamp(40px,8vw,84px);line-height:.86;letter-spacing:-.025em;margin-bottom:8px} .confirm .scr{font-family:var(--script);font-style:italic;font-weight:600;color:var(--blood-bright);font-size:clamp(22px,4.2vw,34px);letter-spacing:.005em;transform:rotate(-1.5deg);display:block} .confirm .order-no{font-family:var(--stencil);font-weight:800;letter-spacing:.06em;font-size:22px;background:var(--ink);color:var(--bone);display:inline-block;padding:12px 20px;margin:24px 0;box-shadow:var(--shadow-blood)} .confirm p{font-family:var(--type);font-weight:400;font-size:18px;line-height:1.65;max-width:52ch;margin:0 auto 20px} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1024px){ .grid-4,.prod-grid{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr;gap:36px} .foot-grid .fg-news{grid-column:1/-1} .checkout-grid{grid-template-columns:1fr} .summary{position:static} } @media(max-width:860px){ .nav-links{display:none} .hamburger{display:flex} .nav.condensed .mini-menu{display:none} .nav.condensed .hamburger{display:flex} .pdp{grid-template-columns:1fr;gap:28px} .pdp-art{max-width:440px} .grid-2{grid-template-columns:1fr} .visit-grid{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr 1fr} .spinning{grid-template-columns:160px 1fr} } @media(max-width:560px){ body{font-size:16px} .grid-3,.grid-4,.prod-grid{grid-template-columns:1fr} .grid-2col,.grid-3col{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .spinning{grid-template-columns:1fr;text-align:left} .spinning .cover{max-width:200px} .tracklist ol{columns:1} .enter-shop{display:none} .nav-right{gap:12px} .hero h1{font-size:clamp(44px,16vw,80px)} .filt select{min-width:120px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} html.js [data-reveal]{opacity:1 !important;transform:none !important} .ticker-track{animation:none !important} html.js .nav-logo .misreg::before{animation:none !important;transform:translate(-2px,2px) !important;opacity:1 !important} } /* ---------- Demo attribution chip (Built by Good Website Co.) ---------- */ .gwc-chip{position:fixed;left:16px;bottom:16px;z-index:50;display:inline-flex;align-items:center;gap:11px;padding:9px 13px 9px 11px;border-radius:12px;background:rgba(10,9,8,.86);backdrop-filter:saturate(150%) blur(10px);-webkit-backdrop-filter:saturate(150%) blur(10px);border:1px solid rgba(176,36,31,.5);color:var(--bone);text-decoration:none;box-shadow:4px 4px 0 rgba(0,0,0,.4);transition:transform .22s ease,border-color .22s ease} .gwc-chip:hover{transform:translateY(-2px);border-color:var(--blood-bright)} .gwc-chip:focus-visible{outline:3px solid var(--blood-bright);outline-offset:3px} .gwc-chip .seal{flex:none} .gwc-chip .stxt{display:flex;flex-direction:column;line-height:1.25;font-family:var(--mono)} .gwc-chip .stxt b{font-weight:600;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#E0A23B} .gwc-chip .stxt small{font-weight:400;font-size:10.5px;letter-spacing:.01em;color:var(--bone-dim);margin-top:2px} @media(max-width:540px){.gwc-chip{left:10px;bottom:10px;padding:8px 11px}.gwc-chip .stxt small{display:none}} @media print{.gwc-chip{display:none}}