/* 3DPrintingIsNotACrime.org — Shop and About pages
 *
 * Same black neon register as the home page, with more depth than the poster
 * layout carries: a synthwave grid horizon, glow on the headings, and card
 * surfaces that pick up the legend colours. Tokens are copied from home.css
 * on purpose so the two files stay independent — home.css is the approved
 * mockup and should not be edited to serve these pages.
 */

:root {
  --bg: #000;
  --fg: #fff;
  --dim: #b9b9b9;
  --neon-green: #35ff4a;
  --neon-red: #ff2d2d;
  --neon-blue: #2d6bff;
  --line: #1c1c1c;
  --panel: #0a0c10;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* ------------------------------------------------------------ decoration */

/* Synthwave horizon: a perspective grid pinned to the bottom of the viewport,
   sitting behind everything. Purely decorative, hidden from assistive tech. */
.grid-bg {
  position: fixed;
  inset: auto 0 0 0;
  height: 46vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background:
    repeating-linear-gradient(
      to right,
      rgba(53, 255, 74, 0.16) 0 1px,
      transparent 1px 84px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(53, 255, 74, 0.16) 0 1px,
      transparent 1px 58px
    );
  transform: perspective(320px) rotateX(66deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to bottom, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
}

/* A soft coloured bloom behind the top of the page. */
.glow-bg {
  position: fixed;
  top: -30vh;
  left: 50%;
  width: 120vw;
  height: 70vh;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(53, 255, 74, 0.10) 0%,
    rgba(45, 107, 255, 0.06) 40%,
    transparent 70%
  );
}

main {
  position: relative;
  z-index: 1;
  max-width: 940px;
  margin: 0 auto;
  padding: 28px 20px 70px;
}

/* ------------------------------------------------------------------- nav */

.topnav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  max-width: 940px;
  margin: 0 auto;
  padding: 20px 20px 0;
}

.topnav .brand {
  font-family: 'Archivo Black', 'Arial Black', Helvetica, sans-serif;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  margin-right: auto;
}

.topnav .brand:hover { text-shadow: 0 0 16px rgba(255, 255, 255, 0.6); }

.topnav a:not(.brand) {
  color: var(--dim);
  text-decoration: none;
  font-size: 0.92rem;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.topnav a:not(.brand):hover,
.topnav a:not(.brand):focus-visible {
  color: var(--fg);
  border-bottom-color: var(--neon-green);
  outline: none;
}

/* ----------------------------------------------------------------- hero */

.page-hero { text-align: center; padding: clamp(34px, 7vw, 74px) 0 clamp(26px, 4vw, 44px); }

.eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon-green);
  margin-bottom: 18px;
  text-shadow: 0 0 18px rgba(53, 255, 74, 0.55);
}

.page-hero h1 {
  font-family: 'Archivo Black', 'Arial Black', Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 7.4vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 0 34px rgba(255, 255, 255, 0.28);
}

.page-hero .lead {
  max-width: 640px;
  margin: 22px auto 0;
  color: var(--dim);
  font-size: clamp(1rem, 2.3vw, 1.16rem);
}

/* --------------------------------------------------------------- buttons */

