
#vp-blog-designs{--ink:#292139;--teal:#195c51;--rust:#ac482b;--paper:#fffaf1;font-family:'Source Sans 3',sans-serif}
#vp-blog-designs *{box-sizing:border-box}
#vp-blog-designs .page{color:var(--ink);background:var(--paper);min-height:1550px}
#vp-blog-designs header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 6%;border-bottom:1px solid #dcd6c9;font-size:13px}
#vp-blog-designs .brand{font:700 18px/1.3 'Libre Baskerville',serif}
#vp-blog-designs .brand small{display:block;font:400 11px/1.4 'Source Sans 3',sans-serif;letter-spacing:1.5px;margin-top:5px}
#vp-blog-designs nav{display:flex;gap:20px;align-items:center}
#vp-blog-designs a{color:inherit;text-decoration:none}
#vp-blog-designs a:hover{text-decoration:underline}
#vp-blog-designs .visit{background:var(--rust);color:white;padding:9px 16px;border-radius:3px}
#vp-blog-designs .eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;text-transform:uppercase;color:var(--rust)}
#vp-blog-designs h1,#vp-blog-designs h2,#vp-blog-designs blockquote{font-family:'Libre Baskerville',serif;font-weight:400}
#vp-blog-designs h1{font-size:clamp(33px,4.9vw,52px);line-height:1.18;letter-spacing:-1.8px;margin:19px 0}
#vp-blog-designs h2{font-size:26px;line-height:1.4;letter-spacing:-.6px;margin:28px 0 15px}
#vp-blog-designs p{font-size:17px;line-height:1.75;margin:0 0 20px}
#vp-blog-designs .deck{font-size:20px;line-height:1.5;color:#645b64}
#vp-blog-designs .meta{font-size:13px;color:#716670;display:flex;flex-wrap:wrap;gap:12px;margin:25px 0}
#vp-blog-designs img{width:100%;display:block;object-fit:cover}
#vp-blog-designs figure{margin:0}
#vp-blog-designs figcaption{font-size:12px;line-height:1.5;padding-top:10px;color:#746a66}
#vp-blog-designs .inner{padding:40px 6%}
#vp-blog-designs .crumb{font-size:12px;color:#756c6e;margin-bottom:35px}
#vp-blog-designs .article-grid{display:grid;grid-template-columns:170px 1fr;gap:45px;margin-top:42px}
#vp-blog-designs aside{font-size:13px;line-height:1.65}
#vp-blog-designs aside strong{display:block;letter-spacing:1px;font-size:11px;text-transform:uppercase;margin-bottom:16px}
#vp-blog-designs aside a{display:block;margin:11px 0;color:#59665f}
#vp-blog-designs blockquote{font-size:27px;line-height:1.5;margin:28px 0;color:var(--teal)}
#vp-blog-designs .note{padding:22px 25px;background:#e6eee6;border-left:3px solid var(--teal);margin:26px 0}
#vp-blog-designs .note p{font-size:15px;margin:8px 0 0}
#vp-blog-designs .tags{font-size:12px;color:#645b64;border-top:1px solid #d9d1c5;margin-top:30px;padding-top:18px}
#vp-blog-designs .end{padding:30px 6%;display:flex;align-items:center;justify-content:space-between;gap:25px;background:var(--teal);color:#fffaf1}
#vp-blog-designs .end h2{font-size:24px;margin:0 0 9px}
#vp-blog-designs .end p{font-size:14px;margin:0}
#vp-blog-designs .end a{white-space:nowrap;border-bottom:1px solid #c9dbbd;padding-bottom:7px;font-size:14px}
#vp-blog-designs footer{padding:22px 6%;font-size:12px;display:flex;justify-content:space-between;background:#123d37;color:#e4e9df}
#vp-blog-designs .magazine .title{max-width:710px;margin:auto;text-align:center;padding:0 20px 14px}
#vp-blog-designs .magazine .meta{justify-content:center}
#vp-blog-designs .magazine figure img{height:380px;border-radius:90px 3px 3px 3px}
#vp-blog-designs .journal{background:#fffdf5}
#vp-blog-designs .journal .split{display:grid;grid-template-columns:1fr 1fr;background:#eedcc0;min-height:475px}
#vp-blog-designs .journal .split .intro{padding:45px 28px 35px 12%}
#vp-blog-designs .journal h1{font-size:42px}
#vp-blog-designs .journal .split img{height:100%;min-height:475px}
#vp-blog-designs .journal .ribbon{display:flex;justify-content:space-around;gap:20px;padding:19px 6%;background:var(--rust);color:#fff8e9;font-size:14px}
#vp-blog-designs .journal .body-grid{display:grid;grid-template-columns:1fr 205px;gap:35px}
#vp-blog-designs .journal .note{background:#f9e9c8;border:0;border-radius:0 28px 0 0}
#vp-blog-designs .journal .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:25px 0 32px;border-top:1px solid #d9c8ad;padding-top:20px}
#vp-blog-designs .journal .steps b{font:400 28px 'Libre Baskerville';color:var(--rust);display:block;margin-bottom:10px}
#vp-blog-designs .journal .steps span{font-size:15px}
#vp-blog-designs .journal aside{background:#ecf0df;padding:24px;height:fit-content;border-radius:50px 0 0 0;margin-top:28px}
#vp-blog-designs .journal aside p{font-size:14px}
#vp-blog-designs .editorial{background:#f9f7f0}
#vp-blog-designs .editorial .masthead{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid #a6aea3;padding:28px 0 18px;margin-bottom:35px}
#vp-blog-designs .editorial .masthead span{font:400 23px 'Libre Baskerville'}
#vp-blog-designs .editorial .headline{display:grid;grid-template-columns:1fr 165px;gap:35px;align-items:end}
#vp-blog-designs .editorial .headline h1{font-size:49px}
#vp-blog-designs .editorial .byline{border-left:1px solid #c7c9bb;padding-left:20px;font-size:13px;line-height:1.7;margin-bottom:26px}
#vp-blog-designs .editorial img{height:340px}
#vp-blog-designs .editorial .reading{max-width:590px;margin:40px auto 0}
#vp-blog-designs .editorial .lead:first-letter{float:left;font:400 66px/.85 'Libre Baskerville';color:var(--teal);margin:8px 10px 0 0}
#vp-blog-designs .editorial blockquote{border-top:1px solid #aab8a7;border-bottom:1px solid #aab8a7;padding:25px 0;text-align:center}
@media(max-width:620px){#vp-blog-designs header{padding:20px 5%}#vp-blog-designs nav a:not(.visit){display:none}#vp-blog-designs .brand{font-size:15px}#vp-blog-designs .inner{padding:30px 6%}#vp-blog-designs .article-grid,#vp-blog-designs .journal .body-grid{grid-template-columns:1fr;gap:18px}#vp-blog-designs .article-grid aside{display:none}#vp-blog-designs .journal .split{grid-template-columns:1fr}#vp-blog-designs .journal .split .intro{padding:30px 6%}#vp-blog-designs .journal .split img{min-height:0;height:260px}#vp-blog-designs .journal h1,#vp-blog-designs .editorial .headline h1{font-size:35px}#vp-blog-designs .magazine figure img,#vp-blog-designs .editorial img{height:270px}#vp-blog-designs .editorial .headline{grid-template-columns:1fr;gap:0}#vp-blog-designs .editorial .byline{border:0;padding:0}#vp-blog-designs .end{flex-direction:column;align-items:start}#vp-blog-designs .journal .ribbon{font-size:12px;gap:10px}#vp-blog-designs .page{min-height:2100px}#vp-blog-designs .editorial .masthead span{font-size:18px}}


#vp-blog-designs .page{min-height:2600px}
#vp-blog-designs .photo-pair,#vp-blog-designs .photo-trio{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:32px 0}
#vp-blog-designs .photo-trio .wide-photo{grid-column:1/-1}
#vp-blog-designs .photo-pair img,#vp-blog-designs .photo-trio img{height:auto;aspect-ratio:4/3;border-radius:3px;object-fit:cover}
#vp-blog-designs .photo-trio .wide-photo img{aspect-ratio:16/9}
#vp-blog-designs .photo-open{display:block;width:100%;border:0;padding:0;background:transparent;cursor:zoom-in}
#vp-blog-designs figcaption span{font-weight:600;color:var(--rust);margin-right:8px}
#vp-blog-designs .magazine .article-grid{grid-template-columns:130px 1fr;gap:26px}
#vp-blog-designs .journal .body-grid{grid-template-columns:1fr}
#vp-blog-designs .journal .body-grid>aside{display:none}
#vp-blog-designs .journal .photo-pair{grid-template-columns:1.15fr 1fr;align-items:start}
#vp-blog-designs .journal .photo-pair figure:nth-child(2){margin-top:45px}
#vp-blog-designs .journal .photo-pair figure{background:#fffaf1;padding:10px 10px 14px;border:1px solid #e3d7c0}
#vp-blog-designs .journal .photo-trio{grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto;gap:20px}
#vp-blog-designs .journal .photo-trio .wide-photo{grid-column:1;grid-row:1/3;align-self:center}
#vp-blog-designs .journal .photo-trio .wide-photo img{aspect-ratio:3/4}
#vp-blog-designs .editorial .reading{max-width:620px}
#vp-blog-designs .editorial .photo-pair{margin-left:-35px;margin-right:-35px;gap:16px}
#vp-blog-designs .editorial .photo-trio{margin-left:-35px;margin-right:-35px;gap:16px}
#vp-blog-designs .editorial .photo-trio .wide-photo img{aspect-ratio:4/3}
#vp-blog-designs dialog{width:min(900px,94%);border:0;padding:18px;background:#fffaf1;color:#292139;border-radius:8px;max-height:90vh}
#vp-blog-designs dialog::backdrop{background:#132b28dd}
#vp-blog-designs dialog img{max-height:67vh;object-fit:contain;width:100%}
#vp-blog-designs .gallery-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:15px;font:400 15px 'Source Sans 3',sans-serif}
#vp-blog-designs .gallery-controls button{border:1px solid #cfc5b7;background:#fffaf1;color:#195c51;padding:10px 16px;font:600 15px 'Source Sans 3',sans-serif;cursor:pointer}
@media(max-width:620px){#vp-blog-designs .page{min-height:0}#vp-blog-designs .magazine .article-grid{grid-template-columns:1fr}#vp-blog-designs .photo-pair,#vp-blog-designs .photo-trio,#vp-blog-designs .journal .photo-pair,#vp-blog-designs .journal .photo-trio{grid-template-columns:1fr}#vp-blog-designs .journal .photo-pair figure:nth-child(2){margin-top:0}#vp-blog-designs .journal .photo-trio .wide-photo{grid-column:auto;grid-row:auto}#vp-blog-designs .photo-trio .wide-photo img,#vp-blog-designs .journal .photo-trio .wide-photo img{aspect-ratio:4/3}#vp-blog-designs .editorial .photo-pair,#vp-blog-designs .editorial .photo-trio{margin-left:0;margin-right:0}}

body{margin:0}#vp-blog-designs{max-width:1100px;margin:auto}#vp-blog-designs .page{min-height:0}
/* --- additions for the live templates --- */
body.vp-blog-body{margin:0;background:#efe9dc}
#vp-blog-designs{max-width:1100px;margin:auto}
#vp-blog-designs .page{min-height:0}
#vp-blog-designs header .brand a:hover{text-decoration:none}
#vp-blog-designs .photo-single{margin:32px 0}
#vp-blog-designs .photo-single img{height:auto;aspect-ratio:16/9;border-radius:3px}
#vp-blog-designs .editorial .photo-single{margin-left:-35px;margin-right:-35px}
#vp-blog-designs .reading p,#vp-blog-designs .article-grid p,#vp-blog-designs .body-grid p{white-space:normal}
#vp-blog-designs .journal .split.no-photo{grid-template-columns:1fr}
#vp-blog-designs .photo-open:focus-visible,#vp-blog-designs a:focus-visible{outline:3px solid #e99931;outline-offset:3px}
@media(max-width:620px){#vp-blog-designs header nav a:not(.visit){display:none}#vp-blog-designs .editorial .photo-single{margin-left:0;margin-right:0}#vp-blog-designs footer{flex-direction:column;gap:6px}}

.vp-foot-scripts{text-align:center;font-size:12px;padding:8px 0}.vp-foot-scripts:empty{display:none}.vp-foot-scripts img,.vp-foot-scripts .statcounter{display:inline-block!important;width:auto!important;height:auto!important;aspect-ratio:auto!important;vertical-align:middle}
