/* Music page: a curated wall in a home studio. */
.wall-sec { position: relative; padding: 48px 0 64px; border-bottom: 1px solid var(--purple); overflow: hidden;
  background-color: #120909;
  /* oxblood-graded leather wallpaper, lit from above by two picture lights */
  background-image:
    radial-gradient(40% 30% at 20% 0%, rgba(255, 196, 120, .16), transparent 70%),
    radial-gradient(40% 30% at 80% 0%, rgba(255, 196, 120, .13), transparent 70%),
    radial-gradient(120% 80% at 50% 120%, rgba(0, 0, 0, .55), transparent 60%),
    linear-gradient(rgba(10, 5, 5, .28), rgba(10, 5, 5, .28)),
    url("../img/wall-tex.avif?v=2");
  background-size: auto, auto, auto, auto, 1100px auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat; }
.wall { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 38px; grid-auto-flow: dense; gap: 18px; position: relative; z-index: 1; padding-bottom: 28px; }
.piece { grid-column: span var(--c); grid-row: span var(--r); position: relative; display: flex; flex-direction: column; }
@media (max-width: 900px) { .wall { grid-template-columns: repeat(8, 1fr); } .piece { grid-column: span var(--ct); } }
@media (max-width: 560px) { .wall { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 34px; gap: 12px; } .piece { grid-column: span var(--cm); grid-row: span var(--rm); } }

/* shadows shared by everything hanging */
.frame, .poster, .clip, .pola, .gigp, .album, .vinyl { box-shadow: 0 14px 22px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .5); }

