/* grift.css: shared styles for every page.
   Desktop design canvas is 1333px wide (PSD px / 2.7). Phones use a 640px canvas.
   #stage is zoomed by JS (--scale) so the whole layout scales down on small screens. */

@font-face { font-family: "Gossip High"; src: url(../assets/fonts/Gossip-HighPixel.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Gossip Med";  src: url(../assets/fonts/Gossip-MedPixel.woff2) format("woff2"); font-display: swap; }
/* Jacquard 12 (events copy): 21 font pixels per em, so 42px = 2 screen px per font pixel */
@font-face { font-family: "Jacquard 12"; src: url(../assets/fonts/Jacquard12-Regular.woff2) format("woff2"); font-display: swap; }

/* cross-fade between pages (Chrome, Edge, Safari 18.2+; others just switch) */
@view-transition { navigation: auto; }

:root {
  --cursor: url(../assets/ui/cursor.cur), url(../assets/ui/cursor.png) 0 0, auto;
  --bg-top: #181818;
  --red: #ff0000;
}

* { box-sizing: border-box; }
/* side decorations hang past the 1333 canvas: clip them instead of scrolling sideways */
html { background: var(--bg-top); cursor: var(--cursor); overflow-x: hidden; overflow-x: clip; }
a, button, [data-clickable], label, summary { cursor: var(--cursor); }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-x: clip;
  color: #fff;
  font-family: "Gossip High", serif;
  background: var(--bg-top);
}
img { display: block; }
.px, .px img, img.px { image-rendering: pixelated; }
a { color: inherit; }

/* ---------- page backgrounds ---------- */
/* each tiled background sits under a dark fade: solid #181818 behind the header, then an S-shaped
   (cosine) ease to clear over the same distance on every page, so short and long pages feel alike */
body { --fade-start: calc(380px * var(--scale, 1)); --fade-len: calc(1700px * var(--scale, 1)); }
body.mobile { --fade-start: calc(520px * var(--scale, 1)); --fade-len: calc(2000px * var(--scale, 1)); }
body {
  --fade: linear-gradient(#181818 0,
    rgba(24,24,24,1.000) calc(var(--fade-start) + var(--fade-len) * 0.00),
    rgba(24,24,24,0.976) calc(var(--fade-start) + var(--fade-len) * 0.10),
    rgba(24,24,24,0.905) calc(var(--fade-start) + var(--fade-len) * 0.20),
    rgba(24,24,24,0.794) calc(var(--fade-start) + var(--fade-len) * 0.30),
    rgba(24,24,24,0.655) calc(var(--fade-start) + var(--fade-len) * 0.40),
    rgba(24,24,24,0.500) calc(var(--fade-start) + var(--fade-len) * 0.50),
    rgba(24,24,24,0.345) calc(var(--fade-start) + var(--fade-len) * 0.60),
    rgba(24,24,24,0.206) calc(var(--fade-start) + var(--fade-len) * 0.70),
    rgba(24,24,24,0.095) calc(var(--fade-start) + var(--fade-len) * 0.80),
    rgba(24,24,24,0.024) calc(var(--fade-start) + var(--fade-len) * 0.90),
    rgba(24,24,24,0.000) calc(var(--fade-start) + var(--fade-len) * 1.00)) 0 0 / 100% 100% no-repeat;
}
/* about: carved shrine-stone tile (Dungeon Crawl Stone Soup "shrine_stone_wall", CC0, darkened and
   scaled 3x so each pixel stays crisp), faded dark at the top like the contact page */
body.bg-about {
  background:
    var(--fade),
    url(../assets/ui/shrine-wall.png) 50% 0 / calc(96px * var(--scale, 1)) auto repeat,
    #0d0c10;
}
/* events: yob's flame tile (background tiles/events.png), faded dark at the top like the contact page.
   Shown at 3/4 size, matching yob's reference. */
body.bg-events {
  background:
    var(--fade),
    url(../assets/ui/events-tile.png) 50% 0 / calc(210.75px * var(--scale, 1)) auto repeat,
    #c8461a;
}
body.bg-contact {
  background:
    var(--fade),
    /* tile lined up with the PSD background: origin at stage (1, 193) */
    url(../assets/ui/circuit.jpg) calc(50% - 482px * var(--scale, 1)) calc(193px * var(--scale, 1)) / calc(367px * var(--scale, 1)) auto repeat,
    #102020;
}

/* ---------- stage ---------- */
#stage {
  position: relative;
  width: 1333px;
  margin: 0 auto;
  zoom: var(--scale, 1);
  display: flow-root;
  overflow: visible clip;
  overflow-clip-margin: 0;
  padding-bottom: var(--stage-pad-bottom, 70px);
}
.deco { position: absolute; z-index: 1; pointer-events: none; }
.deco img { width: 100%; height: auto; image-rendering: pixelated; }

