:root {
  --ink: #080604;
  --velvet: #120b09;
  --rose: #d78282;
  --rose-light: #f2b1a8;
  --amber: #ffac42;
  --cream: #fff2dc;
  --muted: #c8ad96;
  --line: rgba(255, 214, 169, 0.22);
  --content: min(1180px, calc(100vw - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cream);
  background: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background: linear-gradient(110deg, rgba(255,255,255,.025), transparent 30%),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.009) 3px 4px);
  mix-blend-mode: soft-light;
}

a { color: inherit; }
.shell { width: var(--content); margin-inline: auto; }

.site-header {
  position: fixed;
  inset: 18px 0 auto;
  z-index: 30;
  pointer-events: none;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(10, 7, 5, 0.76);
  backdrop-filter: blur(18px);
  pointer-events: auto;
  box-shadow: 0 12px 38px rgba(0,0,0,.32);
}

.brand {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
}
.brand span { color: var(--rose-light); }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-link {
  padding: 9px 14px;
  border-radius: 999px;
  color: #dec8b6;
  text-decoration: none;
  font-weight: 700;
  font-size: .88rem;
}
.nav-link:hover, .nav-link:focus-visible { color: white; background: rgba(255,255,255,.08); outline: none; }

.hero {
  min-height: 100svh;
  display: grid;
  align-items: end;
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(90deg, rgba(4,3,2,.94) 0%, rgba(4,3,2,.72) 36%, rgba(4,3,2,.14) 72%),
    linear-gradient(0deg, var(--ink), transparent 30%),
    url("images/wiftigri-world-desktop-v3.png");
  background-size: cover;
  background-position: center;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 75% 58%, rgba(255, 159, 50, .12), transparent 28%);
}

.hero-content { padding: 150px 0 11vh; max-width: 680px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--rose-light);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; }