/* frames */
.frame { flex: 1; display: flex; padding: 9px; position: relative; text-decoration: none; color: inherit; }
.frame::before { content: ""; position: absolute; top: -14px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #8a7a62; box-shadow: 0 1px 2px #000; transform: translateX(-50%); }
.frame .mat { flex: 1; background: #efe9dd; padding: 8%; display: flex; position: relative; }
.frame .mat img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.05); }
.f-black { background: linear-gradient(145deg, #2a2a2a, #0b0b0b); }
.f-gold { background: linear-gradient(145deg, #c9a45c, #7a5a26 50%, #d8b878); padding: 12px; }
.f-wood { background: linear-gradient(145deg, #6b4a2f, #3c2817); }
.f-white { background: linear-gradient(145deg, #f4f1ea, #cfc9bd); }
.frame.big .mat { padding: 7%; }
.frame.sq { aspect-ratio: 1; flex: none; height: 100%; }
a.frame:hover { transform: translateY(-3px); transition: transform .3s; }
.ph-empty { flex: 1; display: grid; place-items: center; text-align: center; background: repeating-linear-gradient(135deg, #e3dccd 0 10px, #dad2c1 10px 20px); color: #6b6152; font-family: var(--menu); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; }
.plaque { align-self: center; margin-top: 10px; background: linear-gradient(145deg, #d9bb7c, #9a7536); color: #1a140b; font-family: var(--menu); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; padding: 5px 12px; box-shadow: 0 3px 6px rgba(0, 0, 0, .5); text-align: center; }
.plaque span { font-weight: 500; opacity: .75; }
.p-member .frame { flex: 1; }
.empty-frame { display: grid !important; place-items: center; text-align: center; color: #6b6152; font-family: var(--menu); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; background: #e9e2d4 !important; }
.empty-frame small { display: block; font-weight: 500; font-size: .62rem; margin-top: 6px; letter-spacing: .1em; }

/* posters, taped up */
.poster { flex: 1; position: relative; transform: rotate(var(--tilt, 0deg)); background: #111; }
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tape { position: absolute; width: 56px; height: 18px; background: rgba(230, 215, 170, .7); top: -8px; }
.tape.t1 { left: -10px; transform: rotate(-30deg); }
.tape.t2 { right: -10px; transform: rotate(30deg); }

/* records */
.p-vinyl { align-items: center; justify-content: center; }
.vinyl { aspect-ratio: 1; height: 100%; max-width: 100%; border-radius: 50%; position: relative;
  background: radial-gradient(circle, var(--label, #862B91) 0 17%, #0d0d0d 17.5% 19%, #161616 19% 100%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px); background-blend-mode: normal, screen; }
.vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 255, 255, .12) 25%, transparent 30% 70%, rgba(255, 255, 255, .08) 75%, transparent 80%); }
.vinyl i { position: absolute; left: 50%; top: 50%; width: 4%; height: 4%; border-radius: 50%; background: #2a2420; transform: translate(-50%, -50%); z-index: 1; }
.sleeve { background: #1b1918 !important; overflow: hidden; align-items: center; }
.vinyl.peek { height: 92%; position: absolute; right: -38%; top: 4%; box-shadow: none; }

/* our releases */
.album { flex: 1; aspect-ratio: 1; max-height: 100%; align-self: center; display: block; position: relative; text-decoration: none; background: #0d0c0b; }
.album img { width: 100%; height: 100%; object-fit: cover; }
.album .cap { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; font-family: var(--menu); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone); }
.album.soon { display: grid; align-content: center; justify-items: center; gap: 6px; padding: 10px; background: linear-gradient(145deg, #3a1e40, #120b13); border: 1px solid rgba(134, 43, 145, .6); text-align: center; color: var(--paper); }
.album.soon .t { font-family: var(--menu); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.album.soon .s { font-family: var(--menu); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.album:hover { transform: translateY(-3px); transition: transform .3s; }

/* newspaper clippings */
.clip { flex: 1; transform: rotate(var(--tilt, 0deg)); padding: 12px 12px 10px; color: #1d1a16; font-family: Georgia, "Times New Roman", serif; font-size: .78rem; line-height: 1.35; overflow: hidden;
  background: linear-gradient(180deg, #e6dcc3, #d8ccb0); clip-path: polygon(0 2%, 6% 0, 14% 2%, 26% 0, 40% 2%, 55% 0, 70% 2%, 85% 0, 100% 2%, 99% 30%, 100% 60%, 98% 100%, 80% 98%, 60% 100%, 40% 98%, 20% 100%, 0 98%, 2% 60%, 0 30%); }
.clip b { display: block; font-family: Georgia, serif; font-weight: 900; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #1d1a16; margin-bottom: 6px; }
.clip p { margin: 0 0 4px; }
.clip .ask { font-style: italic; }

/* polaroid */
.pola { flex: 1; background: #f3efe6; padding: 8px 8px 24px; transform: rotate(var(--tilt, 0deg)); display: flex; flex-direction: column; position: relative; }
.pola img { flex: 1; width: 100%; min-height: 0; object-fit: cover; filter: grayscale(.4) contrast(1.05); }
.pola span { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font-family: var(--type); font-size: .72rem; color: #2a241d; }

/* typographic gig poster */
.gigp { flex: 1; transform: rotate(var(--tilt, 0deg)); background: var(--purple); color: var(--paper); display: grid; align-content: space-between; padding: 14px 12px; text-align: center; border: 6px solid #f0e8d8; }
.gigp .top, .gigp .bot { font-family: var(--menu); font-weight: 700; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; }
.gigp .name { font-family: var(--head); font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: .95; color: var(--paper); }

/* page title, same style as the other pages */
.p-neon { align-items: flex-start; justify-content: center; }
.wall-title { font-size: clamp(3.4rem, 8vw, 6.4rem); margin: 0; }
.wall-note { position: relative; z-index: 1; margin-top: 18px; font-family: var(--menu); font-size: .72rem; letter-spacing: .1em; color: rgba(214, 199, 168, .6); }

/* 70s music-weekly newsprint: front page and torn-out classifieds */
.np, .np-clip { --ink: #161411; --red: #c8251d; --news: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .16 .3 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.np { flex: 1; transform: rotate(var(--tilt, 0deg)); display: flex; flex-direction: column; gap: 4px; padding: 7px 7px 8px; color: var(--ink); overflow: hidden; position: relative;
  background: var(--news), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(150, 110, 50, .28)), linear-gradient(180deg, #ece4cf, #e2d7bd); }
/* the fold across the middle, and a worn corner */
.np::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 49.4%, rgba(90, 70, 40, .22) 49.8%, rgba(255, 250, 235, .35) 50.4%, transparent 51%), linear-gradient(225deg, rgba(60, 45, 25, .25) 0 3%, transparent 6%); }
.np-banner { display: flex; align-items: stretch; gap: 4px; background: var(--ink); padding: 2px; }
.np-flag { background: #e8c547; color: var(--ink); font: 400 .5rem/1 Anton, sans-serif; text-transform: uppercase; padding: 3px 4px; display: grid; place-items: center; }
.np-name { flex: 1; background: #f3ecdb; color: var(--red); font: 400 clamp(.95rem, 1.5vw, 1.25rem)/1 Anton, sans-serif; text-transform: uppercase; letter-spacing: .02em; padding: 2px 4px; text-align: center; }
.np-mast { display: grid; grid-template-columns: 1.4fr 1fr; gap: 5px; }
.np-logo { background: var(--red); color: #f6efe0; padding: 3px 6px 5px; border-radius: 3px; text-align: center; }
.np-logo small { display: block; font: 700 .42rem/1 Archivo, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.np-logo span { display: block; font: 400 clamp(1.1rem, 2vw, 1.55rem)/1 Monoton, sans-serif; letter-spacing: .02em; }
.np-promo { border: 2px solid var(--ink); background: var(--ink); color: #f3ecdb; font: italic 700 .62rem/1.05 Georgia, serif; padding: 4px; display: grid; align-items: center; }
.np-date { display: flex; justify-content: space-between; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font: 700 .46rem/1.6 Archivo, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.np-head { font: 400 clamp(1.7rem, 3.1vw, 2.6rem)/.9 Anton, sans-serif; text-transform: uppercase; letter-spacing: -.005em; color: var(--ink); }
.np-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.5fr .8fr; gap: 4px; }
.np-text { font: .5rem/1.25 Georgia, "Times New Roman", serif; overflow: hidden; }
.np-text p { margin: 0 0 3px; text-align: justify; hyphens: auto; }
.np-text .np-sub { font: 400 .72rem/1 Anton, sans-serif; text-transform: uppercase; margin-top: 4px; }
.np-photo { position: relative; overflow: hidden; background: #222; }
.np-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.35) brightness(.95); }
/* halftone dots and ink on newsprint */
.np-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(236, 228, 207, .55) 0 .7px, transparent 1px) 0 0 / 3px 3px; mix-blend-mode: screen; }
.np-side { border: 1.5px solid var(--ink); padding: 3px; display: flex; flex-direction: column; gap: 4px; font: 700 .58rem/1.05 Georgia, serif; }
.np-side span { font-style: italic; font-size: .62rem; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.np-side b { font-size: .62rem; }
.np-clip { background: var(--news), linear-gradient(180deg, #ece4cf, #e0d4b8); font-family: Georgia, serif; }
.np-clip .np-strip { display: block; background: var(--red); color: #f6efe0; font: 400 .7rem/1.4 Anton, sans-serif; text-transform: uppercase; letter-spacing: .06em; text-align: center; margin: -12px -12px 8px; }
.np-clip b { font: 400 1.35rem/.95 Anton, sans-serif; text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 4px; letter-spacing: 0; }
@media (max-width: 560px) { .np-head { font-size: 2.2rem; } .np-text { font-size: .56rem; } }

/* real newsprint: fibres, uneven yellowing and foxing, crumpled surface, darker worn edges */
.np, .np-clip { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='380'%3E%3Cfilter id='x'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' seed='12'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .38 0 0 0 0 .16 4.5 0 0 0 -2.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23x)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .9' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .15 -.7 0 0 0 .5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), var(--news),
    radial-gradient(140% 100% at 50% 45%, transparent 50%, rgba(140, 95, 35, .38) 100%),
    radial-gradient(60% 40% at 25% 70%, rgba(205, 170, 95, .22), transparent 70%),
    radial-gradient(50% 35% at 80% 20%, rgba(215, 185, 120, .18), transparent 70%),
    linear-gradient(180deg, #ebe2c8, #ddd0b0);
  background-size: 300px 380px, 220px 220px, 160px 160px, auto, auto, auto, auto; }
/* the crumple sits over everything, ink and photo included, so it all reads as one sheet of paper */
.np::before, .np-clip::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='500'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .014' numOctaves='5' seed='7'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='4.5'%3E%3CfeDistantLight azimuth='235' elevation='52'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") center / cover; mix-blend-mode: multiply; opacity: .85; }
.np-clip { position: relative; }
.np-clip > * { position: relative; }
.np > * { mix-blend-mode: multiply; }
.np-banner, .np-logo, .np-promo { filter: contrast(.95) saturate(.9); }
/* slightly ragged, handled edges rather than a perfect rectangle */
.np { clip-path: polygon(0 .6%, 18% 0, 41% .5%, 63% .1%, 86% .6%, 100% 0, 99.6% 22%, 100% 47%, 99.5% 71%, 100% 100%, 77% 99.5%, 52% 100%, 29% 99.4%, 0 100%, .5% 76%, 0 51%, .6% 27%); }
.np-head, .np-name { opacity: .93; }