/* ── min min · v2 "sewn together" ───────────────────────── */

:root{
  --paper:      #DAE8E2;
  --paper-deep: #CFE0DA;
  --cream:      #F6F1E6;
  --ink:        #2A2126;
  --pink:       #F2B6DE;
  --pink-soft:  #F8D8EC;
  --plum:       #8E1D66;
  --magenta:    #D63FA5;
  --teal:       #3EC8C0;
  --chartreuse: #B5C327;

  --accent:     #D63FA5;
  --accent-ink: #8E1D66;
  --patch:      #F3E9EE;   /* fabric tint of the current colorway patch */

  --disp: "Shrikhand", serif;
  --body: "Quicksand", sans-serif;
  --hand: "Gochi Hand", cursive;
  --ar:   "Rakkas", serif;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.5, 1);
  --shadow-card: 0 1px 2px rgba(42,33,38,.10), 0 7px 20px rgba(42,33,38,.13);
  --shadow-lift: 0 2px 4px rgba(42,33,38,.08), 0 16px 38px rgba(42,33,38,.18);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--body); font-weight:500; color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }

.grain{
  position:fixed; inset:0; z-index:70; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.72 0 0 0 0 0.78 0 0 0 0 0.75 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ the page seam ═══ */
.seam{
  position:absolute; top:0; left:0; width:100%; z-index:1;
  pointer-events:none;
}
.seam path{
  stroke:var(--plum); stroke-width:3.5; fill:none;
  stroke-dasharray:16 12; stroke-linecap:round; opacity:.55;
}

/* ═══ needle cursor & stitch trail ═══ */
.trail{ position:fixed; inset:0; z-index:64; pointer-events:none; }
.needle{
  position:fixed; z-index:65; width:40px; height:40px;
  pointer-events:none; translate:-4px -36px;
  transition:opacity .3s var(--ease); opacity:0;
}
.needle svg{ stroke:var(--plum); }
body.has-needle{ cursor:none; }
body.has-needle a, body.has-needle button{ cursor:none; }
body.has-needle .needle{ opacity:1; }
@media (hover:none), (pointer:coarse){ .needle, .trail{ display:none; } }

/* press feedback */
.press{ transition-property:transform, box-shadow, background-color, color; transition-duration:.25s; transition-timing-function:var(--ease); }
.press:active{ transform:scale(.96); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .65s var(--ease) var(--d,0s), transform .65s var(--ease) var(--d,0s);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}
.flat .reveal{ opacity:1; transform:none; }
.flat{ scroll-behavior:auto; }
.flat .hero{ min-height:980px; }
.flat .ending{ min-height:640px; }

/* ═══ nav ═══ */
.nav{
  position:fixed; top:14px; left:50%; translate:-50% 0; z-index:60;
  display:flex; align-items:center; gap:20px;
  background:rgba(246,241,230,.85); backdrop-filter:blur(8px);
  border-radius:999px; padding:8px 10px 8px 20px;
  box-shadow:var(--shadow-card);
}
.nav-logo{ font-family:var(--disp); font-size:1.05rem; color:var(--plum); text-decoration:none; }
.nav-links{ display:flex; gap:16px; }
.nav-links a{
  color:var(--ink); text-decoration:none; font-weight:700; font-size:.9rem;
  padding:8px 2px; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:4px; height:3px;
  border-radius:2px; background:var(--pink); transition:right .3s var(--ease);
}
.nav-links a:hover::after{ right:0; }
.nav{ padding:8px 22px; }

/* ═══ hero ═══ */
.hero{
  min-height:100svh; position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:120px 5vw 40px; text-align:center;
}
.hero-sparkles{ position:absolute; inset:0; pointer-events:none; }

.wordmark{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(4.6rem, 12vw, 9rem); line-height:.86;
  color:var(--pink); text-shadow:0.045em 0.05em 0 var(--plum);
  user-select:none;
}
.wm-row{ display:block; }
.wm-row i{
  display:inline-block; font-style:normal;
  opacity:0; transform:translateY(-1.1em) rotate(-12deg);
  animation:drop .7s var(--spring) forwards, bob 5.5s ease-in-out 1.6s infinite;
}
.wm-row:nth-child(1) i:nth-child(1){ rotate:-4deg; animation-delay:.05s, 1.6s; }
.wm-row:nth-child(1) i:nth-child(2){ rotate:2deg;  animation-delay:.14s, 1.95s; }
.wm-row:nth-child(1) i:nth-child(3){ rotate:-2deg; animation-delay:.23s, 2.3s; }
.wm-row:nth-child(2) i:nth-child(1){ rotate:3deg;  animation-delay:.32s, 2.65s; }
.wm-row:nth-child(2) i:nth-child(2){ rotate:-3deg; animation-delay:.41s, 3.0s; }
.wm-row:nth-child(2) i:nth-child(3){ rotate:4deg;  animation-delay:.5s, 3.35s; }
@keyframes drop{ to{ opacity:1; transform:translateY(0) rotate(0deg); } }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-0.05em); } }
.flat .wm-row i{ opacity:1; transform:none; animation:none; }