.neon-btn {
  display: inline-block;
  font-family: 'Archivo Black', 'Arial Black', Helvetica, sans-serif;
  font-size: clamp(1rem, 2.6vw, 1.28rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #04170a;
  background: var(--neon-green);
  padding: 17px 40px;
  border-radius: 3px;
  border: 1px solid var(--neon-green);
  box-shadow: 0 0 26px rgba(53, 255, 74, 0.42);
  transition: box-shadow 0.18s, transform 0.18s, background 0.18s;
}

.neon-btn:hover,
.neon-btn:focus-visible {
  box-shadow: 0 0 46px rgba(53, 255, 74, 0.85);
  transform: translateY(-2px);
  outline: none;
}

.neon-btn.ghost {
  background: transparent;
  color: var(--neon-green);
  box-shadow: 0 0 18px rgba(53, 255, 74, 0.18);
}

.neon-btn.ghost:hover,
.neon-btn.ghost:focus-visible {
  background: rgba(53, 255, 74, 0.1);
  box-shadow: 0 0 34px rgba(53, 255, 74, 0.4);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* ---------------------------------------------------------------- panels */

.panel {
  background: linear-gradient(180deg, var(--panel), #05070a);
  border: 1px solid #1e2430;
  border-radius: 10px;
  padding: clamp(26px, 4vw, 42px);
  margin-top: clamp(30px, 5vw, 52px);
}

.panel h2 {
  font-family: 'Archivo Black', 'Arial Black', Helvetica, sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
}

.panel p { color: var(--dim); margin: 0 0 1em; }
.panel p:last-child { margin-bottom: 0; }

/* Paragraph still awaiting David's copy. Deliberately loud so it cannot
   ship by accident. Delete this rule once the placeholder is gone. */
.panel p.placeholder {
  color: #ffd7a1;
  border-left: 3px solid var(--neon-red);
  background: rgba(255, 45, 45, 0.07);
  padding: 12px 16px;
}

/* --------------------------------------------------------------- designs */

.designs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 26px;
}

.design {
  display: block;
  text-decoration: none;
  background: #07090d;
  border: 1px solid #1e2430;
  border-radius: 8px;
  padding: 24px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.design:hover,
.design:focus-visible {
  border-color: var(--neon-green);
  box-shadow: 0 0 30px rgba(53, 255, 74, 0.22);
  transform: translateY(-3px);
  outline: none;
}

.design .name {
  display: block;
  font-family: 'Archivo Black', 'Arial Black', Helvetica, sans-serif;
  font-size: 1.02rem;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1.2;
  margin-bottom: 9px;
}

.design .note { color: var(--dim); font-size: 0.92rem; }

.design .go {
  display: inline-block;
  margin-top: 14px;
  color: var(--neon-green);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ categories */

.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}

.cats li {
  border: 1px solid #232a36;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.9rem;
  color: var(--dim);
}

/* ------------------------------------------------------------ pull quote */

/* David's note lives in full on the About page. The shop's support panel
   carries the line from it plus his byline, and links through. */
.pull {
  margin: 28px 0 0;
  padding: 26px 28px;
  background: #07090d;
  border: 1px solid #1e2430;
  border-left: 3px solid var(--neon-green);
  border-radius: 8px;
}

.pull blockquote {
  margin: 0;
  font-family: 'Archivo Black', 'Arial Black', Helvetica, sans-serif;
  font-size: clamp(1.05rem, 2.7vw, 1.42rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-shadow: 0 0 24px rgba(53, 255, 74, 0.28);
}

.pull figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.pull .initials {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Archivo Black', 'Arial Black', Helvetica, sans-serif;
  font-size: 0.88rem;
  color: #04170a;
  background: var(--neon-green);
  box-shadow: 0 0 18px rgba(53, 255, 74, 0.38);
}

.pull .who { line-height: 1.3; }
.pull .who strong { display: block; font-size: 0.98rem; }
.pull .who span { color: var(--dim); font-size: 0.86rem; }

.pull-go {
  display: inline-block;
  margin-top: 18px;
  color: var(--neon-green);
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
}

.pull-go:hover,
.pull-go:focus-visible { border-bottom-color: var(--neon-green); outline: none; }

/* --------------------------------------------------------------- byline */

.byline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #1e2430;
}

.byline .initials {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Archivo Black', 'Arial Black', Helvetica, sans-serif;
  font-size: 1.05rem;
  color: #04170a;
  background: var(--neon-green);
  box-shadow: 0 0 22px rgba(53, 255, 74, 0.4);
}

.byline .who { line-height: 1.35; }
.byline .who strong { display: block; font-size: 1.02rem; }
.byline .who span { color: var(--dim); font-size: 0.9rem; }

/* ----------------------------------------------------------------- footer */

footer {
  position: relative;
  z-index: 1;
  max-width: 940px;
  margin: clamp(60px, 9vw, 110px) auto 0;
  padding: 26px 20px 40px;
  border-top: 1px solid var(--line);
  color: #9a9a9a;
  font-size: 0.85rem;
  text-align: center;
}

footer p { margin: 0 0 6px; }

footer a {
  color: #c8c8c8;
  text-decoration: none;
  border-bottom: 1px solid #333;
}

footer a:hover { color: #ddd; }

.foot-links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-bottom: 14px; }

.disclaimer { font-size: 0.82rem; color: #8c8c8c; max-width: 620px; margin: 0 auto; }

/* --------------------------------------------------------------- a11y/etc */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 560px) {
  .grid-bg { height: 34vh; }
  .neon-btn { padding: 15px 28px; }
}

/* --------------------------------------------------------- support block */

.support-block { text-align: center; }
.support-block stripe-buy-button { display: block; margin-top: 8px; }

/* ------------------------------------------------------------- ig byline */

.byline .avatar {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--neon-green);
  box-shadow: 0 0 22px rgba(53, 255, 74, 0.4);
}

.byline .ig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--neon-green);
  text-decoration: none;
  font-size: 0.86rem;
  border-bottom: 1px solid transparent;
}

.byline .ig:hover,
.byline .ig:focus-visible { border-bottom-color: var(--neon-green); outline: none; }

/* ------------------------------------------------------------ paypal button
   David's PayPal snippet, restyled. The brand yellow stays because that is
   what people recognise as PayPal; everything else takes the site's radius
   and typeface so it reads as part of the support block. */

.pay-or {
  display: block;
  margin: 18px auto 14px;
  max-width: 320px;
  color: var(--dim);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.pp-form {
  display: inline-grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
}

.pp-btn {
  min-width: 11.625rem;
  padding: 0 2rem;
  height: 2.75rem;
  border: 0;
  border-radius: 10px;
  background: #FFD140;
  color: #000;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.pp-btn:hover { background: #FFC01F; transform: translateY(-1px); }
.pp-btn:active { transform: none; }

.pp-cards { height: 22px; max-width: 100%; }

.pp-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--dim);
  font-size: 0.72rem;
}

.pp-mark img { height: 0.85rem; vertical-align: middle; }