/* cqw = 1% of .stack width */

:root {
  --red: #f43f5e;
  --panel: #000;
  --grille: url(images/amp/grille.webp);
  --grille-shade: inset 0 0 2.4cqw 1.1cqw #000, inset 0 2.2cqw 4.2cqw -.6cqw #000, inset 0 0 8cqw 1cqw rgba(0, 0, 0, .6);
  --rule: #e6e6e6;
  --cable-shadow: drop-shadow(5px 9px 5px rgba(0, 0, 0, .55)) drop-shadow(1px 3px 2px rgba(0, 0, 0, .5));
  --display: "Caveat Brush", "Marker Felt", "Comic Sans MS", cursive;
  --body: "Patrick Hand", "Segoe Print", "Comic Sans MS", sans-serif;
  --sans: "Geist", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: #000; scroll-behavior: smooth; overflow-x: clip; }
body {
  overflow-x: clip;
  margin: 0;
  padding: 16px max(8px, 2.2vw) 0;
  color: #fff;
  font: 18px/1.3 var(--body);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stack { position: relative; container-type: inline-size; width: min(100%, 1036px); margin: 0 auto; }

/* wobbly borders; the filter is defined in index.html */
.badge::before, .plaque::before, .promise::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #ededed;
  border-radius: 10px;
  filter: url(#rough);
  pointer-events: none;
}

.head { width: 104%; margin: 0 -2%; }
.head-top, .head-nav > .panel { width: 100%; }
.head-body {
  margin: -1px 0;
  padding: .5cqw 0 2.5cqw;
  border: solid transparent;
  border-width: 0 8.94cqw;
  border-image: url(images/amp/head-side-2.webp) 0 70 0 70 / 0 8.94cqw stretch;
  background: var(--grille) 0 0 / 17cqw 17cqw, var(--panel);
  background-clip: padding-box;
  box-shadow: var(--grille-shade);
  text-align: center;
}
.logo { width: 88%; margin: 0 auto; mix-blend-mode: screen; }
.tagline, .sub { margin: 0; font-family: var(--display); font-style: italic; text-transform: uppercase; }
.tagline { margin-top: -.2cqw; font-size: clamp(15px, 3.7cqw, 38.75px); letter-spacing: .01em; }
.sub { margin-top: .8cqw; font-size: clamp(13px, 2.7cqw, 27.5px); letter-spacing: .02em; }
.sub i { margin: 0 .55em; font-style: normal; }
.free { margin: 1.6cqw 0 0; font-size: clamp(15px, 3cqw, 31.25px); font-style: italic; }

.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 2cqw; margin: 2.4cqw auto 0; }
.badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 22cqw;
  padding: 10px 20px 10px 16px;
  background: #000;
  text-decoration: none;
}
.badge-ic svg { display: block; width: 3.4cqw; height: 3.4cqw; }
.badge-tx { line-height: 1; text-align: left; }
.badge-tx small { display: block; font-size: min(12px, 1.5cqw); }
.badge-tx b { display: block; margin-top: 3px; font-size: min(22px, 2.75cqw); font-weight: 400; }

