:root {
  --sky-top: #fde9c8;
  --sky-bottom: #f6b48f;
  --ink: #342f42;
  --coral: #ef6f5a;
  --card: #fbf3e3;
  --near: #4e4467;
  --mid: #8b6e8e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Avenir Next", Avenir, "Nunito", system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* paper grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 50;
}

.wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; position: relative; }

header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 0 0;
}

header img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
  transform: rotate(-2deg);
}

header .word { font-weight: 800; font-size: 20px; letter-spacing: 0.02em; }

.hero { text-align: center; padding: 56px 0 12px; }

h1 {
  font-weight: 900;
  font-size: clamp(48px, 9vw, 92px);
  line-height: 0.95;
  letter-spacing: 0.01em;
}

h1 .jump { color: var(--coral); }

.tag {
  margin-top: 18px;
  font-size: clamp(17px, 2.6vw, 22px);
  font-weight: 600;
  opacity: 0.85;
}

.badge {
  display: inline-block;
  margin-top: 30px;
  background: var(--ink);
  color: var(--card);
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
  transform: rotate(-1deg);
  transition: transform 0.15s;
}

.badge:hover { transform: rotate(-1deg) scale(1.04); }

/* overlapping framed phones */
.phones {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 56px 0 30px;
  min-height: 520px;
}

.phone {
  width: 232px;
  border-radius: 36px;
  padding: 10px;
  background: var(--ink);
  box-shadow: 0 18px 40px rgba(52, 47, 66, 0.35);
}

.phone img { width: 100%; border-radius: 28px; display: block; }

.phone.a { transform: rotate(-6deg) translateX(26px); z-index: 1; }
.phone.b { transform: rotate(2deg) translateY(34px); z-index: 2; }
.phone.c { transform: rotate(7deg) translate(-26px, 8px); z-index: 1; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
  padding: 46px 0 70px;
}

.fact {
  background: var(--card);
  padding: 26px 24px;
  border-radius: 6px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.14);
  clip-path: polygon(0.6% 2%, 99.6% 0.4%, 99.2% 98%, 0.2% 99.4%);
}

.fact:nth-child(1) { transform: rotate(-1.2deg); }
.fact:nth-child(2) { transform: rotate(0.8deg); }
.fact:nth-child(3) { transform: rotate(-0.6deg); }

.fact h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.fact p { font-size: 15.5px; line-height: 1.5; opacity: 0.85; }

/* prose pages */
.sheet {
  background: var(--card);
  margin: 48px auto 70px;
  padding: 44px 40px;
  max-width: 720px;
  border-radius: 6px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.15);
  clip-path: polygon(0.4% 1%, 99.7% 0.2%, 99.4% 99%, 0.1% 99.6%);
  transform: rotate(-0.4deg);
}

.sheet h1 { font-size: 34px; margin-bottom: 6px; text-align: left; }
.sheet .updated { font-size: 14px; opacity: 0.6; margin-bottom: 26px; }
.sheet h2 { font-size: 20px; margin: 28px 0 8px; }
.sheet p, .sheet li { font-size: 16px; line-height: 1.65; }
.sheet ul { padding-left: 22px; }
.sheet a { color: var(--coral); font-weight: 600; }

footer {
  text-align: center;
  padding: 30px 0 46px;
  font-size: 15px;
  font-weight: 600;
}

footer a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--coral); margin: 0 10px; }
footer .copy { display: block; margin-top: 14px; opacity: 0.55; font-weight: 500; }
footer .copy a.maker { margin: 0; border-bottom: 2px solid var(--coral); color: var(--ink); text-decoration: none; }

@media (max-width: 640px) {
  .phones { flex-direction: row; min-height: 420px; }
  .phone { width: 150px; border-radius: 26px; }
  .phone img { border-radius: 20px; }
}