/*
Theme Name: Studio Dwars
Description: Studio Dwars portfolio met het originele beeldmerk, negen projecten en een contactformulier.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: studio-dwars
*/

@font-face{font-family:DM Sans;src:url(assets/9fea608a947e6702.woff2) format("woff2");font-weight:100 1000;font-display:swap}
@font-face{font-family:Instrument Serif;src:url(assets/5eb09b5ac0e28b67.woff2) format("woff2");font-display:swap}
:root{--paper:#f8f5f0;--ink:#20171c;--accent:#a70050;--line:#d9d0d1;--muted:#574a51;--blush:#f2e2e9}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 "DM Sans",sans-serif}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
a:hover{text-decoration:underline;text-underline-offset:.24em}
h1,h2,h3,p,figure{margin:0}
.wrap{width:min(100% - 112px,1280px);margin-inline:auto}
.skip{position:absolute;left:12px;top:12px;z-index:2;padding:10px;background:white;transform:translateY(-180%)}
.skip:focus{transform:none}
.masthead{min-height:94px;display:flex;align-items:center;justify-content:space-between;gap:22px;border-bottom:1px solid var(--line)}
.logo img{width:193px;height:auto}
nav{display:flex;align-items:center;gap:clamp(18px,3vw,44px);font-size:15px;font-weight:650}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:11px 18px;min-height:46px;border-radius:30px;background:var(--accent);color:white;font-size:15px;font-weight:650}
.pill:hover{background:#80003d;text-decoration:none}
.kicker{font-size:12px;font-weight:760;letter-spacing:.105em;text-transform:uppercase}
.hero{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:clamp(24px,5vw,76px);padding-block:clamp(50px,6vw,94px) clamp(48px,6vw,86px)}
.hero h1{font-weight:780;font-size:clamp(59px,7.8vw,116px);letter-spacing:-.085em;line-height:.88;margin:23px 0 25px}
.hero h1 em{display:block;color:var(--accent);font:400 1.07em/.93 "Instrument Serif",Georgia,serif;letter-spacing:-.055em}
.hero p{max-width:31ch;color:var(--muted);font-size:clamp(17px,1.6vw,21px);line-height:1.43;margin-bottom:25px}
.feature{display:block;position:relative}
.feature-image{display:block;aspect-ratio:1.42;overflow:hidden;background:#363339}
.feature-image img{width:100%;height:100%;object-fit:cover;object-view-box:inset(4% 8% 29% 0);object-position:48% 48%}
.feature-caption{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:10px;font-size:14px;font-weight:640}
.arrow{display:inline-grid;place-items:center;width:33px;height:33px;border:1px solid currentColor;border-radius:50%;flex:none;font-size:17px;line-height:1}
.section{padding-block:clamp(42px,6vw,84px);border-top:1px solid var(--line);scroll-margin-top:18px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px}
h2{font-size:clamp(42px,5.5vw,78px);font-weight:750;letter-spacing:-.077em;line-height:.97}
.text-link{font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:.22em}
.projects{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.project{display:block}
.project-image{height:clamp(240px,28vw,410px);display:grid;place-items:center;overflow:hidden}
.mr-jo{background:#dce1e1;padding:clamp(16px,3vw,42px)}
.kooij-dekker{background:#f0dfe8;padding:clamp(16px,3vw,36px)}
.project-preview{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:clamp(46px,5vw,68px) minmax(0,1fr);overflow:hidden;background:#fff;box-shadow:0 8px 25px #25323725;transition:transform .2s}
.project-brand{display:flex;align-items:center;padding:8px 6%}
.project-brand img{width:auto;height:100%;max-width:46%;object-fit:contain}
.kooij-dekker .project-brand img{height:74%}
.project-photo{width:100%;height:100%;object-fit:cover}
.mr-jo .project-photo{object-position:center 50%}
.kooij-dekker .project-photo{object-position:center 44%}
.project:hover .project-preview{transform:scale(1.025)}
.project-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px}
.project h3{font-size:clamp(21px,2.4vw,34px);font-weight:720;letter-spacing:-.06em;line-height:1.1}
.project-meta p{margin-top:4px;color:var(--muted);font-size:14px}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,6vw,84px)}
.services{margin:0;padding:0;list-style:none}
.services li{border-top:1px solid var(--line);padding:15px 0}
.services li:last-child{border-bottom:1px solid var(--line)}
.services h3{font-size:24px;letter-spacing:-.04em;line-height:1.2}
.services p,.bio p{color:var(--muted);margin-top:6px}
.bio{max-width:46ch}
.studio-detail{margin-top:16px}
.studio-detail summary{width:fit-content;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:.22em}
.contact{background:var(--blush);padding-block:clamp(48px,7vw,90px)}
.contact h2{max-width:14ch}
.contact p{margin:12px 0 23px;color:var(--muted)}
.contact-form{display:grid;gap:14px;max-width:38rem}
.contact-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.contact-form label{display:grid;gap:5px;font-size:15px;font-weight:700}
.contact-form label span{font-weight:400}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:4px;padding:10px 12px;background:var(--paper);color:var(--ink);font:inherit}
.contact-form :is(input,textarea,button):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.contact-form textarea{resize:vertical}
.contact-form button{justify-self:start;border:0;font-family:inherit;cursor:pointer}
.contact-form button:disabled{opacity:.6;cursor:wait}
.contact .contact-status{margin:0;font-size:15px}
.contact-status:empty{display:none}
@media(max-width:600px){.contact-fields{grid-template-columns:1fr}}
footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:22px;color:var(--muted);font-size:13px}
@media(max-width:900px){.wrap{width:calc(100% - 56px)}.hero{gap:30px}.hero h1{font-size:clamp(49px,8.1vw,90px)}}
@media(max-width:660px){
.wrap{width:calc(100% - 36px)}
.masthead{flex-wrap:wrap;min-height:0;padding:16px 0 11px;gap:12px}
.logo img{width:155px}
nav{width:100%;justify-content:space-between;gap:8px;font-size:14px}
nav .pill{padding:6px 11px;min-height:36px;gap:7px;font-size:14px}
.hero,.split,.projects{grid-template-columns:1fr}
.hero{padding:38px 0;gap:30px}
.hero h1{font-size:clamp(47px,12vw,74px);margin:16px 0 19px}
.hero p{margin-bottom:18px}
.projects{gap:24px}
.project-image{height:clamp(215px,68vw,360px)}
.section-head{align-items:start;flex-direction:column;gap:12px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.portfolio-intro{padding-block:clamp(34px,6vw,80px) 0}
.portfolio-intro h1{font-size:clamp(46px,6vw,90px);line-height:1;letter-spacing:-.075em;margin-top:17px}
.portfolio-list{padding-top:28px;padding-bottom:clamp(40px,6vw,80px)}
.case{scroll-margin-top:24px;background:var(--blush);padding:clamp(18px,4vw,52px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(20px,4vw,52px)}
.case img{width:100%;aspect-ratio:1.65;object-fit:cover;object-view-box:inset(4% 8% 29% 0)}
.case h2{font-size:clamp(34px,4vw,62px);margin:10px 0 15px}
.case p{max-width:39ch}
@media(max-width:660px){.case{grid-template-columns:1fr}}
.archive-section{margin-top:clamp(42px,6vw,84px)}
.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,52px) 24px}
.archive-image{aspect-ratio:1.46;display:grid;min-width:0;grid-template-rows:minmax(0,1fr);place-items:center;background:#e9e3df;padding:clamp(12px,2vw,25px);overflow:hidden}
.archive-project:nth-child(even) .archive-image{background:#efe3eb}
.archive-image img{max-width:100%;max-height:100%;object-fit:contain}
.archive-project h3{margin-top:12px;font-size:clamp(22px,2.1vw,30px);letter-spacing:-.05em;line-height:1.12}
.archive-project p{margin-top:5px;color:var(--muted);font-size:15px}
.archive-project .archive-scope{font-weight:700;color:var(--ink)}
@media(max-width:960px){.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.archive-grid{grid-template-columns:1fr}}

.legacy-entry{max-width:76ch;margin-bottom:36px}
.legacy-entry :is(h1,h2,p,ul,ol){margin-bottom:14px}
.legacy-entry a{text-decoration:underline}
.legacy-entry img{height:auto}