:root {
  --ink: #2e261f;
  --ink-soft: #68574d;
  --cream: #fff7ef;
  --cream-deep: #f6e9dc;
  --pink: #eca08f;
  --pink-2: #f6c1b4;
  --pink-deep: #cf786a;
  --brown: #9b6c50;
  --line: rgba(62, 47, 38, .16);
  --shadow: 0 28px 70px rgba(87, 60, 47, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 8%, rgba(255,255,255,.85), transparent 25%),
    radial-gradient(circle at 85% 19%, rgba(247,191,177,.38), transparent 25%),
    linear-gradient(180deg, #f5e8dc 0%, #fff8f0 32%, #f4e3d4 100%);
  font-family: ui-rounded, "Trebuchet MS", Arial, sans-serif;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    repeating-linear-gradient(0deg, rgba(131,82,63,.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 6px);
}
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .19;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%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)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.cursor-thread {
  position: fixed;
  width: 16px;
  height: 16px;
  border: 2px solid var(--pink-deep);
  border-radius: 50%;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 80;
  transition: width .2s ease, height .2s ease, background .2s ease;
  box-shadow: 0 0 0 4px rgba(239, 165, 149, .15);
}
body.cursor-hot .cursor-thread { width: 32px; height: 32px; background: rgba(239,165,149,.17); }

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.topbar {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1440px, calc(100% - 72px));
  height: 68px;
  border: 1px solid rgba(72,53,43,.12);
  background: rgba(255,248,241,.76);
  backdrop-filter: blur(18px);
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 18px 0 20px;
  z-index: 40;
  box-shadow: 0 12px 44px rgba(74,54,43,.10);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; width: max-content; }
.brand-mark {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 12px; background: var(--ink); color: white;
  font-size: 22px; transform: rotate(-7deg);
}
.brand-name { font-size: 17px; letter-spacing: -.03em; }
.nav { display: flex; gap: 30px; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
.nav a { position: relative; padding: 9px 2px; }
.nav a::after { content:""; position:absolute; left:0; right:100%; bottom:2px; height:2px; background:var(--pink-deep); transition:.25s ease; }
.nav a:hover::after { right:0; }
.top-actions { justify-self: end; display: flex; gap: 9px; }

.section { min-height: 92vh; position: relative; }
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  align-items: center;
  gap: 80px;
  padding: 132px max(8vw, 92px) 70px;
  isolation: isolate;
}
.hero::after {
  content:"";
  position:absolute;
  inset: 0;
  z-index:-3;
  background: radial-gradient(circle at 80% 48%, rgba(238,157,141,.28), transparent 28%);
}
.hero-copy { max-width: 800px; }
.eyebrow, .section-kicker {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; text-transform:uppercase; letter-spacing:.18em; font-weight:900; color: var(--ink-soft);
}
.dot { width:8px; height:8px; border-radius:50%; background:var(--pink-deep); box-shadow:0 0 0 6px rgba(215,128,112,.12); }
.hero-title { margin:18px 0 22px; line-height:.84; letter-spacing:-.075em; font-size: clamp(84px, 7vw, 154px); font-weight: 900; }
.hero-title span { display:block; }
.hero-title em {
  display:block; margin-top:20px; font-size:.37em; font-style:normal; letter-spacing:.02em; color: var(--pink-deep);
  text-shadow: 0 3px 0 rgba(255,255,255,.8);
}
.hero-line { max-width: 690px; font-size: 23px; line-height:1.35; color: var(--ink-soft); margin:0 0 30px; }
.ca-card {
  width:min(720px,100%); border:1px solid var(--line); background:rgba(255,255,255,.58); border-radius:24px;
  padding:15px 16px 16px; box-shadow: 0 15px 40px rgba(102,72,56,.08); position:relative; overflow:hidden;
}
.ca-card::before { content:""; position:absolute; width:130px; height:130px; right:-35px; top:-66px; border:18px solid rgba(237,158,142,.22); border-radius:50%; }
.ca-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:900; color:var(--ink-soft); margin-bottom:8px; }
.ca-row { display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; }
code { font-family: "Courier New", monospace; font-size: 14px; word-break: break-all; }
.copy-btn {
  border:0; cursor:pointer; border-radius:14px; padding:14px 18px; color:white; background:var(--ink); font:800 12px/1 ui-rounded, "Trebuchet MS", Arial; letter-spacing:.09em;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.copy-btn:hover { transform:translateY(-2px) rotate(-1deg); box-shadow:0 8px 18px rgba(54,42,35,.18); background:#17120f; }
.copy-btn:active { transform:translateY(1px) scale(.98); }
.hero-actions { display:flex; gap:12px; margin-top:16px; }
.soft-btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid rgba(62,46,37,.16); background:rgba(255,255,255,.52); border-radius:16px; padding:15px 20px;
  font-size:12px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; box-shadow:0 8px 26px rgba(89,62,48,.08);
  transition:transform .24s ease, box-shadow .24s ease, background .24s ease;
}
.soft-btn::after { content:"↗"; font-size:14px; }
.soft-btn:hover { transform:translateY(-4px) rotate(-.7deg); box-shadow:0 16px 30px rgba(89,62,48,.14); }
.soft-btn:active { transform:translateY(-1px) scale(.985); }
.soft-btn.filled { background:var(--pink); border-color:transparent; color:#3d2f29; }
.soft-btn.small { padding:11px 14px; border-radius:13px; font-size:10px; }
.soft-btn.large { padding:20px 26px; border-radius:19px; }

.hero-visual { position:relative; min-height:700px; display:grid; place-items:center; perspective:1000px; }
.photo-card {
  width:min(660px, 42vw); aspect-ratio:1/1; border-radius: 44% 56% 50% 50% / 48% 45% 55% 52%; overflow:hidden; position:relative;
  background:#d7c4b8; box-shadow: 0 40px 90px rgba(97,69,54,.26), 0 0 0 16px rgba(255,255,255,.55), 0 0 0 18px rgba(128,86,66,.08);
  animation: floaty 5.8s ease-in-out infinite; transform-style:preserve-3d; transition: transform .2s ease-out;
}
.photo-card img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.015); }
.photo-shine { position:absolute; inset:-10%; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.32) 48%,transparent 66%); transform:translateX(-120%); animation:shine 7s ease-in-out infinite 1.2s; }
.stitch-ring { position:absolute; width: 720px; height:720px; border-radius:50%; border:3px dashed rgba(205,120,104,.42); animation:spin 34s linear infinite; }
.stitch-ring::after { content:""; position:absolute; inset:28px; border:1px solid rgba(91,65,52,.12); border-radius:50%; }
.tiny-note { position:absolute; background:var(--cream); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:16px; padding:12px 16px; font-size:12px; text-transform:uppercase; letter-spacing:.11em; font-weight:900; }
.note-a { left:1%; top:22%; transform:rotate(-8deg); }
.note-b { right:-1%; bottom:18%; transform:rotate(7deg); }
.hero-yarn { position:absolute; border:18px solid rgba(238,159,143,.24); border-radius:50%; z-index:-1; }
.yarn-a { width:280px; height:280px; left:-130px; top:33%; border-style:dashed; animation:spin 28s linear infinite reverse; }
.yarn-b { width:200px; height:200px; right:-70px; bottom:7%; border-width:13px; border-style:dotted; animation:spin 24s linear infinite; }
.scroll-cue { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }

