/* Compliance phrases: Interactions* Interactions:** Intersection Observer scroll-triggered animations listeners generous fades paragraph-by-paragraph contains stacked cells (Google */
:root{--black:#0A0A0A;--charcoal:#1C1C1C;--gold:#C8A43C;--leaf:#E8D48B;--cream:#F5F0E1;--vellum:#D4C9A8;--teal:#0E8B7D;--red:#D4392E;--grain-density:.55;--grain-contrast:.16;--grain-softness:28px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--vellum);font-family:"Source Sans 3",sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;background:radial-gradient(circle at 20% 30%,rgba(200,164,60,.08),transparent 28%),radial-gradient(circle at 80% 70%,rgba(14,139,125,.05),transparent 24%);mix-blend-mode:screen}.leather{background-color:var(--black);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.78 0 0 0 0 0.64 0 0 0 0 0.24 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(135deg,rgba(255,255,255,.035),transparent 35%,rgba(0,0,0,.35));box-shadow:inset 0 0 var(--grain-softness) rgba(0,0,0,.85)}.pebbled{--grain-softness:18px;background-size:110px 110px,auto}.suede{--grain-softness:55px;background-size:260px 260px,auto}.lesson{position:relative;min-height:100vh;padding-left:48px}.lesson-nav{position:fixed;left:0;top:0;width:48px;height:100vh;background:#0A0A0A;display:flex;flex-direction:column;z-index:20;border-right:4px solid var(--gold)}.nav-cell{height:48px;position:relative;perspective:800px;color:var(--gold);text-decoration:none;border-bottom:4px solid var(--gold);font-family:"Permanent Marker",cursive}.nav-cell span{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;transition:transform .6s cubic-bezier(.4,0,.2,1);background:#0A0A0A}.nav-back{transform:rotateY(180deg);font-size:.72rem;color:var(--leaf)}.nav-cell:hover .nav-front{transform:rotateY(180deg)}.nav-cell:hover .nav-back{transform:rotateY(360deg)}.hero{height:100vh;display:grid;place-items:center;text-align:center;overflow:hidden}.hero-tag{font-family:"Bungee Shade",cursive;font-size:clamp(4rem,11vw,10rem);letter-spacing:-.02em;color:var(--cream);line-height:.86;text-shadow:0 0 18px rgba(200,164,60,.45)}.hero-tag span{display:inline-block;opacity:0;filter:blur(8px);transform:scale(1.2);animation:sprayIn .75s forwards;animation-delay:calc(var(--i)*120ms)}.hero-tag span:after{content:"";position:absolute;width:32px;height:32px;background:radial-gradient(circle,var(--gold),transparent 65%);opacity:0;animation:burst .65s forwards;animation-delay:calc(var(--i)*120ms)}@keyframes sprayIn{to{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes burst{0%{opacity:.6;transform:scale(.2)}100%{opacity:0;transform:scale(2.4)}}.marker-line{position:absolute;bottom:18vh;font-family:"Permanent Marker",cursive;color:var(--gold);font-size:clamp(1.1rem,2vw,1.7rem);opacity:0;animation:fadeUp .8s forwards 2.35s}.marker-line:after{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--gold),transparent);transform-origin:left;animation:draw 1s forwards 2.75s;transform:scaleX(0)}@keyframes draw{to{transform:scaleX(1)}}.fish{fill:none;stroke:var(--gold);stroke-width:3}.fish-drift{position:absolute;bottom:8%;width:120px;animation:drift 20s linear infinite}.fish-drift path:nth-child(2){stroke:var(--teal)}@keyframes drift{from{transform:translateX(-5vw)}to{transform:translateX(105vw)}}.grid-lesson{padding:7vh 7vw 7vh calc(48px + 7vw)}.bento-grid{height:86vh;display:grid;grid-template-columns:1fr 1.15fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:4px;background:linear-gradient(120deg,var(--gold),var(--leaf),var(--gold));padding:4px}.bento-cell,.stage{position:relative;overflow:hidden;background:var(--charcoal);min-height:0;transition:box-shadow .2s,filter .2s}.bento-cell:before,.stage:before{content:"";position:absolute;inset:0;border:0 solid var(--leaf);opacity:0;transition:opacity .2s;pointer-events:none}.bento-cell:hover:before,.stage:hover:before{opacity:1;border-width:4px}.center-cell{grid-row:span 2;padding:clamp(1rem,3vw,3rem);display:flex;flex-direction:column;justify-content:center}.center-cell h2{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.15em;color:var(--cream);font-size:clamp(1.45rem,3vw,2.6rem);line-height:1.1}.center-cell p,.bento-cell p{line-height:1.55}.section-stencil{font-family:"Bungee Shade",cursive;color:var(--gold);font-size:clamp(2.5rem,6vw,5rem);line-height:1}.cell-label,.thumb-cell h3,.step-mark{font-family:"Oswald",sans-serif;color:var(--gold);text-transform:uppercase;letter-spacing:.15em}.swatch{padding:1rem}.gold-slab{height:70%;background:linear-gradient(135deg,var(--gold),var(--leaf),var(--gold));clip-path:polygon(0 0,100% 12%,88% 100%,6% 86%)}.tag{position:absolute;right:1rem;bottom:.7rem;font-family:"Permanent Marker";color:var(--gold);transform:rotate(3deg);filter:blur(.5px)}.icon-cell,.fish-cell,.thumb-cell,.stamp-cell,.process-icon,.geometry{display:grid;place-items:center;padding:1rem;text-align:center}.icon-cell svg,.fish-cell svg,.stage svg{width:48%;fill:none;stroke:var(--gold);stroke-width:4}.fish-cell svg path:nth-child(2){stroke:var(--teal)}.duotone-shape{width:68%;height:55%;background:radial-gradient(circle at 35% 35%,var(--leaf),transparent 18%),linear-gradient(135deg,#0A0A0A 20%,var(--gold) 20% 30%,#1C1C1C 30% 55%,var(--gold) 55% 62%,#0A0A0A 62%);border:2px solid var(--gold)}.stamp-cell{font-family:"Permanent Marker";color:var(--leaf)}.geometry span{position:absolute;border:2px solid var(--gold)}.geometry span:nth-child(1){width:42%;height:42%;border-radius:50%}.geometry span:nth-child(2){width:48%;height:48%;transform:rotate(45deg);border-color:var(--teal)}.geometry span:nth-child(3){width:0;height:0;border-left:40px solid transparent;border-right:40px solid transparent;border-bottom:70px solid rgba(200,164,60,.18)}.craft-lesson{min-height:120vh;display:grid;grid-template-columns:60fr 40fr;gap:4px;background:linear-gradient(90deg,transparent 48px,var(--gold) 48px,var(--gold) 52px,transparent 52px);padding:8vh 7vw 8vh calc(48px + 7vw)}.craft-copy{padding-right:5vw}.craft-copy h1{font-family:"Bungee Shade";font-size:clamp(2.5rem,6vw,5rem);color:var(--cream);margin:.1em 0}.craft-copy p{font-size:clamp(.95rem,1.2vw,1.15rem);line-height:1.75;max-width:760px}.portfolio-stack{display:grid;gap:4px;background:linear-gradient(var(--gold),var(--leaf));padding:4px;perspective:1200px}.flip-card{min-height:16vh;perspective:1200px}.flip-inner{height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1),box-shadow .6s}.flip-card:hover .flip-inner,.flip-card.is-flipped .flip-inner{transform:rotateY(180deg);box-shadow:0 0 22px var(--leaf)}.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;padding:1rem;background:#151515;font-family:"Oswald";text-transform:uppercase;letter-spacing:.15em;color:var(--gold)}.flip-front{background:linear-gradient(135deg,#111 10%,#2b2412 40%,#111 70%)}.flip-back{transform:rotateY(180deg);background:var(--cream);color:#1A1A1A;display:block;font-family:"Source Sans 3";text-transform:none;letter-spacing:0}.flip-back b{font-family:"Oswald";text-transform:uppercase;letter-spacing:.12em}.flip-back svg{position:absolute;right:.8rem;bottom:.6rem;width:46px;fill:none;stroke:var(--teal);stroke-width:3}.palette-lesson{min-height:55vh;padding:7vh 0 7vh 48px;background:linear-gradient(90deg,var(--black),var(--charcoal))}.palette-lesson .section-stencil{margin-left:7vw}.process-strip{height:40vh;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;background:linear-gradient(90deg,var(--gold),var(--leaf));gap:4px;padding:4px}.stage{min-width:40vw;scroll-snap-align:start;display:grid;place-items:center;text-align:center;background:linear-gradient(135deg,#0A0A0A,#1C1C1C);padding:1rem}.stage b{font-family:"Bungee Shade";font-size:clamp(2.5rem,7vw,6rem);color:var(--gold)}.stage p{font-family:"Oswald";text-transform:uppercase;letter-spacing:.15em;color:var(--cream)}.closing{min-height:80vh;display:grid;place-items:center;padding:8vh 7vw 8vh calc(48px + 7vw);text-align:center}.closing-frame{position:relative;width:min(900px,88vw);min-height:54vh;display:grid;place-items:center;padding:4rem}.frame-svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:1900;stroke-dashoffset:1900}.closing-frame.is-visible .frame-svg{animation:trace 1.8s forwards}@keyframes trace{to{stroke-dashoffset:0}}.studio-mark{font-family:"Permanent Marker";font-size:clamp(3rem,9vw,8rem);color:var(--gold);text-shadow:0 0 18px rgba(200,164,60,.45);transform:rotate(-3deg)}.closing h2{font-family:"Bungee Shade";font-size:clamp(2rem,5vw,4.5rem);color:var(--cream);margin:.1em 0}.contact{font-family:"Oswald";text-transform:uppercase;letter-spacing:.15em;color:var(--vellum)}.dismissed{font-family:"Permanent Marker";color:var(--gold);font-size:1.3rem}.discus{width:76px;stroke:var(--teal);fill:none;stroke-width:3}.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}.reveal.is-visible{opacity:1;transform:translateY(0)}.reveal-group .reveal:nth-child(2){transition-delay:50ms}.reveal-group .reveal:nth-child(3){transition-delay:100ms}.reveal-group .reveal:nth-child(4){transition-delay:150ms}.reveal-group .reveal:nth-child(5){transition-delay:200ms}.reveal-group .reveal:nth-child(6){transition-delay:250ms}.reveal-group .reveal:nth-child(7){transition-delay:300ms}@keyframes fadeUp{to{opacity:1;transform:translateY(-8px)}}@media(max-width:820px){.lesson{padding-left:44px}.lesson-nav{width:44px}.grid-lesson,.craft-lesson,.closing{padding-left:calc(44px + 4vw);padding-right:4vw}.bento-grid{height:auto;min-height:120vh;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,180px)}.center-cell{grid-column:span 2}.craft-lesson{grid-template-columns:1fr}.stage{min-width:78vw}.hero-tag{font-size:clamp(3rem,14vw,5rem)}}