/*
Theme Name: Julz Interior
Description: Website van Julz Interior Design, Styling & Fashion. Teksten en foto's pas je aan via Weergave > Aanpassen.
Version: 1.2
Text Domain: julz-interior
*/

:root{--bg:#F8EFE8;--band:#EDE5D9;--blob:#E4D9CC;--ink:#4A3A30;--btn:#3F4A2B;--btnt:#fff;--pill:#E4D9CC;--line:rgba(74,58,48,.2);--logo:none;--o2:rgba(255,255,255,.5);
--h:'Caveat','Segoe Script','Bradley Hand',cursive;--b:'DM Sans','Segoe UI',Arial,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:only light}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 .95rem/1.7 var(--b);overflow-x:hidden}
h1,h2,h3{font-family:var(--h);font-weight:500;margin:0;line-height:1.05}
h1{font-size:clamp(3.2rem,8vw,5.2rem)}
h2{font-size:clamp(2.4rem,5vw,3.4rem);margin-bottom:1rem}
h3{font:500 1.1rem var(--b);margin:.6rem 0 .3rem}
p{margin:0 0 1rem;max-width:56ch}
a{color:inherit}
:focus-visible{outline:3px solid var(--btn);outline-offset:3px}
.eb{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.8rem;display:block}
.hand{font:500 1.7rem/1.2 var(--h)}
.btn{display:inline-flex;gap:.5rem;align-items:center;background:var(--btn);color:var(--btnt);text-decoration:none;font-size:.85rem;font-weight:500;padding:.65rem 1.3rem;border-radius:99px;border:0;cursor:pointer;font-family:var(--b);transition:transform .2s}
.btn.soft{background:var(--pill);color:var(--ink)}
.btn:hover{transform:translateY(-2px)}
.lnk{font-size:.85rem;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line)}
nav{position:sticky;top:0;z-index:9;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;justify-content:space-between;align-items:center;padding:.8rem 5vw;background:var(--bg);padding-top:max(.8rem,env(safe-area-inset-top,0px))}
nav img{height:4.2rem;filter:var(--logo);cursor:pointer}
nav div{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
nav a{font-size:.8rem;text-decoration:none;padding:.2rem 0}
nav a[aria-current]{color:var(--btn);font-weight:500}
nav a.btn{padding:.5rem 1.1rem;background:var(--pill);color:var(--ink);border-bottom:0}
.jp{display:none}.jp.on{display:block}.hero.jp{display:none}.hero.jp.on{display:flex}
section{padding:4.5rem 5vw;position:relative;overflow-x:clip}.hero{overflow:hidden}
.in{max-width:1000px;margin:0 auto;position:relative;z-index:1}
.oR:before,.oL:before{content:"";position:absolute;z-index:1;bottom:-190px;width:clamp(440px,56vw,900px);aspect-ratio:1.05;background:var(--blob);opacity:.55;pointer-events:none}
.oR:before{right:-6%;border-radius:58% 42% 55% 45%/48% 55% 45% 52%}
.oL:before{left:-6%;border-radius:42% 58% 46% 54%/55% 45% 55% 45%}
.band{background:var(--band)}
.ph{overflow:hidden;border-radius:1rem;background:var(--blob);box-shadow:0 0 0 4px rgba(255,255,255,.55)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.07)}
.hero{min-height:78vh;display:flex;align-items:center;padding:0 5vw;color:#4A3A30}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#F8EFE8 14%,rgba(248,239,232,.88) 42%,rgba(248,239,232,0) 78%)}
.hero .in{width:100%}.hero.lt:after{background:linear-gradient(90deg,rgba(248,239,232,.9) 0%,rgba(248,239,232,.55) 34%,rgba(248,239,232,0) 62%)}.hero .in>*{max-width:30rem}
.hero .note{position:absolute;right:6%;bottom:12%;transform:rotate(-6deg);max-width:13rem;text-align:center;color:#fff;z-index:2;font-size:2.1rem;text-shadow:0 1px 10px rgba(0,0,0,.65)}
.mq{background:var(--band);overflow:hidden;white-space:nowrap;padding:.7rem 0;font-size:.78rem}
.mq div{display:inline-block;animation:mq 40s linear infinite}
.mq span{margin:0 1.6rem}.mq span:before{content:"\2022";margin-right:3.2rem}
@keyframes mq{to{transform:translateX(-50%)}}
.two{display:grid;gap:3.5rem;grid-template-columns:.9fr 1.1fr;align-items:center}
.two.rev{grid-template-columns:1.1fr .9fr}
.tilt{transform:rotate(-3deg);aspect-ratio:6/7;max-width:380px;justify-self:center;width:100%;position:relative}
.tilt img{transform:none}
.tilt .hand{position:absolute;right:-1.5rem;bottom:.6rem;background:#fff;color:#4A3A30;padding:0 .5rem;transform:rotate(-3deg)}
.strip{display:flex;gap:1rem;align-items:center;font-size:.8rem;margin-top:2rem;flex-wrap:wrap}
.cards{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.cards .ph{aspect-ratio:3/2.4}.cards .tall{aspect-ratio:3/4}
.cards p{font-size:.8rem;line-height:1.55;margin:0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.head h2{margin:0}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line);padding:.9rem 0}
.acc summary{cursor:pointer;display:flex;justify-content:space-between;list-style:none;font-size:.95rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary:after{content:"+"}.acc details[open] summary:after{content:"\2212"}
.acc summary i{opacity:.5;font-style:normal;font-size:.7rem;margin-right:1rem}
.acc details p{font-size:.85rem;margin:.7rem 0 0}
.grid{display:grid;gap:1.6rem 1.3rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid .ph{aspect-ratio:3/2;margin-bottom:.6rem}.grid .ph.wh{background:#fff}
.grid .meta{display:flex;justify-content:space-between;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.grid p{font-size:.8rem;line-height:1.55;margin:0}
.stick{position:absolute;right:-1rem;top:-1.5rem;z-index:2;background:#3F4A2B;color:#fff;font:500 1.15rem/1.1 var(--h);padding:.8rem;border-radius:.7rem;transform:rotate(8deg);width:6.2rem}
.center{text-align:center}.center p{margin-inline:auto}
.big{font-size:clamp(2.4rem,5vw,3.6rem);margin:.3rem 0 1rem}
.blk{padding:3.5rem 5vw}
.blk .ph{aspect-ratio:3/2;max-width:430px;width:100%}.blk .ph.p{aspect-ratio:3/4;max-width:340px}
.blk .two{grid-template-columns:1fr 1fr}
form{display:grid;gap:1rem;max-width:25rem;margin:1.5rem auto 0;text-align:left}
label{font-size:.78rem;display:grid;gap:.3rem}
input,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:.3rem;padding:.65rem .7rem}
footer{position:relative;z-index:2;background:var(--band);padding:2rem 5vw;display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:center;font-size:.75rem}
footer img{height:3.4rem;filter:var(--logo)}
.soc{flex-basis:100%;display:flex;gap:.5rem 1.8rem;justify-content:center;flex-wrap:wrap;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.85rem}
.soc a{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line)}
.soc a:hover{text-decoration-color:currentColor}
.burger{display:none;background:none;border:0;padding:.7rem;cursor:pointer;flex-direction:column;gap:5px}
.burger span{display:block;width:26px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s}
nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.open .burger span:nth-child(2){opacity:0}
nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:760px){
nav{flex-wrap:nowrap;justify-content:space-between}
nav img{height:3.2rem}
.burger{display:flex}
nav>div{display:none;position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--bg);flex-direction:column;align-items:stretch;gap:0;padding:.5rem 5vw 1.5rem;box-shadow:0 14px 24px rgba(74,58,48,.12)}
nav.open>div{display:flex}
nav>div a{font-size:1.05rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
nav>div a.btn{margin-top:1rem;text-align:center;border-bottom:0;padding:.8rem 1.2rem}
nav a[aria-current]{color:var(--btn);font-weight:500}
}
.rev{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:2rem;text-align:left}
.rc{position:relative;margin:0;background:#fff;border-radius:1.5rem;padding:1.6rem 1.5rem 1.4rem;box-shadow:0 8px 24px rgba(74,58,48,.07);display:flex;flex-direction:column;gap:.8rem}
.rc .stars{display:flex;gap:2px;color:#3F4A2B}
.rc blockquote{margin:0;font-size:.95rem;line-height:1.65}
.rc figcaption{display:flex;flex-direction:column;font-size:.85rem;margin-top:auto}
.rc figcaption span{font-size:.75rem;opacity:.65}
.rc .tag{position:absolute;top:1rem;right:1rem;background:var(--pill);border-radius:99px;font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;padding:.1rem .7rem}
.exnote{display:block;margin-top:1.5rem;opacity:.65}
@media (prefers-reduced-motion:reduce){.mq div{animation:none}.btn{transition:none}}
@media (max-width:760px){.two,.two.rev,.blk .two{grid-template-columns:1fr}.hero:after{background:linear-gradient(180deg,#F8EFE8 30%,rgba(248,239,232,.6))}.hero .note{right:4%;bottom:6%;font-size:1.5rem}.oR:before,.oL:before{width:100%;bottom:-90px}.tilt .hand{right:0}}

.tag:empty,.exnote:empty{display:none}
.admin-bar nav{top:32px}@media(max-width:782px){.admin-bar nav{top:46px}}