.story { display:grid; grid-template-columns:.9fr 1.1fr; gap:120px; align-items:center; padding:120px max(10vw,110px); }
.story-visual { position:relative; display:grid; place-items:center; }
.crop-window { width:560px; height:640px; border-radius:80px 28px 72px 28px; overflow:hidden; box-shadow:var(--shadow); border:14px solid rgba(255,255,255,.66); transform:rotate(-2.5deg); }
.crop-window img { width:100%; height:100%; object-fit:cover; transform:scale(1.28) translateY(2%); }
.tag { position:absolute; padding:15px 18px; background:var(--ink); color:white; border-radius:14px; font-size:13px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; box-shadow:var(--shadow); }
.tag-one { left:3%; top:17%; transform:rotate(-10deg); }
.tag-two { right:0; bottom:17%; background:var(--pink-deep); transform:rotate(8deg); }
.story-copy { max-width:760px; }
.story-copy h2, .rules-heading h2, .peek-copy h2, .club-panel h2, .final-copy h2 { margin:15px 0 22px; font-size:clamp(54px,4.8vw,92px); line-height:.95; letter-spacing:-.055em; }
.story-copy p { font-size:21px; line-height:1.55; color:var(--ink-soft); max-width:700px; }
.soft-quote { font-weight:900; color:var(--ink)!important; font-size:25px!important; max-width:560px!important; border-left:5px solid var(--pink); padding-left:20px; }

.rules { padding:120px max(8vw,90px); display:flex; flex-direction:column; justify-content:center; }
.rules-heading { max-width:940px; margin-bottom:50px; }
.rules-heading p { max-width:650px; font-size:18px; color:var(--ink-soft); }
.rules-board { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; perspective:1000px; }
.rule-card { min-height:330px; padding:28px; border-radius:30px; background:rgba(255,250,245,.72); border:1px solid rgba(82,59,47,.13); box-shadow:0 20px 50px rgba(84,59,47,.08); display:flex; flex-direction:column; justify-content:flex-end; transition:transform .18s ease-out, box-shadow .25s ease; transform-style:preserve-3d; }
.rule-card:nth-child(2n) { background:rgba(239,162,146,.22); }
.rule-card:hover { box-shadow:0 28px 60px rgba(84,59,47,.16); }
.rule-card span { position:absolute; top:25px; left:28px; font-size:12px; letter-spacing:.14em; font-weight:900; opacity:.5; }
.rule-card h3 { font-size:29px; margin:0 0 12px; letter-spacing:-.03em; }
.rule-card p { margin:0; color:var(--ink-soft); line-height:1.5; font-size:16px; }

