/* Shared by every page. Everything fits in one screen: no scrolling, sizes follow the window. */
/* the shape of the product photos (width / height). change to match your real photos, e.g. 3 / 4 or 1 / 1 */
:root { --photo-shape: 4 / 5; }
html, body { height: 100%; margin: 0; }
body {
  height: 100vh; height: 100dvh; overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; /* the whole page is one block, centered top-to-bottom */
  max-width: 840px; margin: 0 auto; padding: 4px 8px 3vh; text-align: center;
  font-size: clamp(12px, 2.2vh, 16px);
}
h1 { font-size: clamp(18px, min(6.2vw, 5vh), 36px); margin: 0; line-height: 1.15; overflow-wrap: anywhere; }
h1 a { color: inherit; text-decoration: none; }
h2 { font-size: clamp(13px, min(4vw, 2.6vh), 18px); margin: 0.1em 0 0.2em; line-height: 1.2; }
/* little profile photos on both sides of "hello, i am stephen" (the right one mirrored so they face each other) */
.hello { display: flex; align-items: center; justify-content: center; gap: 1.2em; }
.me { height: 3em; width: 3em; border: 1px solid #000; flex: none; }
.me.flip { transform: scaleX(-1); }
input { font: inherit; }
p { margin: 0.4em 0; }
/* breathing room between the sections; vh so it grows on tall screens and shrinks on short ones */
/* the product's name: the title of the product page, second only to the welcome */
.product-title { font-size: clamp(18px, min(5.5vw, 4vh), 30px); margin: 2vh 0 0; }
.crumbs { font-size: 0.85em; margin: 0.1em 0 2.5vh; }
main { margin-top: 2vh; }
.socials { margin-top: 3vh; }
form.signup p { margin: 1vh 0; }

/* ---------- home page: list of things ---------- */
main { flex: 0 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
.things {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 16px;
}
.thing { width: 150px; }
.thing img { width: 100%; aspect-ratio: var(--photo-shape); object-fit: cover; display: block; border: 1px solid #000; }

/* ---------- product page: photos + signup form ---------- */
/* photos + form only take the room they need (and shrink on small screens) */
form.signup { flex: 0 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
.variants { flex: 0 1 auto; max-height: 55vh; min-height: 80px; display: flex; justify-content: center; gap: 12px; margin: 0 0 2.5vh; }
/* each column is only as wide as its photo can be at the height it gets, so the photos sit side by side */
.variant { flex: 0 1 calc((55vh - 4em) * var(--photo-shape)); min-width: 0; display: flex; flex-direction: column; }
.variant input[type=number] { width: 3.5em; }
/* the photo box takes the photos' shape, so there's no blank space above or below */
.pic { aspect-ratio: var(--photo-shape); flex: 0 1 auto; min-height: 0; position: relative; }
/* the frame is exactly the photo's size, so the arrows sit on the photo's edges */
.frame { container-type: inline-size; position: relative; display: block; height: 100%; max-width: 100%; aspect-ratio: var(--photo-shape); margin: 0 auto; }
.pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pic img { cursor: pointer; }
/* photo arrows: round buttons on the left/right edge of the photo, so it's obvious there are more */
.pic .prev, .pic .next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: min(1.7em, 30cqw); height: min(1.7em, 30cqw); padding: 0; border: 1px solid #000; border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); color: #000; cursor: pointer;
  font: bold min(18px, 18cqw)/1 Verdana, sans-serif;   /* arrows shrink with small photos */
}
.pic .prev { left: min(6px, 3cqw); }
.pic .next { right: min(6px, 3cqw); }
.pic .prev:hover, .pic .next:hover { background: #fff; }
/* dots under the photo: how many photos there are, and which one you're on */
.dots { line-height: 1; margin: 4px 0 2px; }
.dots button {
  width: 9px; height: 9px; margin: 0 3px; padding: 0; vertical-align: middle;
  border: 1px solid #000; border-radius: 50%; background: #fff; cursor: pointer;
}
.dots button.on { background: #000; }
input[type=email] { width: 16em; max-width: 90%; }
.knows { white-space: nowrap; margin-left: 0.6em; }
/* the honeypot field: off-screen, only bots fill it in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { display: flex; justify-content: center; }

/* ---------- bouncers (added by site.js) ---------- */
.bounce { position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none; }
#cat { width: 150px; }
#cat img { width: 100%; display: block; }
/* meme caption: white Impact letters with a black outline, across the bottom of the photo */
#cat span {
  position: absolute; left: 0; right: 0; bottom: 6px; text-align: center;
  font: bold 21px/1 Impact, "Anton", "Arial Black", sans-serif; color: #fff; white-space: nowrap;
  -webkit-text-stroke: 1.5px #000; text-shadow: 0 2px 3px #000;
}
#ty { font-size: 32px; font-weight: bold; white-space: nowrap; }
/* the instagram one is clickable, so it floats above the page instead of behind it */
#follow { z-index: 1; pointer-events: auto; font-size: 20px; font-weight: bold; white-space: nowrap; }
@media (max-width: 500px) { #follow { font-size: 15px; } }
/* the maplestory guy, standing on the bottom edge of the screen */
#guy { position: fixed; left: 0; bottom: 22px; height: 120px; aspect-ratio: 128 / 180; z-index: -1; pointer-events: none; }
@media (max-width: 500px) { #guy { height: 84px; } }
#guy img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the joints each part turns around (shoulders and hips), as % of the 128x180 sprite */
#guy .body  { transform-origin: 50% 100%; }
/* the name tag under his feet, like the game's */
#guy .tag {
  position: absolute; top: 100%; left: 50%; margin-top: 1px; padding: 1px 5px; border-radius: 3px;
  background: rgba(0, 0, 0, 0.62); color: #fff; font: 14px/1.3 Verdana, sans-serif; white-space: nowrap;
  transform: translateX(-50%);
}
#guy .handL { transform-origin: 39% 62%; }
#guy .handR { transform-origin: 69% 62%; }
#guy .legL  { transform-origin: 45% 81%; }
#guy .legR  { transform-origin: 62% 81%; }
#corners { position: fixed; bottom: 4px; right: 8px; font-size: 12px; }