h1, h2, h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; line-height: .96; }
h1 { font-size: clamp(4rem, 12vw, 9.5rem); letter-spacing: -.07em; }
h1 small { display: block; margin-top: 20px; color: var(--rose-light); font: 800 clamp(1.15rem, 2vw, 1.5rem)/1 Inter, sans-serif; letter-spacing: .2em; }
.hero-copy { max-width: 560px; margin: 26px 0 34px; color: #e5d3c2; font-size: clamp(1.05rem, 1.8vw, 1.25rem); }

.toy-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.toy-button {
  --toy: var(--rose);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 13px 22px;
  border: 0;
  border-radius: 48% 52% 46% 54% / 55% 44% 56% 45%;
  color: #160b07;
  background: var(--toy);
  box-shadow: inset 0 -5px 0 rgba(78, 28, 23, .24), inset 0 2px 0 rgba(255,255,255,.3), 0 14px 30px rgba(0,0,0,.28);
  text-decoration: none;
  font: 850 .92rem/1 Inter, sans-serif;
  cursor: pointer;
  transform: rotate(-1deg);
  transition: transform .18s ease, filter .18s ease;
}
.toy-button:nth-child(2) { --toy: var(--amber); transform: rotate(1deg); }
.toy-button.dark { --toy: #34211d; color: var(--cream); border: 1px solid rgba(255,255,255,.15); }
.toy-button::before, .toy-button::after {
  content: "";
  position: absolute;
  top: -7px;
  width: 16px;
  height: 16px;
  border-radius: 70% 30% 55% 45%;
  background: inherit;
  z-index: -1;
}
.toy-button::before { left: 20px; transform: rotate(25deg); }
.toy-button::after { left: 39px; transform: rotate(65deg); }
.toy-button:hover, .toy-button:focus-visible { transform: translateY(-4px) rotate(0); filter: brightness(1.08); outline: 3px solid rgba(255,255,255,.25); outline-offset: 3px; }
.toy-icon { width: 22px; height: 22px; flex: 0 0 auto; }

.scroll-cue { position: absolute; right: 28px; bottom: 32px; color: #d6bda7; font-size: .72rem; letter-spacing: .16em; writing-mode: vertical-rl; text-transform: uppercase; }

.story-strip {
  padding: 110px 0;
  background: radial-gradient(circle at 15% 30%, rgba(215,130,130,.14), transparent 28%), var(--ink);
}
.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 8vw, 120px); align-items: start; }
.section-number { color: var(--rose); font-weight: 900; letter-spacing: .15em; }
.story-strip h2, .world h2, .lore-hero h1 { font-size: clamp(3.1rem, 7vw, 7rem); letter-spacing: -.055em; }
.story-text { margin-top: 10px; color: #d7c1ae; font-size: clamp(1.1rem, 2vw, 1.4rem); }
.story-text strong { color: white; }

.rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 72px;
}
.rule {
  min-height: 260px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 42px 24px 38px 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.018));
}
.rule:nth-child(2) { transform: translateY(26px) rotate(.6deg); }
.rule:nth-child(3) { transform: rotate(-.5deg); }
.rule-mark { display: grid; place-items: center; width: 58px; aspect-ratio: 1; border-radius: 50%; background: var(--rose); color: #140a07; font-size: 1.5rem; font-weight: 900; }
.rule h3 { margin-top: 52px; font-size: 1.6rem; }
.rule p { color: var(--muted); }

.world {
  min-height: 100svh;
  display: grid;
  align-items: center;
  position: relative;
  background-image: linear-gradient(90deg, rgba(6,4,3,.82), rgba(6,4,3,.18) 60%, rgba(6,4,3,.5)), linear-gradient(0deg, var(--ink), transparent 18%, transparent 82%, var(--ink)), url("images/wiftigri-yarn-field.png");
  background-size: cover;
  background-position: center;
}
.world-copy { max-width: 580px; padding: 120px 0; }
.world p { color: #edd7c1; font-size: 1.16rem; max-width: 520px; }

.finale { padding: 120px 0 72px; text-align: center; background: radial-gradient(circle at 50% 15%, rgba(255,160,64,.15), transparent 32%); }
.finale .avatar { width: 136px; height: 136px; object-fit: cover; border-radius: 50%; border: 5px solid var(--rose); box-shadow: 0 0 0 10px rgba(215,130,130,.12), 0 24px 50px #000; }
.finale h2 { margin-top: 30px; font-size: clamp(3rem, 7vw, 6.5rem); letter-spacing: -.055em; }
.finale p { color: var(--muted); max-width: 520px; margin: 18px auto 30px; }
.finale .toy-row { justify-content: center; }

footer { padding: 28px 0 34px; color: #92796a; font-size: .84rem; border-top: 1px solid var(--line); }
.footer-row { display: flex; justify-content: space-between; gap: 20px; }

.lore-body { background: #090604; }
.lore-hero {
  min-height: 78svh;
  display: grid;
  align-items: end;
  padding: 150px 0 80px;
  background-image: linear-gradient(90deg, rgba(3,2,2,.95), rgba(3,2,2,.25)), linear-gradient(0deg, #090604, transparent 30%), url("images/wiftigri-world-desktop-v3.png");
  background-size: cover;
  background-position: center;
}
.lore-hero p { max-width: 640px; color: #ddc5b0; font-size: 1.22rem; }
.chapters { padding: 100px 0 140px; }
.chapter { display: grid; grid-template-columns: 100px minmax(0, 760px); gap: 40px; padding: 72px 0; border-top: 1px solid var(--line); }
.chapter-id { color: var(--rose); font: 900 1rem/1 Inter, sans-serif; letter-spacing: .18em; }
.chapter h2 { font-size: clamp(2.4rem, 5vw, 4.7rem); }
.chapter p { color: #d7c0ac; font-size: 1.14rem; }
.lore-cta { margin-top: 42px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 50;
  transform: translate(-50%, 20px);
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #20130f;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  :root { --content: min(100% - 28px, 680px); }
  .site-header { inset: 10px 0 auto; }
  .nav { padding-left: 14px; }
  .nav-link:not(.keep) { display: none; }
  .hero { background-position: 68% center; }
  .hero-content { padding-bottom: 72px; }
  h1 { max-width: 68%; font-size: clamp(3.2rem, 15vw, 5rem); }
  .hero-copy { max-width: 64%; font-size: 1rem; }
  .hero .toy-row { max-width: 68%; }
  .scroll-cue { display: none; }
  .split { grid-template-columns: 1fr; gap: 24px; }
  .rules { grid-template-columns: 1fr; }
  .rule, .rule:nth-child(2), .rule:nth-child(3) { min-height: 220px; transform: none; }
  .rule h3 { margin-top: 34px; }
  .world { background-position: 58% center; }
  .world-copy { padding: 100px 0; max-width: 88%; }
  .footer-row { flex-direction: column; }
  .chapter { grid-template-columns: 1fr; gap: 18px; padding: 52px 0; }
}

@media (max-height: 800px) and (min-width: 761px) {
  .hero-content { padding: 118px 0 34px; }
  h1 { font-size: clamp(4.8rem, 9vw, 7rem); }
  h1 small { margin-top: 12px; }
  .hero-copy { margin: 18px 0 24px; font-size: 1.05rem; }
  .toy-button { min-height: 50px; padding-block: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}