.hero-ar{
  font-family:var(--ar); font-size:1.5rem; color:var(--plum);
  margin-top:28px; direction:rtl;
  opacity:0; animation:fadeup .8s var(--ease) .7s forwards;
}
.hero-tag{ margin-top:8px; font-size:1.08rem; font-weight:600; line-height:1.55; max-width:520px; }
.hero-tag .w{ opacity:0; display:inline-block; transform:translateY(8px); animation:fadeup .5s var(--ease) forwards; }
.hero-tag .w:nth-child(1){ animation-delay:.9s; }
.hero-tag .w:nth-child(2){ animation-delay:1.0s; }
.hero-tag .w:nth-child(3){ animation-delay:1.1s; }
.hero-tag .w:nth-child(4){ animation-delay:1.18s; }
.hero-tag .w:nth-child(5){ animation-delay:1.26s; }
.hero-tag .w:nth-child(6){ animation-delay:1.34s; }
.hero-tag .w:nth-child(7){ animation-delay:1.45s; }
.hero-tag .em{ color:var(--magenta); font-weight:700; }
@keyframes fadeup{ to{ opacity:1; transform:translateY(0); } }
.flat .hero-ar, .flat .hero-tag .w{ opacity:1; transform:none; animation:none; }

.sewline{ width:min(340px, 70vw); margin-top:2px; overflow:visible; }
.sewline path{
  stroke:var(--magenta); stroke-width:3.5; stroke-linecap:round;
  stroke-dasharray:12 9;
}
.sewpath{
  stroke-dashoffset:600; opacity:0;
  animation:sew 1.4s var(--ease) 1.7s forwards;
}
@keyframes sew{ 0%{ opacity:1; stroke-dashoffset:600; } 100%{ opacity:1; stroke-dashoffset:0; } }
.flat .sewpath{ opacity:1; stroke-dashoffset:0; animation:none; }

/* fanned hand of photos */
.fan{
  position:relative; margin-top:54px; height:min(330px, 40vw); width:min(760px, 92vw);
}
.fan-ph{
  position:absolute; left:50%; bottom:0;
  width:min(220px, 30vw); aspect-ratio:1; object-fit:cover;
  border-radius:8px; border:6px solid var(--cream);
  outline:1px solid rgba(0,0,0,.1); outline-offset:-1px;
  box-shadow:var(--shadow-card);
  transform-origin:50% 130%;
  transform:translateX(-50%) rotate(var(--fr, 0deg));
  transition:transform .55s var(--spring), box-shadow .3s var(--ease);
}
.f1{ --fr:-6deg; } .f2{ --fr:-3deg; } .f3{ --fr:0deg; } .f4{ --fr:3deg; } .f5{ --fr:6deg; }
.fan.open .f1{ --fr:-30deg; }
.fan.open .f2{ --fr:-15deg; }
.fan.open .f4{ --fr:15deg; }
.fan.open .f5{ --fr:30deg; }
.fan-ph{ cursor:pointer; }
.fan-ph.front{ z-index:3; box-shadow:var(--shadow-lift); transform:translateX(-50%) rotate(calc(var(--fr) * .3)) translateY(-22px) scale(1.07); }
.fan-ph:hover{ z-index:4; box-shadow:var(--shadow-lift); transform:translateX(-50%) rotate(var(--fr)) translateY(-14px) scale(1.04); }
.fan-hint{ font-family:var(--hand); margin-top:14px; color:var(--plum); opacity:.7; }

