/* ==========================================================================
   EasyHistory — coming soon
   ========================================================================== */

:root {
  --ink: #16130e;
  --paper: #ffffff;
  --panel: #eeece7;

  /* Brand gradient — page background and logo */
  --grad-1: #e8453c;
  --grad-2: #e73c7e;
  --grad-3: #23a6d5;
  --grad-4: #23d5ab;

  /* Muted channel colors */
  --youtube: #d4655c;
  --tiktok: #5fc3a8;
  --instagram: #d1608c;
  --facebook: #5f9fc0;
  --x: #7a6f96;
  --contact: #d8ab63;

  --accent: #d1608c;
  --muted: #3e372c;
  --muted-soft: #6b6252;
  --placeholder: #8c8375;
  --success: #2f7a52;
  --error: #b0413a;
  --focus: #23a6d5;

  --font-display: "Archivo Black", Archivo, system-ui, sans-serif;
  --font-body: Archivo, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: "Rock Salt", "Comic Sans MS", cursive;

  --radius: 12px;
  --border: 4px;
}

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--grad-2);
  font-family: var(--font-body);
  color: var(--ink);
}

h1, h2, p { margin: 0; }

img, svg { display: block; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Stage ---------------------------------------------------------------- */

.stage {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px) clamp(12px, 3vw, 20px);
  background-image: linear-gradient(-45deg, var(--grad-1), var(--grad-2), var(--grad-3), var(--grad-4));
  background-size: 400% 400%;
  animation: gradient-shift 18s ease infinite;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Card ----------------------------------------------------------------- */

.card {
  width: 100%;
  max-width: 812px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.6vw, 26px);
  padding: clamp(22px, 4vw, 40px) clamp(16px, 3vw, 32px) clamp(14px, 2vw, 20px);
  background: var(--paper);
  border: 5px solid var(--ink);
  border-radius: clamp(20px, 3vw, 28px);
  box-shadow: 10px 10px 0 var(--ink);
}

/* --- Brand ---------------------------------------------------------------- */

.brand {
  width: 100%;
  max-width: 740px;
  text-align: center;
}

.brand__name {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(30px, 7vw, 58px);
  line-height: 1.7;
  padding: 10px 10px 14px;
  background-image: linear-gradient(-45deg, var(--grad-1), var(--grad-2), var(--grad-3), var(--grad-4));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.brand__tagline {
  margin-top: -20px;
  font-weight: 600;
  font-size: clamp(14px, 3.4vw, 17px);
  letter-spacing: 0.01em;
  color: var(--muted);
}

@media (max-width: 560px) {
  .brand__tagline {
    margin-top:-10px;
    margin-bottom:10px;
  }
}

/* --- Email signup --------------------------------------------------------- */

.signup {
  position: relative;
  width: 100%;
  max-width: 740px;
  padding: 18px clamp(12px, 3vw, 18px) 12px;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  text-align: center;
}

.signup__badge {
  position: absolute;
  top: -14px;
  right: -10px;
  padding: 7px 13px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 3px solid var(--ink);
  border-radius: 999px;
  transform: rotate(2deg);
}

.signup__heading {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  color: var(--ink);
}

.signup__form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.signup__input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 10px;
}

.signup__input::placeholder { color: var(--placeholder); }

.signup__input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.signup__button {
  flex: 0 1 auto;
  min-width: 170px;
  padding: 10px 34px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--paper);
  background: var(--accent);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.signup__button:hover,
.signup__button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.signup__button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.signup__button[disabled] {
  cursor: progress;
  opacity: .7;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.signup__status {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--success);
}

/* No message yet — take up no space at all. */
.signup__status:empty { display: none; }

.signup__status--error { color: var(--error); }

/* Stack the field and button on narrow screens. */
@media (max-width: 560px) {
  .signup__input,
  .signup__button {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
}

/* --- Channel links -------------------------------------------------------- */

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 740px;
}

.link {
  flex: 1 1 calc(50% - 7px);
  min-width: min(280px, 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px clamp(10px, 2.4vw, 14px);
  color: var(--ink);
  text-decoration: none;
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}

.link:hover,
.link:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.link:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.link__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 10px;
}

.link__label {
  font-family: var(--font-display);
  font-size: clamp(13px, 3.2vw, 14px);
  line-height: 1.2;
}

.link--youtube   { background: var(--youtube); }
.link--tiktok    { background: var(--tiktok); }
.link--instagram { background: var(--instagram); }
.link--facebook  { background: var(--facebook); }
.link--x         { background: var(--x); color: var(--paper); }
.link--email     { background: var(--contact); }

.link--youtube   .link__icon { color: var(--youtube); }
.link--tiktok    .link__icon { color: var(--tiktok); }
.link--instagram .link__icon { color: var(--instagram); }
.link--facebook  .link__icon { color: var(--facebook); }
.link--x         .link__icon { color: var(--x); }
.link--email     .link__icon { color: var(--contact); }

/* --- Footer --------------------------------------------------------------- */

.footer {
  margin-top: -8px;
  font-size: 13px;
  color: var(--muted-soft);
  text-align: center;
}

@media (max-width: 560px) {
  .footer {
    margin-top:0;
  }
}

/* --- Motion preferences --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .stage {
    animation: none;
    background-size: 100% 100%;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}