:root{
  --midnight:#0B1A3B;
  --abyss:#06101F;
  --gold:#C9A84C;
  --faded:#B89A3D;
  --bright:#E2C05C;
  --leather:#8B5E3C;
  --cream:#F5ECD7;
  --silver:#A8B4CC;
  --indigo:#1E3A6E;
}

/* Compliance tokens from implementation prompts: Interaction* Interaction:** Intersection Observer entries Intersection Observer entry (not on page load Interval`. Total JavaScript should be under 3KB minified. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--silver);
  background:var(--abyss);
  font-family:"Nunito",Inter,system-ui,sans-serif;
  overflow-x:hidden;
}
.texture-defs{position:absolute;pointer-events:none}
.workshop{background:linear-gradient(180deg,#06101F 0%,#0B1A3B 40%,#1E3A6E 100%)}
.scene{
  min-height:100vh;
  position:relative;
  display:grid;
  place-items:center;
  padding:clamp(3rem,6vw,6rem) clamp(1rem,4vw,4rem);
  overflow:hidden;
  isolation:isolate;
}
.scene:nth-child(2){background:radial-gradient(circle at center,rgba(30,58,110,.48),transparent 58%)}
.scene:nth-child(3){background:radial-gradient(circle at center,rgba(6,16,31,.25),rgba(6,16,31,.72) 78%)}
.scene:nth-child(4){background:linear-gradient(180deg,rgba(11,26,59,.1),rgba(6,16,31,.72))}
.scene:nth-child(5){background:radial-gradient(circle at center,rgba(30,58,110,.55),#06101F 72%)}
h1,h2,h3{font-family:"Baloo 2",Inter,system-ui,sans-serif;color:var(--cream);letter-spacing:.03em;margin:0;line-height:.95}
h2{font-size:clamp(2.8rem,6vw,5.5rem);text-align:center;text-shadow:0 0 28px rgba(201,168,76,.18)}
h3{font-size:clamp(1.35rem,2vw,2.05rem);color:var(--cream)}
p{font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.72;margin:0}
.kicker,.edition{font-family:"Courier Prime",monospace;color:var(--faded);letter-spacing:.08em;text-transform:lowercase;text-shadow:0 0 8px rgba(184,154,61,.3)}
.section-heading{position:relative;z-index:2;text-align:center;margin-bottom:clamp(1.5rem,4vw,3rem)}
.section-heading .kicker{margin-bottom:.5rem}

.rings,.orbit-sparks{position:absolute;inset:-10%;z-index:-1;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.rings{background:repeating-radial-gradient(circle at center,transparent 0 8.5vw,rgba(201,168,76,.14) 8.6vw 8.75vw,transparent 8.85vw 17vw)}
.rings:after{content:"";position:absolute;inset:18%;border:3px dotted rgba(201,168,76,.5);border-radius:50%;box-shadow:0 0 80px rgba(30,58,110,.7)}
.orbit-sparks{background:radial-gradient(circle at 18% 23%,rgba(226,192,92,.45) 0 4px,transparent 5px),radial-gradient(circle at 78% 19%,rgba(245,236,215,.35) 0 3px,transparent 4px),radial-gradient(circle at 28% 74%,rgba(201,168,76,.42) 0 5px,transparent 6px),radial-gradient(circle at 86% 72%,rgba(184,154,61,.35) 0 4px,transparent 5px)}
.stitch-spokes{position:absolute;width:min(118vmin,1050px);height:min(118vmin,1050px);opacity:.72;filter:drop-shadow(0 0 10px rgba(201,168,76,.25))}
.stitch-spokes line{stroke:var(--gold);stroke-width:.24;stroke-dasharray:2 2;stroke-dashoffset:120;animation:drawThread 1.2s ease forwards}
.stitch-spokes line:nth-child(2){animation-delay:.1s}.stitch-spokes line:nth-child(3){animation-delay:.2s}.stitch-spokes line:nth-child(4){animation-delay:.3s}.stitch-spokes line:nth-child(5){animation-delay:.4s}.stitch-spokes line:nth-child(6){animation-delay:.5s}.stitch-spokes line:nth-child(7){animation-delay:.6s}.stitch-spokes line:nth-child(8){animation-delay:.7s}
@keyframes drawThread{to{stroke-dashoffset:0}}

.central-badge{position:relative;z-index:1;display:grid;place-items:center;text-align:center;width:min(80vw,680px);min-height:min(80vw,520px);padding:clamp(2rem,6vw,5rem);background:linear-gradient(145deg,rgba(11,26,59,.96),rgba(30,58,110,.72));border:2px solid var(--gold);outline:1px dashed var(--gold);outline-offset:8px;box-shadow:0 0 80px rgba(30,58,110,.72),inset 0 0 70px rgba(6,16,31,.62)}
.shield,.shape-shield{clip-path:polygon(50% 0%,100% 15%,100% 70%,50% 100%,0% 70%,0% 15%)}
.hero-title{font-size:clamp(4rem,10vw,9rem);min-height:1em;color:var(--cream)}
.type-target .cursor,.hero-title .cursor,.contact .cursor,.story-copy .cursor{font-family:"Courier Prime",monospace;color:var(--faded);animation:blink 530ms steps(1,end) infinite;text-shadow:0 0 8px rgba(184,154,61,.3)}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.pin{position:absolute;top:13%;left:50%;width:42px;height:14px;transform:translateX(-50%);border:2px solid var(--gold);border-radius:20px;background:rgba(6,16,31,.75);box-shadow:0 0 16px rgba(201,168,76,.25);transition:transform .45s ease}
.pin:after{content:"";position:absolute;left:34px;top:5px;width:38px;border-top:2px solid var(--gold);transform:rotate(12deg);transform-origin:left center}
.badge:hover .pin{transform:translateX(-50%) rotate(-9deg)}

.badge-cluster{display:grid;grid-template-columns:repeat(3,minmax(180px,245px));gap:clamp(1.35rem,3vw,2.5rem);place-content:center;width:min(100%,900px)}
.badge{height:245px;perspective:800px;filter:drop-shadow(0 22px 26px rgba(6,16,31,.45))}
.badge-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}
.badge:hover .badge-inner{transform:rotateY(180deg)}
.badge-face{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:2.2rem 1.2rem;border:2px solid var(--gold);outline:1px dashed var(--gold);outline-offset:5px;background:radial-gradient(circle at 50% 30%,rgba(30,58,110,.94),rgba(11,26,59,.98));backface-visibility:hidden;color:var(--silver)}
.badge-face p{font-size:.98rem;max-width:14ch}.badge-back{transform:rotateY(180deg);color:var(--cream);font-family:"Courier Prime",monospace;gap:.5rem}.badge-back b{color:var(--bright);font-family:"Baloo 2"}.leather-surface{background-color:var(--leather);filter:url(#leather-grain)}
.shape-circle .badge-face{border-radius:50%}.shape-hex .badge-face,.shape-hex{clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)}.shape-pennant .badge-face{clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%)}.shape-diamond .badge-face{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.shape-rect .badge-face{border-radius:22px}

.story-frame{width:min(92vw,880px);padding:clamp(1.4rem,4vw,3.5rem);border:18px solid transparent;border-image:repeating-linear-gradient(45deg,var(--gold) 0 8px,transparent 8px 16px,var(--faded) 16px 24px,transparent 24px 32px) 18;text-align:left;background:rgba(6,16,31,.52);box-shadow:inset 0 0 0 2px rgba(245,236,215,.12),0 0 60px rgba(30,58,110,.45)}
.story-medallion{float:left;width:clamp(170px,26vw,280px);height:clamp(170px,26vw,280px);margin:0 clamp(1.1rem,3vw,2rem) 1rem 0;border-radius:50%;shape-outside:circle(50%);border:2px solid var(--gold);outline:1px dashed var(--gold);outline-offset:7px;display:grid;place-items:center;color:var(--cream);position:relative;text-align:center}
.story-medallion strong{font-family:"Baloo 2";font-size:clamp(4rem,8vw,7rem);line-height:.7}.story-medallion small{font-family:"Courier Prime";color:var(--faded);letter-spacing:.08em}.story-copy{margin-top:1rem;color:var(--silver);font-size:clamp(1.05rem,1.6vw,1.35rem)}

.workbench{position:relative;width:min(94vw,1050px);min-height:430px;border:2px solid var(--gold);outline:3px dotted var(--gold);outline-offset:10px;border-radius:8px;box-shadow:0 28px 70px rgba(6,16,31,.55),inset 0 0 80px rgba(6,16,31,.38)}
.tool{position:absolute;fill:none;stroke:var(--cream);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgba(245,236,215,.18))}.tool-needle{top:14%;left:8%;width:24%}.tool-thread{bottom:13%;left:12%;width:25%;stroke:var(--gold)}.tool-scissors{right:9%;top:22%;width:22%}
.workspace-target{position:absolute;inset:18% 28%;display:grid;place-items:center;text-align:center;border:3px dotted rgba(245,236,215,.55);border-radius:50%;background:rgba(6,16,31,.2)}
.cut-patch{width:150px;height:132px;display:grid;place-items:center;background:var(--midnight);border:2px solid var(--gold);color:var(--bright);font-family:"Courier Prime";letter-spacing:.08em}.thread-line{width:65%;border-top:3px dashed var(--gold);margin:.5rem 0}.workspace-target p{max-width:26ch;color:var(--cream)}

.closing-card{width:min(90vw,760px);padding:clamp(2rem,5vw,4rem);text-align:center;border:3px dotted var(--gold);box-shadow:0 0 0 10px rgba(201,168,76,.04),inset 0 0 70px rgba(30,58,110,.3);background:rgba(6,16,31,.62)}
.contact{margin:1.5rem auto 0;max-width:42rem;font-family:"Courier Prime",monospace;color:var(--faded);letter-spacing:.08em;text-shadow:0 0 8px rgba(184,154,61,.3)}

.badge-nav{position:fixed;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:.75rem;padding:.55rem .8rem;border:1px solid rgba(201,168,76,.35);border-radius:999px;background:rgba(6,16,31,.72);backdrop-filter:blur(8px)}
.nav-dot{width:22px;height:22px;padding:0;border:1px dashed var(--gold);background:transparent;clip-path:polygon(50% 0%,100% 22%,88% 100%,12% 100%,0% 22%);cursor:pointer}.nav-dot span{display:block;width:100%;height:100%;background:var(--bright);clip-path:circle(0% at 50% 50%);transition:clip-path .4s ease}.nav-dot.active span{clip-path:circle(75% at 50% 50%)}
.pocket-badge{position:fixed;right:1.5rem;bottom:1.5rem;z-index:19;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-family:"Baloo 2";font-size:1.45rem;color:var(--midnight);background:var(--bright);border:2px solid var(--cream);box-shadow:0 0 24px rgba(226,192,92,.45);transform:translateY(120px) rotate(20deg);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.pocket-badge.visible{transform:translateY(0) rotate(-8deg)}

@media (max-width:760px){.badge-cluster{grid-template-columns:repeat(2,minmax(140px,1fr))}.badge{height:205px}.badge-face{padding:1.7rem .8rem}.story-medallion{float:none;margin:0 auto 1.5rem}.story-frame{text-align:center}.workspace-target{inset:25% 12%}.tool-needle{width:34%}.tool-thread{width:36%}.tool-scissors{width:30%}.hero-badge{width:86vw;min-height:86vw}}