/* sparkles */
.sp{ position:absolute; fill:var(--teal); opacity:.85; animation:twinkle 4.5s ease-in-out infinite; }
.sp1{ width:22px; top:16%; left:13%; fill:var(--magenta); animation-delay:.2s; }
.sp2{ width:14px; top:24%; right:15%; animation-delay:1.1s; }
.sp3{ width:26px; bottom:30%; left:8%; animation-delay:2s; }
.sp4{ width:12px; top:54%; right:7%; fill:var(--plum); animation-delay:2.8s; }
.sp5{ width:16px; bottom:20%; right:24%; fill:var(--magenta); animation-delay:1.6s; }
@keyframes twinkle{
  0%,100%{ transform:scale(1) rotate(0deg); opacity:.85; }
  50%{ transform:scale(.5) rotate(20deg); opacity:.3; }
}

/* ═══ wavy stitched ribbon ═══ */
.ribbon-wrap{
  position:relative; z-index:3; margin:-30px 0 -8px; overflow:hidden;
}
.ribbon{ display:block; width:100%; height:130px; overflow:visible; }
.ribbon-band{
  stroke:var(--plum); stroke-width:46; stroke-linecap:round;
  filter:drop-shadow(0 6px 12px rgba(42,33,38,.18));
}
.ribbon-text{
  fill:var(--pink-soft); font-family:var(--body); font-weight:700;
  font-size:15px; letter-spacing:.09em;
}

/* ═══ shared heads ═══ */
.spread-head{ text-align:center; margin-bottom:44px; position:relative; z-index:2; }
.kicker{ font-family:var(--hand); font-size:1.15rem; color:var(--accent-ink); transition:color .5s var(--ease); }
.spread-head h2{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(2.4rem, 5.4vw, 3.8rem);
  color:var(--accent); text-shadow:0.04em 0.045em 0 var(--accent-ink);
  margin-top:4px;
  transition:color .5s var(--ease), text-shadow .5s var(--ease);
}
.spread-sub{ margin-top:16px; font-weight:600; line-height:1.65; opacity:.85; }

/* ═══ fabric patch section (pinking-shear edges) ═══ */
.patch{ position:relative; z-index:2; padding:40px 0 90px; }
.patch-inner{
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.5) 0 2px, transparent 3px) 0 0/26px 26px,
    var(--patch);
  transition:background-color .6s var(--ease);
  padding:74px 6vw 84px;
  clip-path:polygon(
    0% 24px, 2% 6px, 4% 24px, 6% 6px, 8% 24px, 10% 6px, 12% 24px, 14% 6px, 16% 24px, 18% 6px,
    20% 24px, 22% 6px, 24% 24px, 26% 6px, 28% 24px, 30% 6px, 32% 24px, 34% 6px, 36% 24px, 38% 6px,
    40% 24px, 42% 6px, 44% 24px, 46% 6px, 48% 24px, 50% 6px, 52% 24px, 54% 6px, 56% 24px, 58% 6px,
    60% 24px, 62% 6px, 64% 24px, 66% 6px, 68% 24px, 70% 6px, 72% 24px, 74% 6px, 76% 24px, 78% 6px,
    80% 24px, 82% 6px, 84% 24px, 86% 6px, 88% 24px, 90% 6px, 92% 24px, 94% 6px, 96% 24px, 98% 6px, 100% 24px,
    100% calc(100% - 24px), 98% calc(100% - 6px), 96% calc(100% - 24px), 94% calc(100% - 6px), 92% calc(100% - 24px),
    90% calc(100% - 6px), 88% calc(100% - 24px), 86% calc(100% - 6px), 84% calc(100% - 24px), 82% calc(100% - 6px),
    80% calc(100% - 24px), 78% calc(100% - 6px), 76% calc(100% - 24px), 74% calc(100% - 6px), 72% calc(100% - 24px),
    70% calc(100% - 6px), 68% calc(100% - 24px), 66% calc(100% - 6px), 64% calc(100% - 24px), 62% calc(100% - 6px),
    60% calc(100% - 24px), 58% calc(100% - 6px), 56% calc(100% - 24px), 54% calc(100% - 6px), 52% calc(100% - 24px),
    50% calc(100% - 6px), 48% calc(100% - 24px), 46% calc(100% - 6px), 44% calc(100% - 24px), 42% calc(100% - 6px),
    40% calc(100% - 24px), 38% calc(100% - 6px), 36% calc(100% - 24px), 34% calc(100% - 6px), 32% calc(100% - 24px),
    30% calc(100% - 6px), 28% calc(100% - 24px), 26% calc(100% - 6px), 24% calc(100% - 24px), 22% calc(100% - 6px),
    20% calc(100% - 24px), 18% calc(100% - 6px), 16% calc(100% - 24px), 14% calc(100% - 6px), 12% calc(100% - 24px),
    10% calc(100% - 6px), 8% calc(100% - 24px), 6% calc(100% - 6px), 4% calc(100% - 24px), 2% calc(100% - 6px), 0% calc(100% - 24px)
  );
  filter:drop-shadow(0 10px 24px rgba(42,33,38,.14));
}

