/*
Theme Name: Goebel Studio Preview
Version: 0.3.0
Description: Independent motion-focused second design environment.
*/
:root{--ink:#171917;--cream:#f3f0e8;--orange:#f36b42;--line:#d7d6ce}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #196bb5;outline-offset:6px}.skip{position:fixed;top:-80px;background:white;padding:16px;z-index:10}.skip:focus{top:0}.review{background:var(--ink);color:#efeee8;font-size:11px;padding:10px 5%;display:flex;justify-content:space-between;letter-spacing:.05em}.review a{text-decoration:underline}.header{padding:12px 5%;display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:block}.brand img{display:block;width:116px;height:116px;object-fit:contain;mix-blend-mode:multiply}.header nav{display:flex;align-items:center;gap:32px;font-size:14px}.button{background:var(--ink);color:white;padding:17px 23px;border-radius:40px}.hero-copy{padding:42px 8% 36px}.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}h1{font-size:clamp(64px,10.5vw,160px);line-height:.94;letter-spacing:-.075em;font-weight:500;margin:25px 0 30px}em{font-style:normal;color:var(--orange)}.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:30px}.hero-bottom p{max-width:375px;font-size:17px;line-height:1.5}.round-link{border:1px solid #a8a99f;border-radius:50%;width:58px;height:58px;display:grid;place-items:center;font-size:27px}.stage{height:75vh;min-height:450px;max-height:900px;position:relative;overflow:hidden;background:#cdc3b4}.hero-image{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}.stage-shade{position:absolute;inset:0;background:linear-gradient(transparent 30%,#15191599)}.stage-caption{position:absolute;bottom:65px;left:8%;right:8%;display:flex;justify-content:space-between;align-items:end;gap:20px;color:white}.stage-caption>span{font-size:clamp(32px,5vw,70px);line-height:1.03;letter-spacing:-.045em}.stage-caption button{background:#171917b3;color:white;border:1px solid #ffffff7a;border-radius:30px;padding:12px 18px;cursor:pointer;min-height:44px}.image-note{position:absolute;bottom:18px;left:8%;font-size:10px;color:white;letter-spacing:.06em}.section{padding:100px 8%}h2{font-size:clamp(42px,6vw,86px);font-weight:500;line-height:1.02;letter-spacing:-.06em;margin:24px 0}p{line-height:1.65}.intro{display:grid;grid-template-columns:1.5fr 1fr;gap:20px 70px;align-items:end}.intro .eyebrow{grid-column:1/-1}.intro h2{margin:0}.intro h2 span{color:#85877e}.intro p{max-width:430px;font-size:18px}.products{padding-top:30px}.section-top{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:32px}.section-top p{max-width:250px;color:#62665c}.product{display:block;border-radius:4px;position:relative;overflow:hidden;transition:transform .35s}.product:hover{transform:translateY(-5px)}.feature{background:#e0e5d2;padding:38px 40px;min-height:490px;display:grid;grid-template-columns:1fr 1fr}.number{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}.feature .number{grid-column:1/-1}.product h3{font-weight:500;font-size:clamp(30px,4vw,57px);line-height:1.03;letter-spacing:-.05em;margin:40px 0 18px}.product p{font-size:15px;max-width:315px}.text-link{display:block;margin-top:32px;font-size:13px;font-weight:700}.promo-art{position:relative;min-height:330px;align-self:end}.orbit{position:absolute;width:290px;height:290px;border:1px solid #a1aa8a;border-radius:50%;top:0;left:10%}.bottle{position:absolute;width:112px;height:230px;background:linear-gradient(90deg,#913824,#f36b42 40%,#c44323);border-radius:32px 32px 25px 25px;left:15%;top:65px;transform:rotate(-15deg);box-shadow:18px 24px 30px #34402330;display:grid;place-items:center}.bottle:before{content:'';position:absolute;width:60px;height:28px;background:#252b25;top:-20px;left:26px;border-radius:8px 8px 0 0}.bottle span{color:#ffe5cc;font-size:19px;font-weight:700;letter-spacing:-1px}.notebook{position:absolute;right:6%;top:50px;width:140px;height:200px;background:#233b35;border-radius:3px 10px 10px 3px;transform:rotate(13deg);box-shadow:15px 24px 24px #34402330;border-left:6px solid #152b26;padding:23px;color:#e1e6b9;font-size:26px;line-height:1;font-weight:700}.tag{position:absolute;bottom:0;right:0;font-size:11px;line-height:1.5}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}.product-grid .product{padding:28px;display:flex;flex-direction:column}.product-grid h3{font-size:34px;margin:28px 0 5px}.product-grid p{font-size:14px}.product-grid .text-link{margin-top:auto;padding-top:20px}.print{background:#ead2bd}.apparel{background:#d6dfdc}.wide{background:#e7dfbb}.paper-art,.shirt-art,.poster-art{height:200px;position:relative;margin:32px auto 8px;width:160px;display:grid;place-items:center;font-size:35px;font-weight:700;letter-spacing:-2px;line-height:.9}.paper-art{background:#faf2df;transform:rotate(-10deg);box-shadow:7px 7px #cd5a37,15px 15px #f6eada;color:#c14b2a}.shirt-art{background:#253e38;clip-path:polygon(24% 0,38% 0,42% 8%,58% 8%,62% 0,76% 0,100% 20%,84% 40%,76% 33%,76% 100%,24% 100%,24% 33%,16% 40%,0 20%);width:205px;color:#cfddbc;font-size:21px;letter-spacing:0;transform:rotate(7deg)}.poster-art{background:#f26035;color:#242e23;transform:rotate(-6deg);border:8px solid #f8f3df;font-size:58px;box-shadow:10px 13px 20px #736c4830}.concept-note{font-size:11px;color:#696d61;margin-top:20px}.process{background:#1d2924;color:#f0f0dc;display:grid;grid-template-columns:1fr 1fr;gap:70px}.process>div>p{font-size:13px;color:#bdc9b7}.process ol{padding:0;margin:0;list-style:none}.process li{display:flex;gap:25px;border-top:1px solid #667464;padding:28px 0}.process li>span{font-size:12px;color:#e49773;margin-top:6px}.process h3{font-weight:500;font-size:23px;letter-spacing:-.025em;margin:0}.process li p{font-size:15px;color:#c0cbbb}.quote{max-width:1150px;margin:auto}.quote-links{border-top:1px solid #bfc3b6;margin-top:40px}.quote-links a{display:flex;justify-content:space-between;border-bottom:1px solid #bfc3b6;padding:24px 4px;font-size:clamp(22px,3vw,35px);letter-spacing:-.025em;transition:padding .25s,color .25s}.quote-links a:hover,.quote-links a.selected{color:#b34322;padding-left:15px}.quote-note{font-size:12px;max-width:650px;color:#666b60;margin-top:25px}footer{background:#e4e4da;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:35px;font-size:13px}footer strong{display:block;font-size:25px;font-weight:500;letter-spacing:-1px;margin-bottom:25px}footer a{display:block;padding:8px 0}footer p{margin:0 0 20px}.footer-bottom{grid-column:1/-1;border-top:1px solid #bfc4b6;padding-top:25px;display:flex;justify-content:space-between;font-size:11px;margin-top:25px}.motion-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s,transform .7s}.motion-ready .reveal.visible{opacity:1;transform:none}body.motion-off .reveal{opacity:1;transform:none}body.motion-off .hero-image{transform:none!important}.promo-art .bottle{animation:float 6s ease-in-out infinite}.promo-art .notebook{animation:float2 7s ease-in-out infinite}@keyframes float{50%{transform:translateY(-14px) rotate(-10deg)}}@keyframes float2{50%{transform:translateY(10px) rotate(8deg)}}.motion-off *{animation:none!important;transition:none!important} @media(max-width:760px){.header{padding:8px 6%}.brand img{width:86px;height:86px}.header nav{gap:14px}.header nav>a:not(.button){display:none}.button{font-size:12px;padding:14px 18px}.hero-copy{padding:35px 6% 25px}h1{font-size:clamp(61px,12vw,90px)}.hero-bottom p{font-size:15px;max-width:260px}.round-link{flex-shrink:0;width:46px;height:46px}.stage{height:470px;min-height:0}.hero-image{object-position:57% center}.stage-caption{left:6%;right:6%;bottom:50px}.stage-caption>span{font-size:35px}.stage-caption button{font-size:11px;padding:10px}.section{padding:65px 6%}.intro,.process{grid-template-columns:1fr;gap:20px}.intro .eyebrow{grid-column:auto}.intro p{font-size:16px}.section-top{display:block}.section-top p{max-width:none}.feature{padding:25px;grid-template-columns:1fr;min-height:0}.feature .number{grid-column:auto}.feature h3{font-size:43px;margin-top:25px}.promo-art{height:340px;margin-top:30px}.product-grid{grid-template-columns:1fr}.product-grid .product{padding:28px}.product-grid h3{font-size:38px}.paper-art,.shirt-art,.poster-art{margin-top:28px}.product-grid .product p{max-width:none}.process ol{margin-top:20px}.footer-bottom{display:block;line-height:1.8}.footer-bottom span{display:block}footer{grid-template-columns:1fr 1fr}footer>div:first-child{grid-column:1/-1}.review{padding:10px 6%;font-size:9px;gap:14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero-image{transform:none!important}.motion-ready .reveal{opacity:1;transform:none}}

/* Motion direction 03: entrance, reveal and depth */
.hero-copy{position:relative;overflow:hidden}.headline-line{display:block;overflow:hidden;padding-bottom:.075em;margin-bottom:-.075em}.headline-line>span{display:block;animation:headline-in 1.15s cubic-bezier(.16,1,.3,1) both}.headline-line:nth-child(2)>span{animation-delay:.14s}.hero-copy .eyebrow{animation:soft-in .8s .1s both}.hero-bottom{animation:soft-in .9s .4s both}.hero-stamp{position:absolute;right:8%;top:55px;width:115px;height:115px;border-radius:50%;background:var(--orange);color:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;transform:rotate(12deg);animation:stamp-in 1.2s .35s both}.hero-stamp span{font-size:10px;font-weight:700;line-height:1.2;letter-spacing:.05em}.hero-stamp b{font-size:34px;line-height:1.2}.stage{margin:0 2%;border-radius:18px;isolation:isolate}.hero-image{filter:saturate(var(--saturation,1));clip-path:inset(0 var(--wipe,0%) 0 0);transition:filter .1s}.reveal-label{position:absolute;inset:0;background:#233c35;color:#e1e8c9;padding:8%;font-size:clamp(35px,6vw,85px);letter-spacing:-.06em;line-height:1.03;display:flex;align-items:center}.ticker{overflow:hidden;background:var(--orange);padding:21px 0;margin-top:28px;transform:rotate(-1deg);width:100%;font-size:clamp(23px,3.4vw,48px);font-weight:700;letter-spacing:-.035em}.ticker>div{display:flex;width:max-content;animation:ticker-flow 28s linear infinite}.ticker span{white-space:nowrap;padding-right:16px}.product{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s,box-shadow .45s;will-change:auto}.product:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px);box-shadow:0 20px 35px #17251913}.product .text-link{transition:transform .3s}.product:hover .text-link{transform:translateX(6px)}.orbit{animation:orbit-pulse 6s ease-in-out infinite}.process li.visible>span{animation:number-pop .8s both}.round-link{transition:background .25s,transform .25s}.round-link:hover{background:var(--orange);transform:translateY(4px)}.motion-off .hero-image{clip-path:none!important;filter:none!important}.motion-off .headline-line>span,.motion-off .hero-bottom,.motion-off .eyebrow{opacity:1;transform:none}.motion-off .hero-stamp{opacity:1;transform:rotate(12deg)}.motion-off .product{transform:none!important}@keyframes headline-in{from{transform:translateY(115%) rotate(3deg);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes soft-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes stamp-in{from{opacity:0;transform:scale(.4) rotate(-65deg)}to{opacity:1;transform:scale(1) rotate(12deg)}}@keyframes ticker-flow{to{transform:translateX(-50%)}}@keyframes orbit-pulse{50%{transform:scale(1.13);opacity:.45}}@keyframes number-pop{from{transform:translateY(15px);opacity:0}to{transform:none;opacity:1}}@media(max-width:1000px){.hero-stamp{width:86px;height:86px;top:30px;right:6%}.hero-stamp span{font-size:8px}.hero-stamp b{font-size:25px}}@media(max-width:760px){.hero-stamp{display:none}.stage{margin:0 3%;border-radius:12px}.ticker{padding:15px 0;margin-top:18px}.hero-image{clip-path:none!important;filter:none!important}.product{transform:none!important}}@media(prefers-reduced-motion:reduce){.hero-image{clip-path:none!important;filter:none!important}.headline-line>span,.hero-bottom,.hero-copy .eyebrow{opacity:1;transform:none}.hero-stamp{opacity:1;transform:rotate(12deg)}.product{transform:none!important}}
