/*
Theme Name: Papaya King
Description: Retro yellow one-page front page.
Version: 2.2
Text Domain: kingdog
*/

:root{--yellow:#fbe51e;--red:#e0302b;--green:#0a7a4b;--ink:#2b2a1f;--card:#fffef6;--soft:0 12px 34px rgba(120,90,0,.15);
--display:'Anton',Impact,sans-serif;--body:'Oswald','Arial Narrow',sans-serif;--script:'Yellowtail',cursive;
--bg:url('images/bg.png');--palms:url('images/palms.png');
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--yellow) var(--bg) repeat;color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.w{width:min(1180px,100% - 32px);margin:0 auto;position:relative;z-index:2}
h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1.02;margin:0}
.script{font-family:var(--script);color:var(--red);line-height:1}

/* page top: left strip + header + slider */
.top{display:grid;grid-template-columns:1fr;align-items:start}
.strip{grid-row:1 / 3;background:#fff;border:3px solid var(--green);border-top:0;border-radius:0 0 26px 26px;padding:20px 12px 24px;box-shadow:var(--soft);text-transform:uppercase;line-height:1.02}
.strip p{margin:0 0 16px}
.strip .red{font:600 19px/1.05 var(--body);color:var(--red)}
.strip .green{font:600 17px/1.05 var(--body);color:var(--green)}
.strip .big{font:400 44px/.95 var(--display);color:var(--red)}
.strip .small{font:500 12px/1.1 var(--body);color:var(--green)}
.strip p:last-child{margin-bottom:0}

.head{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding:22px 0 24px}
.head img{height:112px;width:auto;display:block}
.menu{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.menu a{display:block;background:var(--yellow);border:3px solid var(--red);border-radius:12px;padding:5px 16px;font:400 21px/1.2 var(--display);text-transform:uppercase;color:var(--green);box-shadow:0 6px 14px rgba(120,90,0,.14);transition:transform .2s}
.menu li:nth-child(even) a{border-radius:999px;color:var(--red)}
.menu a:hover{transform:translateY(-3px) rotate(-2deg)}
.tagline{flex-basis:100%;font-size:30px;margin:0}
.tagline small{font:500 12px var(--body);color:var(--ink);margin-left:12px}

.slider{position:relative;aspect-ratio:1.9;border:6px solid #fff;border-radius:26px;overflow:hidden;box-shadow:var(--soft);background:#444}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s;background:center/cover;display:flex;align-items:flex-end}
.slide.on{opacity:1}
.slide .ico{position:absolute;right:6%;top:50%;transform:translateY(-50%);font-size:min(22vw,200px);opacity:.9}
.tag{background:rgba(224,48,43,.92);color:#fff;padding:14px 26px 14px 22px;margin-bottom:12%;border-radius:0 16px 16px 0;max-width:62%}
.tag h2{font-size:clamp(24px,4.4vw,44px)}
.tag p{margin:2px 0 0;font-size:clamp(14px,2vw,20px);font-weight:500}
.arw{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.88);color:var(--red);font:700 22px/1 var(--body);cursor:pointer;box-shadow:var(--soft)}
.arw.p{left:12px}.arw.n{right:12px}
.dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.dots button{width:12px;height:12px;border-radius:50%;border:0;background:#fff;padding:0;cursor:pointer}
.dots button.on{background:var(--red)}

.stage{position:relative}

/* sections */
section{padding:60px 0;position:relative;z-index:2}
.sh{text-align:center;margin-bottom:34px}
.sh h2{font-size:clamp(34px,5vw,56px);color:var(--green)}
.sh .script{font-size:30px;margin-top:6px}
.grid{display:grid;gap:22px}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border-radius:28px;padding:28px;box-shadow:var(--soft)}
.fact{text-align:center}.fact b{display:block;font:400 60px/1 var(--display);color:var(--red)}.fact span{color:var(--green);font-weight:500}
.item{text-align:center;transition:transform .25s}.item:hover{transform:translateY(-4px)}
.item i{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 14px;border-radius:50%;background:#fff1a8;font-style:normal;font-size:40px}
.item h3{font-size:26px;color:var(--green);margin-bottom:6px}.item p{margin:0;font-size:16px}
.story{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.story h2{font-size:clamp(32px,4.4vw,50px);color:var(--red);margin-bottom:14px}.story p{margin:0 0 14px}
.quote{background:var(--green);color:#fff;border-radius:28px;padding:36px;box-shadow:var(--soft)}
.quote .script{color:#fff1a8;font-size:38px}.quote small{display:block;margin-top:12px;opacity:.85}

/* order block */
.order{position:relative;padding:80px 0}
.panel{background:#f4f4f4;border-radius:22px;outline:3px solid var(--red);outline-offset:-14px;border:8px solid #fff;box-shadow:var(--soft);display:grid;grid-template-columns:1fr 1.1fr 1fr 1.2fr;gap:18px;align-items:center;padding:36px 34px;position:relative}
.panel h3{color:var(--green);font-size:28px;margin-bottom:16px}
.panel .logo{display:block;max-width:170px;width:100%;margin:0 auto}
.panel .bag{display:block;width:min(240px,100%);margin:-70px auto -30px;position:relative;z-index:2;filter:drop-shadow(0 14px 14px rgba(0,0,0,.18))}
.panel .txt{font:400 26px/1.1 var(--display);color:var(--red);text-transform:none}
.panel .txt + .txt{margin-top:42px}
.cue{position:absolute;display:flex;align-items:center;gap:6px;font-size:28px;color:var(--red);font-family:var(--script);line-height:1;transform:rotate(-6deg)}
.cue svg{width:84px;height:54px;flex:none}
.cue.t{top:14px;right:3%}.cue.b{bottom:14px;left:3%;transform:rotate(-4deg)}

.visit{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.visit h3{font-size:28px;color:var(--green);margin-bottom:10px}.visit p{margin:0 0 6px}
.mail{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.mail input{flex:1 1 180px;border:2px solid #f2dd5a;background:#fff;border-radius:999px;padding:12px 20px;font:inherit}
.btn{display:inline-block;border-radius:999px;padding:13px 30px;font:600 17px var(--body);background:var(--red);color:#fff;border:0;cursor:pointer;box-shadow:0 10px 22px rgba(224,48,43,.3)}
footer{position:relative;z-index:2;text-align:center;padding:30px 0 40px;font-size:15px}

@media(max-width:900px){
 .top{grid-template-columns:1fr}.strip{grid-row:auto;order:3;border-top:3px solid var(--green);border-radius:26px;margin-top:22px;column-count:2;column-gap:20px}
 .strip p{break-inside:avoid}
 .story,.visit,.g3{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr}
 .panel{grid-template-columns:1fr 1fr;padding-top:60px}.panel .bag{margin:0 auto}.panel .txt+.txt{margin-top:18px}
 .slider{aspect-ratio:1.4}
}
@media(max-width:520px){.head img{height:90px}.menu a{font-size:18px;padding:4px 12px}.panel{grid-template-columns:1fr}.cue svg{width:56px}}
.palms-fixed{position:fixed;left:0;right:0;bottom:0;height:min(737px,62vh);background:var(--palms) bottom center/auto 100% repeat-x;pointer-events:none;z-index:0}
.panel a[data-o]:not(.cue){display:block}
.panel a[data-o]:hover{opacity:.82}
.panel .txt a{color:var(--red)}
.cue span{white-space:nowrap}
.stickers{padding:30px 0 70px}
.srow{display:flex;gap:26px}
.srow.top{justify-content:space-between;align-items:flex-start;margin-bottom:34px}
.srow.bot{justify-content:center;align-items:center;flex-wrap:wrap;gap:30px}
.stk{display:block;text-align:center;text-transform:uppercase;font-family:var(--display);color:var(--green);line-height:1.02;box-shadow:var(--soft);transition:transform .2s}
.stk:hover{transform:rotate(0) scale(1.04)!important}
.stk.white{background:#fff;padding:12px;border-radius:8px}
.stk.white>.in{border:3px solid var(--red);padding:20px 16px;border-radius:4px}
.stk.yellow{background:var(--yellow);border:3px solid var(--red);outline:5px solid rgba(255,255,255,.7);border-radius:8px}
.stk.yellow>.in{padding:20px 16px}
.stk .sc{font-family:var(--script);text-transform:none;color:var(--red);display:block;line-height:1;font-size:34px}
.stk .g{color:var(--green);display:block}.stk .r{color:var(--red);display:block}
.stk small{display:block;font:500 13px/1.2 var(--body);color:var(--green);margin-top:12px}
.stk small.r{color:var(--red);font-size:14px;text-transform:none}
.stk .sx{font:400 21px/1.2 var(--display);text-transform:none;color:var(--green);letter-spacing:.2px}
.stk .bigr{font-size:78px;line-height:.9;color:var(--red);display:block}
.stk.circle{width:214px;aspect-ratio:1;border-radius:50%;background:#fff;padding:10px}
.stk.circle>.in{border:3px solid var(--red);border-radius:50%;height:100%;display:grid;place-content:center;padding:12px}
.stk svg{width:88px;height:50px;display:block;margin:0 auto 8px}
.foot{position:relative;z-index:2;background:var(--green);color:#fff7c2;padding:56px 0 30px;border-radius:40px 40px 0 0;text-align:left;font-size:17px}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:30px}
.foot h4{font:400 24px/1 var(--display);text-transform:uppercase;color:var(--yellow);margin:0 0 12px}
.foot p{margin:0 0 6px}.foot a:hover{text-decoration:underline}
.fname{font:400 38px/1 var(--display);text-transform:uppercase;color:#fff;margin-bottom:10px}
.fcopy{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.25);font-size:14px;opacity:.9}
@media(max-width:900px){.srow.top{justify-content:center;flex-wrap:wrap}.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}.cue span{white-space:normal}}
.page{position:relative;width:min(1180px,100% - 32px);margin:0 auto;padding-left:180px}
.page .w{width:auto;margin:0}
.rail{position:absolute;top:0;bottom:0;left:0;width:150px;z-index:3}
.rail .strip{position:sticky;top:env(safe-area-inset-top,0px);max-height:calc(100vh - env(safe-area-inset-top,0px));overflow-y:auto;scrollbar-width:none}
.rail .strip::-webkit-scrollbar{display:none}
@media(max-width:1000px){
 .page{padding-left:0}
 .rail{position:static;width:auto;margin-top:22px}
 .rail .strip{position:static;max-height:none;overflow:visible;border-top:3px solid var(--green);border-radius:26px;column-count:2;column-gap:20px}
}
@media(min-width:1001px){
 .rail .strip{--u:clamp(.7px,calc(100vh/800),1px);overflow:hidden}
 .strip .red{font-size:calc(19*var(--u))}
 .strip .green{font-size:calc(17*var(--u))}
 .strip .big{font-size:calc(44*var(--u))}
 .strip .small{font-size:calc(12*var(--u))}
 .strip p{margin-bottom:calc(16*var(--u))}
 .strip p:last-child{margin-bottom:0}
}
@media(min-width:1001px){
 .rail{background:#fff;border:3px solid var(--green);border-top:0;border-bottom:0;box-shadow:var(--soft)}
 .rail .strip{background:none;border:0;box-shadow:none;border-radius:0;padding:20px 12px 24px}
 .foot{margin-top:0;border-radius:0}
}
.srow,.srow.top,.srow.bot{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:stretch;justify-content:normal;flex-wrap:nowrap}
.srow.top{margin-bottom:30px}
.stk>.in{flex:1;display:flex;flex-direction:column;justify-content:center}
.stk{display:flex;flex-direction:column}
.stk.circle{align-self:center;justify-self:center;width:min(100%,300px)}
.stk.circle>.in{display:grid}
@media(max-width:700px){.srow,.srow.top,.srow.bot{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.srow,.srow.top,.srow.bot{grid-template-columns:1fr}}
@media(min-width:1001px){
 .rail .strip{--u:clamp(.7px,calc(100vh/800),1.1px);height:calc(100vh - env(safe-area-inset-top,0px));max-height:none;display:flex;flex-direction:column;justify-content:space-between;padding:24px 12px}
 .strip p,.strip p:last-child{margin:0}
}
.strip p{text-align:center;overflow-wrap:break-word}
@media(min-width:1001px){
 .page{padding-left:210px}
 .rail{width:180px}
 .rail .strip{padding:24px 14px}
 .strip .big{font-size:calc(38*var(--u))}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}