/* sticky; sits above .blackout, so it has its own dimming layer */
.head-nav { position: sticky; top: 0; z-index: 12; width: 104%; margin: 0 -2%; background: #000; }
.head-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}
.is-dark .head-nav::before { opacity: .94; }
.head-nav a {
  position: absolute;
  top: 7.36%;
  left: calc(var(--x) - 7%);
  width: 14%;
  height: 77.3%;
  color: #120a02;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.head-nav a:focus-visible { outline-offset: -2px; border-radius: 8px; }
/* dials: --x is a knob's horizontal centre, --kd its width */
.ticks, .knob {
  position: absolute;
  top: 44.44%;
  left: 50%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ticks { width: 89.5%; }
.knob { width: var(--kd); transition: transform .45s cubic-bezier(.2, .8, .3, 1); }
.head-nav a:hover .knob, .head-nav a:focus-visible .knob, .head-nav a:active .knob {
  transform: translate(-50%, -50%) rotate(150deg);
}
.jack {
  position: absolute;
  z-index: 4;
  width: 5.6%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jack img { display: block; width: 100%; height: 100%; pointer-events: none; }
.jack::after { content: ""; position: absolute; inset: -6px; }
.jack:focus-visible { outline-offset: 3px; }

/* guitar cable: drawn in the panel's 814x163 coordinate space */
.cable {
  position: absolute;
  inset: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: brightness(1) var(--cable-shadow);
  transition: filter .7s ease;
}
.is-dark .cable { filter: brightness(.06) var(--cable-shadow); }
.head-nav a span {
  position: absolute;
  top: 75.5%;
  left: 0;
  right: 0;
  font: italic 700 clamp(8.5px, 2.2cqw, 22.5px)/.95 var(--display);
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}
.head-nav a:hover span, .head-nav a:focus-visible span { color: var(--red); }

.blackout {
  position: absolute;
  inset: 0 -50vw;
  z-index: 10;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}
.is-dark .blackout { opacity: .94; }
.power {
  position: absolute;
  left: 9.58%;
  top: 24.54%;
  width: 5.16%;
  aspect-ratio: 42 / 59;
  z-index: 11;
  padding: 0;
  border: 0;
  background: none;
  perspective: 300px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.power::after { content: ""; position: absolute; inset: -10px; }
.power:focus-visible { outline-offset: 6px; }
.power-flip {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.3, 1.5, .5, 1);
}
.power-face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; }
.power-back { transform: rotateX(180deg); }
.is-dark .power-flip { transform: rotateX(180deg); }
.is-dark .power { animation: power-glow 2s ease-in-out infinite; }
@keyframes power-glow {
  0%, 100% { filter: drop-shadow(0 0 3px var(--red)); }
  50% { filter: drop-shadow(0 0 10px var(--red)) drop-shadow(0 0 3px var(--red)); }
}

.cab {
  position: relative;
  margin-top: -.35cqw;
  padding-bottom: 1.6cqw;
  border: solid transparent;
  border-width: 6.76cqw 8.44cqw 4.34cqw;
  border-image: url(images/amp/cabinet-frame-2.webp) 56 70 36 70 / 6.76cqw 8.44cqw 4.34cqw round;
  background: var(--grille) 0 0 / 17cqw 17cqw, var(--panel);
  background-clip: padding-box;
  box-shadow: var(--grille-shade);
  text-align: center;
  scroll-margin-top: calc(20.83cqw + 12px);
}
.plaque {
  position: relative;
  display: table;
  margin: -4.9cqw auto 2cqw;
  padding: .25em .9em .15em;
  background: #000;
  font: italic 400 clamp(22px, 5.6cqw, 57.5px)/1 var(--display);
  letter-spacing: .01em;
  text-transform: uppercase;
}
.plaque::before { border-width: 3px; border-radius: 8px; box-shadow: 0 0 0 2px #000, 0 0 0 3.5px #8a8a8a; }
.plaque span { position: relative; }
.plaque.small { font-size: clamp(18px, 4.4cqw, 45px); }

.lede { max-width: 92%; margin: .4em auto; font-size: clamp(14px, 2.3cqw, 23.75px); }
.text-link { color: var(--red); text-underline-offset: .2em; }
.text-link:hover, .text-link:focus-visible { color: #fff; }
.lede.big { margin: .6em auto .1em; font-size: clamp(19px, 3.6cqw, 37.5px); }
.lede.strong { margin-top: 0; font-size: clamp(16px, 2.9cqw, 30px); }

.cols { display: grid; grid-template-columns: repeat(4, 1fr); margin: 1.8cqw 0 0; padding: 0; list-style: none; }
.col { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 1.4cqw; }
.col + .col::before, .rev::after {
  content: "";
  position: absolute;
  top: 4%;
  bottom: 4%;
  width: 2px;
  background: var(--rule);
}
.col + .col::before { left: 0; }
.ic { width: auto; height: clamp(34px, 6.4cqw, 67.5px); margin-bottom: .6cqw; }
.col h3 { margin: .1em 0; font: italic 400 clamp(17px, 3.3cqw, 35px)/1 var(--display); text-transform: uppercase; }
.col p { max-width: 15em; margin: 0; font-size: clamp(13px, 2.15cqw, 22.5px); }

.marquee {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .4cqw 0 1cqw;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee::-webkit-scrollbar { display: none; }
.marquee:focus-visible { outline-offset: -2px; border-radius: 8px; }
@media (hover: hover) {
  .marquee { cursor: grab; }
  .marquee.dragging { cursor: grabbing; user-select: none; }
}
.revs { flex: none; display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.rev {
  position: relative;
  flex: none;
  width: clamp(230px, 42cqw, 437.5px);
  padding: 0 2.2cqw;
  text-align: center;
}
.rev::after { right: 0; }
.rev blockquote { margin: 0; font-size: clamp(14px, 2.35cqw, 23.75px); }
.rev p { margin: 0 0 .6em; }
.rev footer { margin-top: .2em; }
.rev-hint { margin: 0; color: #9b9b9b; font-size: clamp(12px, 1.9cqw, 18.75px); font-style: italic; text-align: center; }

.promise {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15em;
  margin: 2cqw 1.5cqw 0;
  padding: .7em .8em .6em;
  list-style: none;
  font: italic 700 clamp(14px, 2.9cqw, 30px)/1.25 var(--sans);
  text-transform: uppercase;
}
.promise::before { border: 3px solid var(--red); border-radius: 9px; }
.promise li { position: relative; }

.cta {
  display: inline-block;
  margin: 0 auto .6cqw;
  padding: .55em 1.9em .45em;
  background: var(--red);
  clip-path: polygon(1.5% 28%, 6% 8%, 14% 18%, 24% 3%, 38% 12%, 52% 2%, 66% 11%, 80% 4%, 93% 14%, 99% 30%, 96% 55%, 100% 78%, 90% 96%, 74% 88%, 58% 100%, 42% 90%, 26% 99%, 12% 90%, 4% 98%, 0 72%, 3% 50%);
  color: #14090c;
  font: italic 400 clamp(17px, 3.2cqw, 33.75px)/1 var(--display);
  text-decoration: none;
  text-transform: uppercase;
  transition: filter .15s;
}
.cta:hover, .cta:focus-visible { filter: brightness(1.15); }

.wheels { display: flex; justify-content: space-between; margin-top: -1.6cqw; padding: 0 5.2cqw; }
.wheels img { width: 7cqw; }

.site-footer { padding: 0 8px 36px; color: #bbb; font-size: 16px; text-align: center; }
.site-footer p { margin: 18px 0 0; }

.pedalboard {
  position: relative;
  z-index: 2;
  left: 50%;
  width: min(2000px, max(100vw, min(170vw, 1694px)));
  margin: -16.4cqw 0 0;
  transform: translateX(-50%);
  pointer-events: none;
}
.board { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.pedal {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 6%;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.pedal .down { position: absolute; opacity: 0; transition: opacity .07s ease-out; pointer-events: none; }
.pedal.pressed .down, .pedal:active .down { opacity: 1; }
.pedal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.pedal:hover::before, .pedal:focus-visible::before { opacity: .22; }
.pedal::after {
  content: "";
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  width: 5.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--led);
  box-shadow: 0 0 9px 3px var(--led);
  opacity: .5;
  transition: opacity .1s, box-shadow .1s;
  animation: led-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
.pedal:nth-of-type(2)::after { animation-delay: -.7s; }
.pedal:nth-of-type(3)::after { animation-delay: -1.4s; }
.pedal:nth-of-type(4)::after { animation-delay: -2s; }
.pedal.pressed::after, .pedal:active::after { opacity: 1; animation: none; box-shadow: 0 0 16px 7px var(--led); }
@keyframes led-pulse { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }

@container (max-width: 640px) {
  .cols { grid-template-columns: repeat(2, 1fr); row-gap: 5cqw; }
  .col:nth-child(3)::before { display: none; }
  .badges { flex-wrap: nowrap; gap: 1.6cqw; }
  .badge { flex: 1 1 0; justify-content: center; min-width: 0; gap: 5px; padding: 7px 5px; }
  .badge-ic svg { width: 20px; height: 20px; }
  .badge-tx small { display: none; }
  .badge-tx b { margin-top: 0; font-size: clamp(10px, 3.4cqw, 20px); line-height: 1.05; }
}
@container (max-width: 340px) {
  .head-nav a span { font-size: 8px; line-height: .85; }
  .badge { gap: 4px; padding: 7px 4px; }
  .badge-ic svg { width: 17px; height: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knob, .power-flip { transition: none; }
  .pedal::after { animation: none; }
  .is-dark .power { animation: none; filter: drop-shadow(0 0 8px var(--red)); }
  .revs[aria-hidden] { display: none; }
}