/* ==========================================================
   MISFIT MUTTS CLUB
   Black brick, white stencil, orange spray, marker scrawl.
   From the Shopify theme v6 (store.mmc/misfit-mutts-theme-v6.zip).
   ========================================================== */

@font-face { font-family: 'MMC Stencil'; src: url('../fonts/big-shoulders-stencil-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'MMC Barlow'; src: url('../fonts/barlow-condensed-500.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'MMC Barlow'; src: url('../fonts/barlow-condensed-800.woff2') format('woff2'); font-weight: 700 900; font-display: swap; }
@font-face { font-family: 'MMC Marker'; src: url('../fonts/permanent-marker.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --black: #0b0b0b;
  --concrete: #1c1c1c;
  --grey-d: #2a2a2a;
  --grey: #9a9a9a;
  --grey-l: #cfcfcf;
  --white: #f5f5f2;
  --orange: #ff6b1a;
  --red: #ff8a80;
  --green: #9be29b;
  --stencil: 'MMC Stencil', Impact, 'Arial Narrow', sans-serif;
  --marker: 'MMC Marker', 'Comic Sans MS', cursive;
  --body: 'MMC Barlow', 'Arial Narrow', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--white);
  background: var(--black) url('../images/brick-wall.webp') center top / cover fixed;
}
/* film grain over everything */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
main:focus { outline: none; }

h1, h2, h3 { font-family: var(--stencil); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1.02; margin: 0 0 .5em; }
h2 { font-size: clamp(2.2rem, 6vw, 3.6rem); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--orange); color: var(--black); padding: .6rem 1rem; font-weight: 800; }
.skip-link:focus { top: 1rem; }

/* ---------- hero ---------- */
.hero { max-width: 72rem; margin: 0 auto; padding: clamp(2rem, 6vw, 4.5rem) 1rem 2rem; text-align: center; }
.wordmark { margin: 0 auto; max-width: 44rem; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .7)); }
.tag { font-family: var(--marker); color: var(--grey-l); font-size: clamp(1.2rem, 3.4vw, 1.7rem); display: inline-block; transform: rotate(-2deg); margin: .8rem 0 0; }
.soon-picture { width: 100%; margin: clamp(1.5rem, 4vw, 2.5rem) auto 0; border: 3px solid var(--grey-d); box-shadow: 0 10px 30px rgba(0, 0, 0, .7); }
.hero-words { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.hero-words h2 { color: var(--white); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.hero-words p { font-size: clamp(1.15rem, 2.6vw, 1.45rem); color: var(--grey-l); max-width: 40rem; margin: 0 auto; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }

/* ---------- tape of slogans ---------- */
/* the wrapper clips the tilted tape's ends, so the page never scrolls sideways */
.tape-wrap { overflow: hidden; padding: 1.5rem 0 2rem; }
.tape { background: var(--white); color: var(--black); overflow: hidden; transform: rotate(-1.5deg); margin: 0 -1rem; padding: .7rem 0; box-shadow: 0 6px 20px rgba(0, 0, 0, .6); }
.tape-track { display: flex; width: max-content; animation: tape 40s linear infinite; }
.tape-run { display: flex; flex-shrink: 0; }
.tape-run span { font-family: var(--stencil); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(1rem, 2.6vw, 1.35rem); white-space: nowrap; padding: 0 .9rem; }
.tape-run .tape-x { color: var(--orange); padding: 0; }
@keyframes tape { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tape-track { animation: none; } }

/* ---------- sign-up ---------- */
.join { max-width: 46rem; margin: 0 auto 3rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: rgba(11, 11, 11, .82); border: 2px solid var(--grey-d); }
.join h2 { color: var(--orange); transform: rotate(-1deg); }
.join > p { color: var(--grey-l); margin: 0 0 1.4rem; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { display: block; font-family: var(--stencil); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; margin-bottom: .35rem; }
.field input { width: 100%; font: inherit; font-size: 1.15rem; color: var(--black); background: var(--white); border: 3px solid var(--white); border-radius: 0; padding: .6rem .7rem; }
.field input:focus-visible { border-color: var(--orange); outline: 3px solid var(--orange); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: var(--red); }
.field-error { color: var(--red); font-weight: 600; margin: .4rem 0 0; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.button {
  margin-top: 1.3rem; font-family: var(--stencil); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 1.35rem;
  color: var(--black); background: var(--orange); border: 0; padding: .75rem 2rem; cursor: pointer;
  clip-path: polygon(1% 6%, 99% 0, 100% 90%, 97% 100%, 2% 95%, 0 40%);
}
.button:hover { transform: rotate(-1deg); }
.button:disabled { opacity: .7; cursor: wait; }
.error-summary { border: 3px solid var(--red); padding: .8rem 1rem; margin-bottom: 1.2rem; }
.error-summary h3 { font-size: 1.3rem; color: var(--red); margin-bottom: .4rem; }
.error-summary ul { margin: 0; padding-left: 1.2rem; }
.error-summary a { color: var(--red); font-weight: 600; }
.form-message:empty { display: none; }
.form-message { margin-top: 1.2rem; padding: .8rem 1rem; font-weight: 600; font-size: 1.2rem; }
.form-message.success { border: 3px solid var(--green); color: var(--green); }
.form-message.error { border: 3px solid var(--red); color: var(--red); }

/* ---------- plain pages (privacy) ---------- */
.prose { max-width: 46rem; margin: 2rem auto 3rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: rgba(11, 11, 11, .88); border: 2px solid var(--grey-d); }
.prose h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); color: var(--orange); }
.prose h2 { font-size: 1.6rem; margin-top: 1.6rem; }
.prose .updated { color: var(--grey); }
.home-link { display: inline-block; margin: 1.5rem 1rem 0; font-family: var(--stencil); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- footer ---------- */
.footer { text-align: center; padding: 1.5rem 1rem 2.5rem; color: var(--grey-l); font-size: 1rem; background: rgba(11, 11, 11, .75); }
.footer p { margin: .6rem 0 0; }
.socials { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 1rem; }
.socials a { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; color: var(--white); }
.socials svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.socials a:hover { color: var(--orange); }

/* ---------- phones ---------- */
@media (max-width: 40rem) {
  body { background-attachment: scroll; }
  .fields { grid-template-columns: 1fr; }
  .button { width: 100%; }
}