/* byLEAN landing page. The colors are measured from the patch logo (brand/Logo/LeanPatch-01.png). */
:root {
  --black: #000000;
  --cream: #dac4a7;
  --cream-bright: #f1e4cc;
  --red: #910e0d;
  --red-bright: #c41a17;
  --yellow: #dca726;
  --blue: #0e3476;
  --green: #247336;
}

* { box-sizing: border-box; }

html { background: var(--black); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  color: var(--cream);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* a strip of patches with a line of stitching through it */
.stitch-band {
  height: 22px;
  background:
    linear-gradient(90deg,
      var(--blue) 0 17%, var(--red) 17% 31%, var(--yellow) 31% 52%, var(--black) 52% 58%,
      var(--red) 58% 74%, var(--blue) 74% 88%, var(--yellow) 88% 100%);
  position: relative;
}
.stitch-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed var(--cream-bright);
  opacity: 0.85;
  transform: translateY(-1px);
}
.stitch-band--thin { height: 12px; margin-bottom: 18px; }

.stage {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 20px 24px;
}

.logo { display: block; width: min(86vw, 540px, 56vh); width: min(86vw, 540px, 56svh); }
.logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 28px rgba(220, 167, 38, 0.18));
  animation: sway 7s ease-in-out infinite;
}

.wordmark {
  margin: 8px 0 0;
  font-family: "Arial Black", Impact, "Haettenschweiler", "Arial Narrow Bold", system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 11vw, 4.4rem);
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--cream-bright);
  -webkit-text-stroke: 2px var(--black);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--red), 7px 7px 0 var(--blue);
}

.lede {
  margin: 18px 0 30px;
  max-width: 30ch;
  font-size: clamp(1.1rem, 4.2vw, 1.35rem);
  color: var(--cream);
}

/* the button is a small patch: yellow cloth, black stitching */
.shop-button {
  position: relative;
  display: inline-block;
  min-width: 15rem;
  padding: 18px 40px;
  background: var(--yellow);
  color: var(--black);
  font-family: "Arial Black", Impact, system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 5px 5px 0 var(--red), 5px 5px 0 2px var(--black);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.shop-button::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px dashed var(--black);
  border-radius: 3px;
  pointer-events: none;
}
.shop-button:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--red), 8px 8px 0 2px var(--black); }
.shop-button:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--red), 2px 2px 0 2px var(--black); }
.shop-button:focus-visible { outline: 3px solid var(--cream-bright); outline-offset: 5px; }

.foot {
  flex: 0 0 auto;
  text-align: center;
  padding-bottom: 20px;
  color: var(--cream);
  font-size: 0.95rem;
}
.foot p { margin: 0 20px; }
.foot .small { font-size: 0.9rem; opacity: 0.85; }

@keyframes sway {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-8px) rotate(0.6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .logo img { animation: none; }
  .shop-button { transition: none; }
}

@media (min-width: 700px) {
  .stitch-band { height: 28px; }
  .stage { padding-top: 40px; }
}