/* ═══ fabric palette blobs ═══ */
.palette{ display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin-bottom:52px; }
.blob{
  background:none; border:none; cursor:pointer; text-align:center;
  font-family:var(--hand); font-size:1.05rem; color:var(--ink);
  display:grid; justify-items:center; gap:6px;
}
.blob svg{
  width:64px; height:64px; overflow:visible;
  transition:transform .4s var(--spring);
}
.blob-shape{ stroke:transparent; stroke-width:4; transition:stroke .3s var(--ease); }
.blob:hover svg{ transform:rotate(-8deg) scale(1.12); }
.blob.active svg{ transform:scale(1.16); }
.blob.active .blob-shape{
  stroke:var(--accent-ink);
  stroke-dasharray:8 7; stroke-linecap:round;
  animation:spinstroke 14s linear infinite;
}
@keyframes spinstroke{ to{ stroke-dashoffset:-300; } }
.blob.active span{ color:var(--accent-ink); font-weight:700; }

/* ═══ hat stage ═══ */
.hat-stage{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:6vw; max-width:1080px; margin:0 auto; align-items:start;
}

/* photo pile */
.pile-zone{ position:relative; }
.pile{
  position:relative; aspect-ratio:1; max-width:480px; margin:0 auto;
  touch-action:pan-y;   /* horizontal drag tosses, vertical still scrolls the page */
}
.pile-card{
  position:absolute; inset:0;
  border-radius:10px; border:7px solid var(--cream);
  outline:1px solid rgba(0,0,0,.1); outline-offset:-1px;
  box-shadow:var(--shadow-card);
  overflow:hidden;
  transform:rotate(var(--pr,0deg)) translate(var(--px,0px), var(--py,0px));
  transition:transform .5s var(--spring), box-shadow .3s var(--ease), opacity .4s var(--ease);
  will-change:transform;
  user-select:none;
}
.pile-card img{ width:100%; height:100%; object-fit:cover; pointer-events:none; }
.pile-card.top{ cursor:grab; }
.pile-card.top:active{ cursor:grabbing; }
.pile-card.dragging{ transition:none; }
.pile-card.flying{
  transition:transform .55s cubic-bezier(0.4, 0, 1, 1), opacity .5s var(--ease);
  opacity:0;
}
.pile-hint{
  font-family:var(--hand); text-align:center; margin-top:18px;
  color:var(--accent-ink); font-size:1.05rem; transition:color .5s var(--ease);
}
.d-arrow{
  position:absolute; right:-46px; bottom:34px; width:86px;
  stroke:var(--accent-ink); stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .5s var(--ease);
}

/* doodles that draw themselves */
.draw path{ stroke-dasharray:420; stroke-dashoffset:420; }
.in .draw path, .draw.in path{ animation:drawon 1.1s var(--ease) .35s forwards; }
.flat .draw path{ stroke-dashoffset:0; }
@keyframes drawon{ to{ stroke-dashoffset:0; } }

