/* pages.css: per-page layout. Desktop numbers are stage px (mockup PSD px / 2.7).
   Inside the window, positions are relative to the content box, whose origin is
   stage (184.8, 490.4): the panel's top-left corner, just under the nav row. */

/* Gossip Med and High are drawn on a 28-per-em pixel grid: copy is 42px (1.5px per font pixel,
   whole device pixels on Retina) with 3px tracking (2 font pixels). */
.page-about .copy, .page-events .copy, .page-contact .copy { font-family: "Gossip Med", serif; letter-spacing: 3px; }
.flip img, img.flip { transform: scaleX(-1); }

/* ============================ ABOUT ============================ */
.page-about .skull   { left: 63px;   top: 44px; width: 148px; }
.page-about .skull.r { left: 1124px; top: 41px; }
.page-about .torch   { left: 31px;   top: 366px; width: 106px; }
.page-about .torch.r { left: 1220px; top: 341px; }
.page-about #stage { --stage-pad-bottom: 163.6px; }

.page-about .content { padding: 0 0 12.7px; }
.page-about .copy {
  color: #ece6da;
  text-shadow: -2.1px 1.6px 3px #0c0c0c, -2.1px 1.6px 6px #0c0c0c;
}
.hard-raves { width: 903.7px; height: 110px; margin: 32.6px 0 0 28.9px; }
.hard-raves img { filter: url(#hl-about); } /* fire gradient (red to yellow), filter defined in about.html */
.page-about .intro { font-size: 42px; line-height: 36px; width: 906px; margin: 27.9px 0 0 33.6px; }

/* landscape photo, full width, in the flyer barbed-wire frame (tinted safety orange by #wire-about in about.html) */
.about-photo { position: relative; width: 900.1px; margin: 37.8px 0 0 27.1px; padding: 9.6px 10.7px 10.3px 11.5px; box-sizing: border-box; cursor: pointer; }
.about-photo .photo { display: block; width: 100%; height: auto; aspect-ratio: 2000 / 1333; object-fit: cover; }
.about-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-style: solid; border-width: 34px;
  border-image: url(../assets/ps/barbed-purple.webp) 68 / 34px round;
  filter: var(--wire, url(#wire-about));
}
/* the two short paragraphs sit under the photo: left column left-aligned, right column right-aligned */
.about-row { display: flex; justify-content: space-between; align-items: flex-start; width: 900.1px; margin: 34px 0 0 27.1px; }
.about-side { font-size: 42px; line-height: 36px; width: 430px; }
.about-side.r { text-align: right; }
.about-side p { margin: 0; }
.page-about .about-foot {
  font-size: 42px; line-height: 36px;
  width: 900.1px; box-sizing: border-box; margin: 34px 0 0 27.1px !important; padding: 18px 21px 21px;
  /* text box: near-black fill, steel edge with a darker inner line */
  background: #101011; border: 3px solid #9aa6ae; box-shadow: inset 0 0 0 3px #3b3e41, -12px 9px 24px rgba(0,0,0,.55);
}
.lnk { color: #ff8a2e; text-decoration: none; }
.lnk:hover { text-decoration: underline; }
.plur { position: relative; z-index: 6; width: 231px; height: 158px; margin: 0 0 0 360.2px; }
.page-about .plur { margin-top: -6.5px; }
.page-about .dj { position: absolute; z-index: 5; left: -53.1px; bottom: -189.6px; width: 1082px; height: 276px; }

/* ============================ EVENTS ============================ */
.page-events .pyramid   { left: -17px;  top: 93px; width: 267px; }
.page-events .pyramid.r { left: 1068px; top: 87px; }
.wall-torch   { left: 57px; width: 101px; }
.wall-torch.r { left: 1174px; }
.page-events #stage { --stage-pad-bottom: 163.6px; }
.page-events .content { padding: 0 0 0; }

.ev-heading { position: relative; height: 99px; margin-top: 26.9px; }
.ev-heading .pent { position: absolute; top: 0; width: 100px; height: 99px; }
.ev-heading .pent.l { left: 54.2px; } .ev-heading .pent.r { left: 813.2px; }
.ev-heading .hl-img { position: absolute; left: 158.5px; top: 13px; width: 644.4px; height: 78.1px; }
.archive-heading { position: relative; height: 101px; margin-top: 36.5px; }
.archive-heading .star { position: absolute; top: 0; width: 101px; height: 101px; }
.archive-heading .star.l { left: 50.2px; } .archive-heading .star.r { left: 809.2px; }
.archive-heading .hl-img { position: absolute; left: 178.5px; top: 13.6px; width: 606.3px; height: 84.8px; }

/* runs edge to edge of the panel; 'round' fits a whole number of links */
.divider { height: 18.52px; margin: 0; background: url(../assets/ps/chain-divider-tile.png) 0 0 / 32.22px 18.52px round no-repeat; }
.ev-heading + .divider { margin-top: 16.6px; }
.archive-heading + .divider { margin-top: 10.3px; }
.archive > .divider, #upcoming-list > .divider { margin-top: 26px; }

/* events copy is Jacquard 12, sized on its pixel grid: 42px (2px per font pixel), 31.5px for event text */
.page-events .no-shows, .page-events .yt { font-family: "Jacquard 12", serif; font-size: 42px; letter-spacing: 0; }
.no-shows { margin: 24.2px 0 0 56.2px; line-height: 34px; color: #fff; }
.lnk-blue { color: #0066ff; text-decoration: none; }
.lnk-blue:hover { text-decoration: underline; }

/* one event: flyer on the left, text and gallery on the right */
.event {
  display: grid;
  grid-template-columns: 401.5px 471.9px; column-gap: 14.8px;
  grid-template-areas: "head text" "flyer text" "flyer gal";
  grid-template-rows: 127.5px auto 1fr;
  margin-left: 47.8px; align-items: start;
}
.event.no-gallery { grid-template-areas: "head text" "flyer text"; grid-template-rows: 127.5px 1fr; }
.event.no-flyer { grid-template-areas: "head text" "gal gal"; }
.ev-head { grid-area: head; position: relative; }
.ev-title { margin: 0; padding: 33.3px 0 0 8.7px; font-family: "Gossip High", serif; font-weight: normal; font-size: 42px; line-height: 50px; letter-spacing: 3px; color: #fff; white-space: nowrap; width: 401.5px; }
.ev-meta { position: relative; height: 41px; margin-top: -1.5px; font-family: "Jacquard 12", serif; font-size: 42px; line-height: 41px; letter-spacing: 2px; white-space: nowrap; }
.ev-meta .d { position: absolute; left: 20.2px; top: -2.5px; }
.ev-meta .n { position: absolute; right: 10.1px; top: -3px; }
.ev-text { grid-area: text; margin-left: -2.4px; padding-top: 44.3px; font-family: "Jacquard 12", serif; font-size: 31.5px; line-height: 22px; letter-spacing: 0; color: #fff; }
.ev-text p { margin: 0 0 22px; }
.ev-lineup { white-space: nowrap; }
/* lineup: a list by default; the compact "a (x) / b (y)" form only when the list won't fit above the gallery (events.js) */
.ev-lineup.pairs, .event.compact .ev-lineup.list { display: none; }
.event.compact .ev-lineup.pairs { display: block; }
.ev-info { color: #fffc00; }
/* photo credits (events.js creditsHTML): where the old info line sat, links underlined */
.ev-credits { color: #fffc00; }
.ev-text .ev-credits a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ev-text .ev-credits a:hover { color: #fff; }
/* spaces typed after a subtitle push it left; kept as real spaces on desktop */
.ev-meta .pad { white-space: pre; }
/* per-event spacing from the editor (desktop only: unset properties just inherit) */
body:not(.mobile) .ev-desc, body:not(.mobile) .ev-credits, body:not(.mobile) .ev-info { line-height: var(--desc-lh); letter-spacing: var(--desc-ls); }
body:not(.mobile) .ev-lineup { line-height: var(--lineup-lh); letter-spacing: var(--lineup-ls); }
/* per-event fonts from the editor. Gossip sizes stay on its pixel grid (42px = 1.5 px per font pixel, 28px = 1 px) */
.ev-title.f-gossip-high { font-family: "Gossip High", serif; }
.ev-title.f-gossip-med { font-family: "Gossip Med", serif; }
.ev-title.f-jacquard { font-family: "Jacquard 12", serif; letter-spacing: 2px; }
.ev-meta.f-gossip-high { font-family: "Gossip High", serif; letter-spacing: 3px; }
.ev-meta.f-gossip-med { font-family: "Gossip Med", serif; letter-spacing: 3px; }
.ev-text.f-gossip-high { font-family: "Gossip High", serif; font-size: 28px; letter-spacing: 3px; }
.ev-text.f-gossip-med { font-family: "Gossip Med", serif; font-size: 28px; letter-spacing: 3px; }
/* gossip runs wider than jacquard: let the lineup wrap instead of running past the column */
.ev-text.f-gossip-high .ev-lineup, .ev-text.f-gossip-med .ev-lineup { white-space: normal; }
.ev-link a { color: #0066ff; }
.ev-flyer { grid-area: flyer; position: relative; width: 401.5px; margin: 0; padding: 9.6px 10.7px 10.3px 11.5px; }
/* flyers lazy-load: reserve the usual 4:5 shape until the real size is known */
.ev-flyer img { width: 379.3px; height: auto; aspect-ratio: auto 4 / 5; }
.ev-flyer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-style: solid; border-width: 34px;
  border-image: url(../assets/ps/barbed-purple.webp) 68 / 34px round;
}
.ev-flyer.tinted::after { filter: var(--wire); }
.tint-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.gallery { grid-area: gal; align-self: end; margin-bottom: 6.2px; }

/* Win95 photo window: the chrome is the Photoshop render. Boxes are PSD px / 2.7. */
.w95 { position: relative; width: 471.9px; height: 349.3px; background: url(../assets/ps/gallery-window.webp) 0 0 / 100% 100% no-repeat; }
.strip { position: absolute; left: 5.56px; top: 41.48px; width: 445.93px; height: 287.04px; display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: #111; overscroll-behavior-x: contain; }
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline: 1px dotted #000; outline-offset: -2px; }
.ph { height: 100%; width: auto; flex: none; background: #222; min-width: 60px; object-fit: cover; }
/* hanging chain between photos */
.ph + .ph { border-left: 5.9px solid transparent; border-image: url(../assets/ps/chain-vertical.png) 0 0 0 12 / 0 0 0 5.9px stretch; }
/* scrollbar: buttons and thumb are cut from the same render, with the glyphs made black (enabled) */
.w95-arr { position: absolute; top: 328.52px; width: 14.81px; height: 15.19px; padding: 0; border: 0; background: 0 0 / 100% 100% no-repeat; }
.w95-arr.prev { left: 5.56px;   background-image: url(../assets/ps/w95-arrow-left.png); }
.w95-arr.next { left: 437.78px; background-image: url(../assets/ps/w95-arrow-right.png); }
.w95-arr.prev.down { background-image: url(../assets/ps/w95-arrow-left-down.png); }
.w95-arr.next.down { background-image: url(../assets/ps/w95-arrow-right-down.png); }
.w95-arr:focus { outline: none; }
.w95-arr:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }
.htrack { position: absolute; left: 20.37px; top: 328.52px; width: 417.41px; height: 15.19px; touch-action: none; }
.hthumb { position: absolute; top: 0; height: 100%; touch-action: none; border-style: solid; border-width: 3.33px; border-image: url(../assets/ps/w95-thumb.png) 9 fill / 3.33px stretch; }
/* the stretch of trough being paged through turns dark while the mouse is held */
.hpress { display: none; position: absolute; top: 0; height: 100%; background: repeating-conic-gradient(#000 0 25%, #555 0 50%) 0 0 / 1.74px 1.74px; }
/* nothing to scroll: show the window image's own greyed-out scrollbar */
.w95.off .w95-arr, .w95.off .hthumb { visibility: hidden; }

.yt { margin: 14px 0 0; line-height: 36px; color: #fffc00; font-style: italic; text-align: center; } /* sits between the archive heading and its chain */
.yt + .divider { margin-top: 18px; }
.yt .lnk-blue { color: #0263f6; }
.ev-gifs { position: relative; height: 206.7px; margin-top: -8.1px; }
.ev-gifs img { position: absolute; }
/* x is stage px − 184.8, y is relative to the dj (top of the row, stage y 1603) */
.g-music   { left: 3.2px;   top: 56px; width: 349px; height: 132px; }
.g-dj      { left: 344.2px; top: 0;    width: 183px; height: 209px; }
.g-demon   { left: 559.2px; top: 41px; width: 125px; height: 157px; }
.g-fireman { left: 703.2px; top: 12px; width: 155px; height: 196px; }
.g-girl    { left: 859.2px; top: 27px; width: 87px;  height: 165px; }

/* ============================ CONTACT ============================ */
.page-contact .pegasus   { left: 23px;   top: 98px; width: 204px; }
.page-contact .pegasus.r { left: 1107px; top: 96px; }
.page-contact #stage { --stage-pad-bottom: 163.6px; }
.page-contact .content { padding: 0; }
.contact-top { position: relative; height: 567.6px; }
.get-in-touch { position: absolute; left: 207.8px; top: 7.7px; width: 750px; height: 119.6px; }
/* the glow rebuilds the PSD's grainy drop shadows, letting them fade out softly instead of stopping at a rectangle,
   so the image is bigger than the heading box and hangs outside it */
.get-in-touch img { position: absolute; left: -3.733%; top: -32.609%; width: 104.933%; height: 173.495%; max-width: none; pointer-events: none; }
.laptop { position: absolute; z-index: 1; left: 31.2px; top: 51.6px; width: 201px; height: 193px; }
.contact-copy { position: absolute; right: 36.1px; top: 127.5px; font-size: 42px; line-height: 36px; white-space: nowrap; }
/* two blank lines' worth between the paragraphs */
.contact-copy p { margin: 0 0 72px; }
.contact-copy p:last-child { margin-bottom: 0; }
.mail { color: #fff; text-decoration: none; }
.mail:hover { text-decoration: underline; }
.plesio { position: absolute; left: 181.2px; top: 370.6px; width: 365px; height: 137px; }
.dance-row { position: relative; height: 205px; }
.dance-row img { position: absolute; }
.dance-row .robot { top: 0; width: 160px; height: 205px; }
.dance-row .skel  { top: 32px; width: 113px; height: 185px; }
.robot.l { left: 39.2px; } .robot.r { left: 765.2px; }
.skel.s1 { left: 227.2px; } .skel.s2 { left: 360.9px; } .skel.s3 { left: 494.6px; } .skel.s4 { left: 628.2px; }

/* ============================ E-MAIL LIST (placeholder) ============================ */
.page-wip .pyramid   { left: -17px;  top: 93px; width: 267px; }
.page-wip .pyramid.r { left: 1068px; top: 87px; }
.wip { min-height: 420px; display: flex; align-items: center; justify-content: center; }
.wip h1 a { font-size: .6em; letter-spacing: 3px; }
.wip p, .wip h1 { margin: 0; font-weight: normal; font-family: "Gossip High", serif; font-size: 70px; letter-spacing: 5px; color: #fffc00; text-align: center; }


/* =====================================================================
   PHONES: 640px canvas, window 538 wide at x 51 (inner panel 506).
   Gossip Med needs ~1.75x the HighPixel px to read the same size.
   ===================================================================== */
/* 17px sides leave 472px: room for the fixed-size gallery window */
body.mobile .content, body.mobile.page-about .content, body.mobile.page-events .content, body.mobile.page-contact .content { padding: 22px 17px 26px; }
body.mobile .copy, body.mobile .page-about .copy { font-size: 42px !important; line-height: 36px !important; }
body.mobile .copy p { margin-bottom: 35px; }

/* about */
body.mobile.page-about #stage { --stage-pad-bottom: 92px; }
body.mobile.page-about .skull   { left: 6px;   top: 30px; width: 80px; }
body.mobile.page-about .skull.r { left: 554px; top: 28px; }
body.mobile.page-about .torch   { left: 4px;   top: 300px; width: 44px; }
body.mobile.page-about .torch.r { left: 592px; top: 290px; }
body.mobilebody.mobilebody.mobile .hard-raves { width: 466px; height: 56.7px; margin: 0 auto 22px; }
body.mobile.page-about .intro { width: auto; margin: 0; }
body.mobile .about-photo { width: auto; margin: 30px -6px 0; }
body.mobile .about-row { flex-direction: column; align-items: center; width: auto; margin: 35px 0 0; gap: 0; }
body.mobile .about-side, body.mobile .about-side.r { width: auto; margin: 0; text-align: center; }
body.mobile.page-about .about-foot { width: auto; margin: 34px 0 0 !important; padding: 18px 15px 21px; text-align: left; }
body.mobile .plur { width: 160px; height: 109.4px; margin: 26px auto 0; }
body.mobile.page-about .content { padding-bottom: 76px; }
body.mobile.page-about .dj { left: -32px; bottom: -110px; width: 570px; height: 145.4px; }

/* events */
body.mobile.page-events #stage { --stage-pad-bottom: 60px; }
body.mobile.page-events .pyramid   { left: -6px;  top: 64px; width: 110px; }
body.mobile.page-events .pyramid.r { left: 530px; top: 60px; }
body.mobile .wall-torch   { left: 6px; width: 42px; }
body.mobile .wall-torch.r { left: 592px; }
body.mobile .ev-heading { height: 60px; margin-top: 0; }
body.mobile .ev-heading .pent { width: 58px; height: 57.4px; top: 1px; }
body.mobile .ev-heading .pent.l { left: 0; } body.mobile .ev-heading .pent.r { left: auto; right: 0; }
body.mobile .ev-heading .hl-img { left: 64px; top: 12px; width: 338px; height: 41px; }
body.mobile .archive-heading { height: 60px; margin-top: 40px; }
body.mobile .archive-heading .star { width: 58px; height: 58px; }
body.mobile .archive-heading .star.l { left: 0; } body.mobile .archive-heading .star.r { left: auto; right: 0; }
body.mobile .archive-heading .hl-img { left: 76px; top: 9px; width: 314px; height: 43.9px; }
body.mobile .divider { margin: 16px -17px 0 !important; }
body.mobile .no-shows { margin: 26px 0 0; text-align: center; }
body.mobile .no-shows br { display: none; }
body.mobile .event, body.mobile .event.no-gallery, body.mobile .event.no-flyer { display: flex; flex-direction: column; align-items: center; margin: 30px 0 0; }
body.mobile .archive > .divider { margin-top: 34px !important; }
body.mobile .ev-head { width: 100%; text-align: center; }
body.mobile .ev-title { width: auto; padding: 0; font-size: 56px; line-height: 64px; white-space: normal; }
body.mobile .ev-meta { height: auto; display: flex; justify-content: center; gap: 44px; font-size: 42px; line-height: 40px; margin-top: 4px; }
body.mobile .ev-meta .d, body.mobile .ev-meta .n { position: static; }
body.mobile .ev-meta .pad { display: none; }
body.mobile .ev-text.f-gossip-high, body.mobile .ev-text.f-gossip-med { font-size: 28px; letter-spacing: 3px; }
body.mobile .ev-text { padding-top: 22px; text-align: center; font-size: 31.5px; line-height: 31px; letter-spacing: 1.5px; }
body.mobile.page-events .no-shows, body.mobile.page-events .yt { font-size: 42px !important; line-height: 36px !important; }
body.mobile .ev-text p { margin-bottom: 31px; }
body.mobile .ev-flyer { order: 3; width: 401.5px; }
body.mobile .gallery { order: 4; margin: 24px 0 0; }
/* the scrollbar buttons are ~9px on a phone: give them and the thumb a finger-sized hit area */
body.mobile .w95-arr::before, body.mobile .hthumb::before { content: ""; position: absolute; inset: -14px -8px; }
body.mobile .w95-arr.prev::before { left: -14px; }
body.mobile .w95-arr.next::before { right: -14px; }
body.mobile .yt { margin: 22px 0 0; }
body.mobile .ev-gifs { height: 112px; margin: 18px -8px 0; }
body.mobile .g-music   { left: 0;     top: 30px; width: 170px; height: 64px; }
body.mobile .g-dj      { left: 168px; top: 0;    width: 94px;  height: 107px; }
body.mobile .g-demon   { left: 276px; top: 22px; width: 64px;  height: 80px; }
body.mobile .g-fireman { left: 350px; top: 6px;  width: 80px;  height: 101px; }
body.mobile .g-girl    { left: 440px; top: 14px; width: 46px;  height: 88px; }

/* contact */
body.mobile.page-contact #stage { --stage-pad-bottom: 60px; }
body.mobile.page-contact .pegasus   { left: 2px;   top: 56px; width: 104px; }
body.mobile.page-contact .pegasus.r { left: 534px; top: 55px; }
body.mobile .contact-top { height: auto; display: flex; flex-direction: column; align-items: center; }
body.mobile .contact-top > * { position: static; }
body.mobile .laptop { width: 120px; height: 115.2px; margin-bottom: -6px; }
body.mobile .get-in-touch { position: relative; left: 0; top: 0; width: 466px; height: 74.3px; }
body.mobile .contact-copy { width: auto; text-align: center; margin-top: 22px; white-space: normal; }
body.mobile .contact-copy br { display: none; }
body.mobile .contact-copy p:first-child { margin-bottom: 70px; }
body.mobile .plesio { width: 260px; height: 97.6px; margin-top: 26px; align-self: flex-start; }
body.mobile .dance-row { height: 120px; margin-top: 30px; }
body.mobile .dance-row .robot { width: 88px; height: 112.8px; }
body.mobile .dance-row .skel  { top: 18px; width: 64px; height: 104.8px; }
body.mobile .robot.l { left: 0; } body.mobile .robot.r { left: 378px; }
body.mobile .skel.s1 { left: 96px; } body.mobile .skel.s2 { left: 166px; } body.mobile .skel.s3 { left: 236px; } body.mobile .skel.s4 { left: 306px; }

/* e-mail list */
body.mobile.page-wip .pyramid   { left: -6px;  top: 64px; width: 110px; }
body.mobile.page-wip .pyramid.r { left: 530px; top: 60px; }
body.mobile .wip { min-height: 300px; }
body.mobile .wip p, body.mobile .wip h1 { font-size: 42px; }

/* ---------- bottom GIF rows stand on the frame, at any scale ----------
   Each GIF's feet touch the panel's bottom edge; translateY drops the transparent rows some GIFs
   have under their feet (% of the GIF's own height, so it holds on phones too). grift.js puts any
   extra brick height above this row, never below it. */
.window [data-frame-bottom] img, body.mobile .window [data-frame-bottom] img { top: auto; bottom: 0; }
.window [data-frame-bottom] .g-dj    { transform: translateY(5%); }
.window [data-frame-bottom] .g-demon { transform: translateY(2%); }
.window [data-frame-bottom] .skel    { transform: translateY(3.14%); }
.window [data-frame-bottom] .robot.l { transform: translateY(.57%); }
.window [data-frame-bottom] .robot.r { transform: translateY(.57%) scaleX(-1); }
body.mobile.page-events .content, body.mobile.page-contact .content { padding-bottom: 0; }