/* ---------- logo ---------- */
.logo {
  position: absolute; z-index: 5;
  left: 341.5px; top: 96.7px; width: 633px; height: 174.8px;
  display: block;
}
/* the still includes its shadow; the spin gets the same shadow as a filter */
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo .spin { left: 1.975%; top: -.744%; width: 98.83%; height: 98.97%; filter: drop-shadow(-8.9px 6.7px 17px rgba(0,0,0,.78)); }
.logo .spin { visibility: hidden; }
.logo.spinning .spin { visibility: visible; }
.logo.spinning .still { visibility: hidden; }

/* ---------- window ----------
   The stone frame is cut from the PSD render (assets/ps/stone-*.webp): a fixed top and bottom
   edge, and a 10-brick side strip that repeats at its real size. grift.js grows each window to a
   whole number of bricks (56.556 px), so the tiling never stretches and every page lines up the
   same. --f scales the frame (1 on desktop, 538/1017.8 on phones), --bw is the border width. */
.window {
  --f: 1; --bw: 26px; --pad: .7px;
  position: relative;
  z-index: 3;
  width: 1017.8px;
  margin: 367.8px 0 0 158.1px;
  /* browsers snap borders to whole px, so 26 + .7 padding keeps the panel at 184.8 */
  border: var(--bw) solid transparent;
  padding: var(--pad);
  background:
    linear-gradient(var(--panel, #282828), var(--panel, #282828)) padding-box,
    url(../assets/ps/stone-side-l.webp) left 0 top calc(26.296px * var(--f)) / calc(27.037px * var(--f)) calc(565.56px * var(--f)) repeat-y border-box,
    url(../assets/ps/stone-side-r.webp) right 0 top calc(26.296px * var(--f)) / calc(27.037px * var(--f)) calc(565.56px * var(--f)) repeat-y border-box;
  box-shadow: -12px 9px 33px #000;
}
.window::before, .window::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(-1 * var(--bw)); right: calc(-1 * var(--bw));
  background: 0 0 / 100% 100% no-repeat;
}
.window::before { top: calc(-1 * var(--bw)); height: calc(27.778px * var(--f)); background-image: url(../assets/ps/stone-top.webp); }
.window::after { bottom: calc(-1 * var(--bw)); height: calc(28.889px * var(--f)); background-image: url(../assets/ps/stone-bottom.webp); }
.window > .panel { background: var(--panel, #282828); position: relative; }
.bg-about  { --panel: #1b1b1d; }

/* chains hang behind the window and the fire strip */
.chain { position: absolute; z-index: 2; top: 0; width: 50.7px; height: 390.4px; pointer-events: none; }
.chain.l { left: 246.7px; }
.chain.r { left: 1015.6px; }

.fire {
  position: absolute; z-index: 2; pointer-events: none;
  left: -21.1px; top: -101.1px; width: 1007px; height: 74px;
  image-rendering: pixelated;
}

/* ---------- nav ---------- */
.nav { display: flex; position: relative; z-index: 4; }
.nav a {
  flex: 1 1 0;
  height: 95.6px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background: url(../assets/ps/button.webp) center / 100% 100% no-repeat;
  color: #fff;
  text-decoration: none;
  font-family: "Gossip Med", serif;
  /* Gossip's grid is 28 font pixels per em: 42px = 1.5px per font pixel (3 device px on Retina) */
  font-size: 42px;
  line-height: 30px;
  letter-spacing: 3px;
  padding-top: var(--nav-pt, 0px);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: none;
}
.nav a > span { display: block; }
/* centre each label's ink on the button face (the face sits a touch right of and above the box centre,
   and the trailing letter spacing pulls every label left). Measured per label; order is the same on every page. */
.nav a > span { position: relative; left: 2.1px; top: var(--ny, 0px); }
.nav a:nth-child(1) { --ny: .3px; }   /* about */
.nav a:nth-child(2) { --ny: -2.7px; } /* events */
.nav a:nth-child(3) { --ny: -1.9px; } /* e-mail list */
.nav a:nth-child(4) { --ny: -2.7px; } /* contact */
.nav a:nth-child(5) { --ny: -1.9px; }  /* scams homepage: same lines as e-mail list */
/* red drop shadow: current page always, others on hover */
.nav a[aria-current="page"] span,
.nav a:hover span,
.nav a:focus-visible span { text-shadow: -2.4px 2.4px 0 var(--red); }
/* press-in */
.nav a:active {
  filter: brightness(.78);
  box-shadow: inset 3px 3px 0 rgba(0,0,0,.55), inset -2px -2px 0 rgba(255,255,255,.18);
}
.nav a:active span { transform: translate(1px, 3px); }
.nav a:focus { outline: none; }
.nav a:focus-visible { outline: 2px dashed #fff; outline-offset: -8px; }

/* scams colour cycle */
.scams { color: #ff1a1a; }
.scams.c1 { color: #19e619; }
.scams.c2 { color: #1f5cff; }
.scams.c3 { color: #ffee00; }

/* ---------- content ---------- */
.content { padding: 34px 38px 30px; }
.copy {
  font-family: "Gossip High", serif;
  font-size: 24.5px;
  line-height: 37px;
  letter-spacing: 0;
  margin: 0;
}
.copy p { margin: 0 0 37px; }
.copy p:last-child { margin-bottom: 0; }
.right { text-align: right; }
.center { text-align: center; }

/* image headings (Photoshop renders); the text lives in alt */
.hl-img { margin: 0; font-size: 0; line-height: 0; }
.hl-img img { width: 100%; height: 100%; }

/* ---------- fire trail canvas ---------- */
#fire-trail { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; image-rendering: pixelated; }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; flex-direction: column; }
.lb.open { display: flex; }
/* lightbox window: pieces of assets/ps/gallery-window (PSD px / 2.7). Only the plain parts stretch:
   the title and menu bars between their text and buttons, the side border and the scrollbar tracks. */
.lb-win { display: inline-flex; flex-direction: column; max-width: 100vw; filter: drop-shadow(2px 2px 0 #000); }
.lb-top { position: relative; height: 41.48px; border-style: solid; border-width: 0 60.74px 0 148.15px; border-image: url(../assets/ps/lb-top.webp) 0 164 0 400 fill / 0 60.74px 0 148.15px stretch; }
.lb-name { position: absolute; left: -53.75px; right: -4px; top: 6.4px; font: bold 10px/11px Tahoma, Verdana, "Segoe UI", sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-font-smoothing: auto; pointer-events: none; }
.lb-close { position: absolute; right: -55.9px; top: 5.2px; width: 15.9px; height: 12.6px; padding: 0; border: 0; background: transparent; }
.lb-close:focus-visible { outline: 1px dotted #fff; }
.lb-mid { display: flex; }
.lb-left { flex: none; width: 5.56px; background: url(../assets/ps/lb-left.webp) 0 0 / 100% 100%; }
.lb-vbar { flex: none; width: 20.37px; border-style: solid; border-width: 14.81px 0 14.44px; border-image: url(../assets/ps/lb-vbar.webp) 40 0 39 fill / 14.81px 0 14.44px round; }
.lb-img { display: block; min-width: 200px; min-height: 120px; max-width: calc(100vw - 25.93px - 24px); max-height: calc(100vh - 62.22px - 24px); width: auto; height: auto; background: #111; }
.lb-bottom { position: relative; height: 20.74px; border-style: solid; border-width: 0 34.07px 0 20.37px; border-image: url(../assets/ps/lb-bottom.webp) 0 92 0 55 fill / 0 34.07px 0 20.37px round; }
.lb-bottom .w95-arr { top: 0; }
.lb-bottom .w95-arr.prev { left: -14.81px; }
.lb-bottom .w95-arr.next { left: auto; right: -14.81px; }
.lb-thumb { top: 0; height: 15.19px; }
.lb.single .lb-thumb { display: none; }
.w98btn { font: bold 12px/12px Tahoma, Verdana, sans-serif; background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; min-width: 18px; height: 16px; padding: 0 3px; display: inline-flex; align-items: center; justify-content: center; }
.w98btn:active { border-color: #404040 #fff #fff #404040; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); font-size: 18px; height: 44px; min-width: 36px; z-index: 9001; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }

/* ---------- phones: 640px canvas ---------- */
body.mobile #stage { width: 640px; --stage-pad-bottom: 40px; }
body.mobile .logo { left: 120px; top: 52px; width: 400px; height: 111px; }
body.mobile #stage { overflow: clip; }
body.mobile .window { --f: .5286; --bw: 13.74px; --pad: .37px; width: 538px; margin-left: 51px; margin-top: 240px; }
/* chains and fire keep the desktop proportions (x 0.5286 of the window) */
body.mobile .chain { height: 252px; width: 26.8px; }
body.mobile .chain.l { left: 97.8px; } body.mobile .chain.r { left: 504.3px; }
body.mobile .fire { left: -11.15px; top: -53.28px; width: 532.3px; height: 39.1px; }
body.mobile .nav { flex-wrap: wrap; }
body.mobile .nav a { flex: 1 1 33.33%; height: 68px; font-size: 42px; line-height: 30px; }
body.mobile .nav a:nth-child(n+4) { flex-basis: 50%; }
body.mobile .nav a > span { left: 2.2px; }
body.mobile .nav a:nth-child(1) { --ny: 1.2px; }
body.mobile .nav a:nth-child(2) { --ny: -1.7px; }
body.mobile .nav a:nth-child(3) { --ny: -1.3px; }
body.mobile .nav a:nth-child(4) { --ny: -1.7px; }
body.mobile .nav a:nth-child(5) { --ny: -1.3px; }
body.mobile .hide-m { display: none !important; }