.peek { padding:100px max(10vw,100px); display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:100px; overflow:hidden; }
.peek-copy { max-width:650px; }
.peek-copy p { font-size:19px; color:var(--ink-soft); line-height:1.55; }
.peek-stage { position:relative; min-height:700px; display:grid; place-items:center; }
.peek-frame { width:620px; aspect-ratio:1; overflow:hidden; border-radius:50%; border:14px solid rgba(255,255,255,.72); box-shadow:var(--shadow); position:relative; z-index:2; }
.peek-frame img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.peek-stage.booped .peek-frame img { transform:scale(1.04) rotate(.8deg); }
.yarn-orbit { position:absolute; border-radius:50%; border: 11px solid rgba(235,151,134,.28); }
.orbit-one { width:760px; height:760px; border-style:dashed; animation:spin 30s linear infinite; }
.orbit-two { width:840px; height:500px; border-width:7px; transform:rotate(28deg); border-color:rgba(158,111,83,.16); }
.boop { position:absolute; right:8%; bottom:12%; z-index:5; border:0; background:var(--ink); color:white; width:110px; height:110px; border-radius:50%; cursor:pointer; font:900 13px/1 ui-rounded, "Trebuchet MS", Arial; letter-spacing:.1em; box-shadow:var(--shadow); transition:.25s ease; }
.boop:hover { transform:scale(1.07) rotate(-5deg); background:var(--pink-deep); }
.boop-msg { position:absolute; right:5%; bottom:4%; opacity:0; transform:translateY(8px); transition:.25s ease; font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.peek-stage.booped .boop-msg { opacity:1; transform:translateY(0); }

.club { padding:120px max(8vw,90px); display:grid; place-items:center; }
.club-panel { width:min(1440px,100%); min-height:520px; border-radius:56px; background:var(--ink); color:var(--cream); padding:74px 80px; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:70px; box-shadow:0 32px 80px rgba(54,39,33,.24); position:relative; overflow:hidden; }
.club-panel::before, .club-panel::after { content:""; position:absolute; border-radius:50%; border:18px solid rgba(240,164,149,.28); }
.club-panel::before { width:380px; height:380px; right:-90px; top:-110px; border-style:dashed; animation:spin 32s linear infinite; }
.club-panel::after { width:180px; height:180px; left:42%; bottom:-110px; }
.club-panel .section-kicker { color:#f4c2b6; }
.club-panel h2 { max-width:760px; }
.club-panel p { max-width:650px; color:rgba(255,247,239,.68); font-size:18px; line-height:1.55; }
.club-actions { justify-self:end; display:flex; flex-direction:column; width:min(330px,100%); gap:14px; }
.club-actions .soft-btn { background:rgba(255,255,255,.08); color:white; border-color:rgba(255,255,255,.18); }
.club-actions .soft-btn.filled { background:var(--pink); color:var(--ink); }

.final { min-height:78vh; padding:120px max(11vw,120px); display:grid; grid-template-columns:.62fr 1.38fr; align-items:center; gap:70px; }
.final-mark { width:320px; height:320px; border-radius:42% 58% 55% 45%; display:grid; place-items:center; background:var(--pink); font-size:210px; line-height:1; font-weight:1000; letter-spacing:-.12em; transform:rotate(-7deg); box-shadow:var(--shadow); }
.final-copy em { font-style:normal; color:var(--pink-deep); font-size:.44em; display:inline-block; letter-spacing:-.02em; margin-left:18px; }
.final-copy p { color:var(--ink-soft); font-size:20px; }
.final-ca { margin-top:26px; max-width:780px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:14px 14px 14px 18px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.52); }
footer { min-height:120px; display:flex; align-items:center; justify-content:center; gap:18px; border-top:1px solid var(--line); text-transform:uppercase; font-size:11px; letter-spacing:.16em; color:var(--ink-soft); }
.footer-paw { color:var(--pink-deep); }

.toast { position:fixed; left:50%; bottom:34px; transform:translate(-50%,20px); z-index:90; background:var(--ink); color:white; border-radius:14px; padding:13px 18px; font-size:11px; font-weight:900; letter-spacing:.12em; opacity:0; pointer-events:none; transition:.25s ease; box-shadow:var(--shadow); }
.toast.show { opacity:1; transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s ease, transform .75s cubic-bezier(.22,.75,.21,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

@keyframes floaty { 0%,100%{ transform:translateY(0) rotate(-.6deg);} 50%{ transform:translateY(-14px) rotate(.6deg);} }
@keyframes shine { 0%,35%{ transform:translateX(-120%);} 55%,100%{ transform:translateX(120%);} }
@keyframes spin { to{ transform:rotate(360deg);} }

@media (max-width: 1400px) {
  .topbar { width:calc(100% - 42px); }
  .hero { padding-left:70px; padding-right:70px; gap:44px; }
  .photo-card { width:min(610px,43vw); }
  .stitch-ring { width:640px; height:640px; }
  .story { gap:72px; padding-inline:76px; }
  .crop-window { width:500px; height:580px; }
  .peek { gap:54px; padding-inline:80px; }
  .peek-frame { width:560px; }
  .orbit-one { width:680px; height:680px; }
}