/* fabric flip */
.flip-zone{ position:relative; display:grid; gap:20px; }
.fabric{ perspective:1300px; cursor:pointer; outline:none; }
.fabric-inner{
  position:relative; aspect-ratio:1;
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(0.35, 0, 0.18, 1);
}
.fabric.flipped .fabric-inner{ transform:rotateY(180deg); }
.fabric:focus-visible .fabric-inner{ outline:3px dashed var(--accent-ink); outline-offset:6px; }
.fabric-face{
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-card);
  border:7px solid var(--cream);
}
.fabric-face .ph-stack{ position:absolute; inset:0; }
.ph-stack img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.04);
  transition:opacity .5s var(--ease), transform .7s var(--ease);
}
.ph-stack img.active{ opacity:1; transform:scale(1); }
.fabric-back{ transform:rotateY(180deg); }
.back-note{
  position:absolute; left:50%; bottom:14px; translate:-50% 0; z-index:2;
  font-family:var(--hand); font-size:.98rem; white-space:nowrap;
  background:var(--cream); padding:5px 14px; border-radius:999px;
  box-shadow:var(--shadow-card);
}
.flip-tab{
  justify-self:center; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--body); font-weight:700; font-size:.95rem;
  background:var(--accent); color:#fff; border:none; cursor:pointer;
  padding:12px 22px; border-radius:999px;
  box-shadow:0 2px 0 var(--accent-ink), var(--shadow-card);
  transition:background-color .5s var(--ease), box-shadow .5s var(--ease), transform .25s var(--ease);
}
.flip-tab svg{ width:18px; height:18px; stroke:#fff; }
.flip-tab:hover{ transform:translateY(-2px); }
.hat-note{ text-align:center; line-height:1.7; font-weight:600; }
.hn-title{
  font-family:var(--disp); font-size:1.7rem; font-weight:400;
  color:var(--accent); text-shadow:0.04em 0.045em 0 var(--accent-ink);
  transition:color .5s var(--ease), text-shadow .5s var(--ease);
}
.hn-one{ font-family:var(--hand); font-size:1.12rem; color:var(--accent-ink); transition:color .5s var(--ease); }
.hn-link{ color:inherit; font-weight:700; }

/* ═══ clothesline ═══ */
.line-sec{ padding:120px 0 110px; position:relative; z-index:2; }
.line-sec .spread-head{ --accent:var(--magenta); --accent-ink:var(--plum); padding:0 6vw; }
.line-scroll{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; cursor:grab;
}
.line-scroll::-webkit-scrollbar{ display:none; }
.line-scroll.grabbing{ cursor:grabbing; }
.line-strip{ position:relative; width:2400px; height:480px; }
.rope{ position:absolute; top:0; left:0; width:2400px; height:120px; }
.rope path{ stroke:var(--plum); stroke-width:4; opacity:.8; }
.peg{
  position:absolute; top:var(--sag); left:var(--x); width:250px;
  transform-origin:50% -10px;
  /* idle breeze + momentum tilt from swiping the line (JS sets --tilt) */
  rotate:var(--tilt, 0deg);
  transition:rotate .35s var(--ease);
  animation:sway 6s ease-in-out infinite alternate;
}
.peg:nth-child(even){ animation-duration:7.3s; animation-delay:1s; }
.peg:hover{ animation-play-state:paused; }
@keyframes sway{
  0%{ transform:rotate(var(--sw)); }
  100%{ transform:rotate(calc(var(--sw) * -1)); }
}
.pin{
  position:absolute; top:-14px; left:50%; translate:-50% 0; z-index:2;
  width:14px; height:34px; border-radius:5px 5px 3px 3px;
  background:linear-gradient(180deg, var(--magenta), var(--plum));
  box-shadow:0 2px 4px rgba(42,33,38,.25);
}
.peg img{
  border-radius:8px; border:6px solid var(--cream);
  outline:1px solid rgba(0,0,0,.1); outline-offset:-1px;
  box-shadow:var(--shadow-card);
}
.peg figcaption{
  font-family:var(--hand); text-align:center; font-size:1.02rem; padding-top:8px;
  color:var(--ink);
}

/* ═══ little things scatter ═══ */
.table-sec{ padding:40px 6vw 130px; position:relative; z-index:2; }
.table-sec .spread-head{ --accent:var(--pink); --accent-ink:var(--plum); }
.scatter{
  position:relative; max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px;
  align-items:start;
}
.scrap{
  position:relative; rotate:var(--r,0deg);
  transition:transform .35s var(--spring), box-shadow .3s var(--ease);
}
.scrap:nth-child(2){ margin-top:70px; }
.scrap:nth-child(3){ margin-top:26px; }
.scrap img{
  border-radius:10px; border:7px solid var(--cream);
  outline:1px solid rgba(0,0,0,.1); outline-offset:-1px;
  box-shadow:var(--shadow-card); aspect-ratio:1; object-fit:cover; width:100%;
}
.scrap:hover{ transform:rotate(0deg) translateY(-8px) scale(1.02); }
.scrap figcaption{
  font-family:var(--hand); font-size:1.08rem; text-align:center; padding-top:12px;
}
.d-circ{ position:absolute; inset:-14px -14px auto; width:calc(100% + 28px); stroke:var(--magenta); stroke-width:4; }
.d-heart{ position:absolute; top:-26px; right:-18px; width:54px; stroke:var(--plum); stroke-width:4; }
.d-bang{ position:absolute; top:-30px; left:-12px; width:42px; stroke:var(--chartreuse); stroke-width:5; stroke-linecap:round; }
.scatter-note{
  grid-column:1 / -1; text-align:center; font-family:var(--hand);
  font-size:1.25rem; color:var(--plum); margin-top:14px;
}

/* ═══ ending ═══ */
.ending{
  min-height:92svh;
  background:var(--pink-soft);
  display:grid; align-content:center; justify-items:center; gap:10px;
  text-align:center; padding:80px 6vw;
  position:relative; z-index:2; overflow:hidden;
  clip-path:polygon(0% 26px, 2% 4px, 4% 26px, 6% 4px, 8% 26px, 10% 4px, 12% 26px, 14% 4px, 16% 26px, 18% 4px, 20% 26px, 22% 4px, 24% 26px, 26% 4px, 28% 26px, 30% 4px, 32% 26px, 34% 4px, 36% 26px, 38% 4px, 40% 26px, 42% 4px, 44% 26px, 46% 4px, 48% 26px, 50% 4px, 52% 26px, 54% 4px, 56% 26px, 58% 4px, 60% 26px, 62% 4px, 64% 26px, 66% 4px, 68% 26px, 70% 4px, 72% 26px, 74% 4px, 76% 26px, 78% 4px, 80% 26px, 82% 4px, 84% 26px, 86% 4px, 88% 26px, 90% 4px, 92% 26px, 94% 4px, 96% 26px, 98% 4px, 100% 26px, 100% 100%, 0% 100%);
  margin-top:26px;
}
.end-kicker{ font-family:var(--hand); font-size:1.2rem; color:var(--plum); }
.end-wordmark{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(3.6rem, 10vw, 7rem); line-height:.9;
  color:var(--pink); text-shadow:0.045em 0.05em 0 var(--plum);
  user-select:none;
}
.end-wordmark span{ display:block; }
.end-wordmark span:nth-child(1){ rotate:-2deg; }
.end-wordmark span:nth-child(2){ rotate:1.5deg; }
.end-line{ margin-top:14px; font-weight:600; line-height:1.8; color:var(--ink); }
.end-ig{
  margin-top:18px; font-family:var(--hand); font-size:1.25rem; color:var(--plum);
}
.fsp1{ width:26px; top:20%; left:14%; fill:var(--plum); }
.fsp2{ width:16px; bottom:26%; right:16%; fill:var(--magenta); animation-delay:1.4s; }
.fsp3{ width:14px; top:32%; right:24%; fill:var(--teal); animation-delay:2.4s; }

/* tap stitch-sparkle */
.tapstar{
  position:fixed; z-index:66; width:22px; height:22px; pointer-events:none;
  translate:-50% -50%;
}
.tapstar svg{ width:100%; height:100%; fill:var(--magenta); }
.tapstar{ animation:tapstar .6s var(--ease) forwards; }
@keyframes tapstar{
  0%{ transform:scale(.2) rotate(0deg); opacity:0; }
  30%{ transform:scale(1.15) rotate(20deg); opacity:1; }
  100%{ transform:scale(.4) rotate(45deg); opacity:0; }
}

/* ═══ responsive ═══ */
@media (max-width: 960px){
  .nav-links{ gap:12px; }
  .nav-links a{ font-size:.85rem; }
  .hat-stage{ grid-template-columns:1fr; gap:70px; max-width:520px; }
  .d-arrow{ right:-8px; }
  .scatter{ grid-template-columns:1fr; max-width:420px; }
  .scrap:nth-child(2), .scrap:nth-child(3){ margin-top:0; }
  .fan{ height:52vw; }
  .fan-ph{ width:38vw; }
}