:root { --orange:#ff642f; --deep:#29130e; --cream:#fff6df; --paper:#fffbef; --green:#baca7a; --pink:#ffb5a5; --line:rgba(41,19,14,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--deep); background:var(--paper); font-family:"Nunito",sans-serif; transition:background .45s,color .45s; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; color:inherit; }
input::placeholder { color:currentColor; opacity:.58; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.header { height:78px; padding:0 clamp(22px,5vw,76px); display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--deep); background:var(--paper); position:relative; z-index:10; }
.logo { display:flex; align-items:center; font-family:"Comfortaa",sans-serif; font-size:27px; font-weight:700; letter-spacing:-2px; }
.logo-button { padding:0; border:0; color:inherit; background:none; cursor:pointer; }
.logo i { width:25px; height:25px; margin-left:4px; display:grid; place-items:center; color:var(--paper); background:var(--orange); border-radius:50%; font-style:normal; font-size:17px; transform:rotate(8deg); }
nav { display:flex; align-items:center; gap:clamp(20px,3vw,42px); font-size:13px; font-weight:800; }
nav a:not(.nav-button):hover { color:var(--orange); }
.nav-button,.button { border:2px solid var(--deep); border-radius:14px; padding:12px 20px; box-shadow:3px 3px 0 var(--deep); transition:.18s; }
.nav-button:hover,.button:hover { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--deep); }
.menu-button { display:none; background:none; border:0; padding:8px; }
.menu-button > span:not(.sr-only) { display:block; width:25px; height:2px; margin:6px; background:var(--deep); }
.hero { min-height:700px; display:grid; grid-template-columns:53% 47%; border-bottom:2px solid var(--deep); }
.hero-copy { padding:clamp(70px,8vw,120px) clamp(24px,6vw,95px); display:flex; flex-direction:column; justify-content:center; }
.tag,.kicker { margin:0 0 25px; text-transform:uppercase; letter-spacing:.13em; font-size:11px; font-weight:900; }
.tag span { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#59a54a; box-shadow:0 0 0 4px rgba(89,165,74,.17); }
h1,h2,blockquote { font-family:"Comfortaa",sans-serif; letter-spacing:-.055em; }
h1 { margin:0; font-size:clamp(60px,7.2vw,108px); line-height:.87; font-weight:700; }
h1 em,h2 span { color:var(--orange); font-style:normal; }
.lead { max-width:570px; margin:32px 0; color:#60483f; font-size:17px; line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:24px; }
.primary { background:var(--orange); color:white; font-size:13px; font-weight:900; }
.excuse-button { padding:12px 0; border:0; border-bottom:2px solid var(--deep); background:none; cursor:pointer; font-size:13px; font-weight:900; }
.excuse-button span { display:inline-block; margin-left:6px; transition:transform .3s; }
.excuse-button:hover span { transform:rotate(180deg); }
.excuse { min-height:24px; margin:27px 0 0; max-width:520px; color:#856b60; font-size:12px; font-style:italic; }
.hero-visual { min-width:0; position:relative; display:grid; place-items:center; overflow:hidden; background:var(--cream); border-left:2px solid var(--deep); }
.hero-visual::before,.hero-visual::after { content:""; position:absolute; border:2px solid var(--deep); border-radius:50%; background:var(--orange); }
.hero-visual::before { width:250px; height:250px; right:-80px; top:-70px; }
.hero-visual::after { width:100px; height:100px; left:-28px; bottom:70px; background:var(--green); }
.hero-visual img { z-index:2; width:min(92%,620px); max-height:620px; object-fit:contain; mix-blend-mode:normal; filter:drop-shadow(10px 14px 0 rgba(41,19,14,.13)); transition:opacity .16s,transform .3s; }
.hero-visual img.changing { opacity:0; transform:scale(.96) rotate(-2deg); }
.hero-visual img.is-petted { animation:fox-petted .85s cubic-bezier(.2,.85,.3,1); }
.pet-heart { position:absolute; z-index:5; left:50%; top:53%; pointer-events:none; color:var(--orange); font-size:var(--heart-size); opacity:0; animation:heart-pop 1.15s ease-out forwards; }
.sticker { position:absolute; z-index:3; display:grid; place-items:center; background:var(--cream); border:2px solid var(--deep); box-shadow:4px 4px 0 var(--deep); font-weight:900; text-align:center; }
.sticker-one { width:92px; height:92px; left:8%; top:8%; border-radius:50%; transform:rotate(-11deg); line-height:1.1; }
.sticker-two { right:6%; top:34%; padding:10px 15px; border-radius:50%; transform:rotate(9deg); color:var(--orange); font-size:19px; }
.mood-picker { position:absolute; z-index:4; left:5%; right:5%; bottom:25px; max-width:430px; padding:12px; border:2px solid var(--deep); border-radius:15px; background:var(--paper); box-shadow:4px 4px 0 var(--deep); }
.mood-picker p { margin:0 0 7px; font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.mood-picker div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.mood-button { width:100%; min-height:34px; padding:7px 8px; border:1px solid var(--deep); border-radius:99px; background:transparent; cursor:pointer; font-size:10px; font-weight:800; white-space:nowrap; }
.mood-button.active { background:var(--deep); color:white; }
.marquee { overflow:hidden; padding:15px 0; background:var(--deep); color:var(--cream); white-space:nowrap; }
.marquee-track { display:flex; width:max-content; animation:marquee-scroll 24s linear infinite; }
.marquee-set { display:flex; align-items:center; gap:42px; min-width:max-content; padding-right:42px; color:var(--orange); font-size:12px; font-weight:900; letter-spacing:.1em; }
.marquee span { color:var(--cream); }
.marquee:hover .marquee-track { animation-play-state:paused; }
@keyframes marquee-scroll { to { transform:translateX(-50%); } }
@keyframes fox-petted { 0%,100% { transform:translateY(0) rotate(0); } 22% { transform:translateY(-18px) rotate(-3deg) scale(1.03); } 48% { transform:translateY(2px) rotate(3deg) scale(.98); } 72% { transform:translateY(-8px) rotate(-1deg) scale(1.015); } }
@keyframes heart-pop { 0% { opacity:0; transform:translate(-50%,0) scale(.3) rotate(0); } 18% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--heart-x)),var(--heart-y)) scale(1.25) rotate(var(--heart-rotate)); } }
.skills { padding:105px clamp(24px,6vw,90px) 120px; }
.section-title { display:grid; grid-template-columns:.45fr 1.25fr .75fr; gap:5vw; align-items:end; margin-bottom:60px; }
h2 { margin:0; font-size:clamp(44px,5.4vw,78px); line-height:1.02; }
.section-title > p:last-child { margin:0; color:#654d43; line-height:1.65; font-size:14px; }
.skill-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.skill-card { min-height:390px; padding:26px; border:2px solid var(--deep); border-radius:24px; box-shadow:6px 6px 0 var(--deep); display:flex; flex-direction:column; }
.skill-card.orange { background:var(--orange); color:white; }
.skill-card.cream { background:var(--cream); }
.skill-card.green { background:var(--green); }
.skill-card > span { font-size:11px; font-weight:900; }
.icon { width:105px; height:105px; margin:auto; display:grid; place-items:center; border:2px solid var(--deep); border-radius:50%; background:var(--paper); color:var(--deep); font-size:48px; transform:rotate(-8deg); }
.skill-card:nth-child(2) .icon { transform:rotate(7deg); }
.skill-card h3 { margin:0 0 8px; font-family:"Comfortaa",sans-serif; font-size:21px; }
.skill-card p { margin:0; font-size:13px; line-height:1.55; }
.forecast { padding:105px clamp(24px,7vw,110px); display:grid; grid-template-columns:.9fr 1.1fr; gap:8vw; align-items:center; border-top:2px solid var(--deep); background:var(--green); }
.forecast-heading h2 span { color:var(--paper); text-shadow:2px 2px 0 var(--deep); }
.forecast-card { position:relative; min-height:420px; padding:45px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; border:2px solid var(--deep); border-radius:26px; background:var(--cream); box-shadow:8px 8px 0 var(--deep); }
.forecast-date { position:absolute; left:30px; top:27px; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.forecast-orbit { position:absolute; width:210px; height:210px; right:-30px; top:-32px; display:grid; place-items:center; border:2px solid var(--deep); border-radius:50%; background:var(--orange); }
.forecast-orbit i { font-style:normal; font-size:76px; }
.forecast-orbit span { position:absolute; left:18px; top:70px; color:white; font-size:30px; }
.forecast-text { position:relative; z-index:2; max-width:520px; margin:0 0 25px; font-family:"Comfortaa",sans-serif; font-size:clamp(23px,3vw,38px); font-weight:700; line-height:1.25; }
.forecast-button { align-self:flex-start; padding:13px 18px; border:2px solid var(--deep); border-radius:12px; background:var(--orange); color:white; box-shadow:3px 3px 0 var(--deep); cursor:pointer; font-weight:900; }
.quiz { padding:105px clamp(24px,7vw,110px); display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; align-items:center; background:var(--deep); color:var(--cream); }
.quiz-intro > p:not(.kicker) { max-width:500px; color:#d9c9bf; line-height:1.7; }
.quiz-intro small { color:#927d72; font-size:10px; }
.quiz-card { height:560px; padding:clamp(28px,5vw,58px); display:flex; align-items:center; justify-content:center; border:2px solid var(--deep); border-radius:28px; background:var(--paper); color:var(--deep); box-shadow:9px 9px 0 var(--orange); }
.quiz-start,.quiz-game,.quiz-result { width:100%; height:100%; text-align:center; }
.quiz-start,.quiz-result { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.quiz-game { display:flex; flex-direction:column; }
.quiz-card .hidden { display:none; }
.quiz-emoji { display:block; margin-bottom:15px; font-size:70px; }
.quiz-card h3 { margin:0 0 15px; font-family:"Comfortaa",sans-serif; font-size:clamp(26px,3vw,40px); line-height:1.2; }
.quiz-card p { line-height:1.6; }
.quiz-main-button { margin-top:18px; padding:15px 23px; border:2px solid var(--deep); border-radius:13px; background:var(--orange); color:white; box-shadow:4px 4px 0 var(--deep); cursor:pointer; font-weight:900; }
.quiz-progress { height:9px; margin-bottom:14px; overflow:hidden; border:1px solid var(--deep); border-radius:99px; background:var(--cream); }
.quiz-progress span { display:block; width:20%; height:100%; background:var(--orange); transition:width .25s; }
.quiz-count { margin:0 0 22px; color:#8a7065; font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.quiz-question { min-height:145px; display:grid; place-items:center; }
.quiz-answers { display:grid; gap:10px; margin-top:28px; }
.quiz-answer { padding:14px 16px; border:2px solid var(--deep); border-radius:12px; background:var(--cream); cursor:pointer; font-weight:800; text-align:left; transition:.15s; }
.quiz-answer:hover { transform:translateX(4px); background:var(--green); }
.result-score { display:grid; place-items:center; width:110px; height:110px; margin:0 auto 24px; border:2px solid var(--deep); border-radius:50%; background:var(--green); box-shadow:5px 5px 0 var(--deep); font-family:"Comfortaa",sans-serif; font-size:29px; font-weight:700; transform:rotate(-5deg); }
.facts { display:grid; grid-template-columns:1fr 1fr; background:var(--cream); border-top:2px solid var(--deep); border-bottom:2px solid var(--deep); }
.fact-intro { padding:100px clamp(24px,6vw,90px); }
.fine-print { margin-top:35px; font-size:11px; color:#81695e; }
.numbers { display:grid; grid-template-columns:1fr 1fr; border-left:2px solid var(--deep); }
.numbers div { padding:50px; display:flex; flex-direction:column; justify-content:center; border-bottom:2px solid var(--deep); }
.numbers div:last-child { grid-column:1/-1; border-bottom:0; }
.numbers strong { font-family:"Comfortaa",sans-serif; font-size:clamp(70px,9vw,130px); line-height:1; color:var(--orange); }
.numbers span { margin-top:12px; font-size:13px; font-weight:800; line-height:1.35; }
.sock-fact { position:relative; }
#sock-button { align-self:flex-start; margin-top:22px; padding:10px 13px; border:2px solid var(--deep); border-radius:10px; background:var(--orange); color:white; box-shadow:3px 3px 0 var(--deep); cursor:pointer; font-size:11px; font-weight:900; }
.sock-comment { min-height:18px; margin:14px 0 0; color:#745b50; font-size:10px; }
.adventures { padding:105px clamp(24px,6vw,90px) 120px; background:var(--paper); }
.adventures-heading { display:grid; grid-template-columns:1.25fr .75fr; gap:8vw; align-items:end; margin-bottom:55px; }
.adventures-heading > p { max-width:480px; margin:0; color:#755d52; line-height:1.65; }
.adventure-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.adventure-card { overflow:hidden; border:2px solid var(--deep); border-radius:22px; background:var(--cream); box-shadow:6px 6px 0 var(--deep); }
.adventure-card img { display:block; width:100%; height:360px; object-fit:cover; border-bottom:2px solid var(--deep); }
.adventure-card:nth-child(2) img,.adventure-card:nth-child(3) img { object-position:center 28%; }
.adventure-card > div { min-height:190px; padding:23px; }
.adventure-card span { color:var(--orange); font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.adventure-card h3 { margin:12px 0 9px; font-family:"Comfortaa",sans-serif; font-size:20px; line-height:1.25; }
.adventure-card p { margin:0; color:#765f55; font-size:12px; line-height:1.55; }
.reviews { padding:105px clamp(24px,7vw,110px); background:var(--orange); color:white; }
.review-layout { display:grid; grid-template-columns:1.3fr .7fr; gap:8vw; align-items:end; }
blockquote { margin:0; max-width:900px; font-size:clamp(38px,5vw,72px); line-height:1.17; }
.review-author { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
.chicken { width:70px; height:70px; display:grid; place-items:center; border:2px solid var(--deep); border-radius:50%; background:var(--cream); font-size:35px; box-shadow:4px 4px 0 var(--deep); }
.review-author p { margin:0; font-size:12px; }
.review-author > span { grid-column:1/-1; font-size:16px; letter-spacing:.2em; }
.review-author small { letter-spacing:0; opacity:.7; font-size:9px; }
.contact { padding:110px clamp(24px,7vw,110px); display:grid; grid-template-columns:1fr .85fr; gap:8vw; align-items:center; }
.contact-card { padding:35px; border:2px solid var(--deep); border-radius:24px; background:var(--green); box-shadow:7px 7px 0 var(--deep); }
.contact-card > p:first-child { margin:0 0 25px; line-height:1.55; }
.contact form { display:flex; flex-direction:column; gap:12px; }
.contact input,.contact textarea { width:100%; padding:16px 18px; border:2px solid var(--deep); border-radius:12px; background:var(--paper); color:var(--deep); outline:none; font:inherit; }
.contact textarea { min-height:125px; resize:vertical; }
.contact input:focus,.contact textarea:focus { box-shadow:0 0 0 3px rgba(255,96,52,.35); }
.contact .form-trap { position:absolute; left:-10000px; width:1px; height:1px; padding:0; border:0; }
.contact button { padding:16px; border:2px solid var(--deep); border-radius:12px; background:var(--deep); color:white; cursor:pointer; font-weight:900; }
.contact button:disabled { cursor:wait; opacity:.65; }
.form-message { min-height:20px; margin:14px 0 0; font-size:12px; font-weight:800; }
.reveal { opacity:0; transform:translateY(28px) rotate(.4deg); transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }
.reveal-group .reveal:nth-child(2) { transition-delay:.1s; }
.reveal-group .reveal:nth-child(3) { transition-delay:.2s; }
.return-sock { align-self:flex-start; margin-top:11px; padding:10px 13px; border:2px solid var(--deep); border-radius:10px; background:var(--cream); color:var(--deep); box-shadow:3px 3px 0 var(--deep); cursor:pointer; font-size:11px; font-weight:900; transition:transform .2s; }
.easter-toast { position:fixed; z-index:30; left:50%; bottom:26px; max-width:calc(100% - 40px); padding:12px 18px; border:2px solid var(--deep); border-radius:12px; background:var(--orange); color:white; box-shadow:4px 4px 0 var(--deep); opacity:0; pointer-events:none; font-size:12px; font-weight:900; text-align:center; transform:translate(-50%,25px); transition:.3s; }
.easter-toast.show { opacity:1; transform:translate(-50%,0); }
.peek-fox { position:fixed; z-index:19; right:-220px; bottom:55px; width:180px; opacity:0; visibility:hidden; pointer-events:none; transition:right .55s cubic-bezier(.2,.9,.3,1.25),opacity .2s,visibility 0s .55s; }
.peek-fox.show { right:-35px; opacity:1; visibility:visible; transition-delay:0s; }
.peek-fox img { width:100%; mix-blend-mode:multiply; filter:drop-shadow(4px 5px 0 rgba(41,19,14,.2)); }
.peek-fox span { position:absolute; left:-50px; top:24px; padding:7px 10px; border:2px solid var(--deep); border-radius:10px; background:var(--paper); color:var(--deep); font-size:10px; font-weight:900; }
body.night-hunt { --deep:#f9eadb; --paper:#11131e; --cream:#252537; --pink:#302b46; --green:#617054; --line:rgba(255,255,255,.2); }
body.night-hunt .hero-visual img { mix-blend-mode:normal; filter:saturate(1.05) brightness(.75) drop-shadow(0 0 30px rgba(255,100,47,.28)); }
body.night-hunt .hero-visual::before { background:#d8d5a2; box-shadow:0 0 55px rgba(255,244,160,.42); }
body.night-hunt .mood-picker { background:#11131e; color:#f9eadb; }
body.night-hunt .mood-button { border-color:#f9eadb; color:#f9eadb; }
body.night-hunt .mood-button.active { border-color:var(--orange); background:var(--orange); color:white; }
body.night-hunt .forecast-heading h2 span { color:var(--orange); text-shadow:none; }
body.night-hunt .adventures-heading > p,body.night-hunt .adventure-card p { color:#c8b8ae; }
body.night-hunt .skill-card.orange,body.night-hunt .reviews { color:#fff4e8; }
footer { padding:28px clamp(24px,5vw,76px); display:flex; justify-content:space-between; align-items:center; background:var(--deep); color:var(--cream); font-size:11px; }
.footer-logo i { color:var(--deep); }
@media(max-width:850px){ .header{height:68px}.menu-button{display:block}nav{position:absolute;display:none;top:68px;left:0;right:0;padding:18px 24px 28px;flex-direction:column;align-items:stretch;background:var(--paper);border-bottom:2px solid var(--deep)}nav.open{display:flex}.nav-button{text-align:center}.hero{grid-template-columns:1fr}.hero-visual{min-height:650px;border-left:0;border-top:2px solid var(--deep)}.section-title{grid-template-columns:1fr}.skill-grid{grid-template-columns:1fr}.forecast{grid-template-columns:1fr}.quiz{grid-template-columns:1fr}.facts{grid-template-columns:1fr}.numbers{border-left:0;border-top:2px solid var(--deep)}.adventures-heading{grid-template-columns:1fr}.adventure-grid{grid-template-columns:1fr}.adventure-card{display:grid;grid-template-columns:.8fr 1.2fr}.adventure-card img{height:100%;min-height:330px;border-right:2px solid var(--deep);border-bottom:0}.review-layout{grid-template-columns:1fr}.review-author{margin-top:20px;max-width:300px}.contact{grid-template-columns:1fr} }
@media(max-width:560px){ h1{font-size:56px}.hero-copy{padding-top:65px;padding-bottom:65px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-visual{min-height:570px}.hero-visual img{width:105%;max-height:470px;align-self:start}.mood-picker{bottom:18px}.sticker-one{width:75px;height:75px;font-size:12px}.skills,.forecast,.quiz,.adventures,.reviews,.contact{padding-top:75px;padding-bottom:80px}.forecast-card{min-height:460px;padding:28px}.forecast-orbit{width:170px;height:170px}.quiz-card{height:540px;padding:25px 18px}.quiz-question{min-height:125px}.numbers{grid-template-columns:1fr}.numbers div,.numbers div:last-child{grid-column:auto;border-bottom:2px solid var(--deep)}.numbers div:last-child{border-bottom:0}.fact-intro{padding-top:75px;padding-bottom:75px}.adventure-card{display:block}.adventure-card img{height:330px;border-right:0;border-bottom:2px solid var(--deep)}footer{align-items:flex-start;flex-direction:column;gap:18px} }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}.reveal{opacity:1;transform:none}.marquee-track{animation:none!important}}