/*
Theme Name: The Maple
Theme URI: https://themaple.site
Author: Canadian Digital Partner
Description: Editorial blog theme for The Maple, a Toronto-first local magazine. Neighbourhood wayfinding style.
Version: 2.0.0
Requires PHP: 8.0
Text Domain: maple
*/
:root{--bg:#F3F1EA;--ink:#15231F;--sp:#1E4D3F;--sp-d:#133428;--red:#C8102E;--red-d:#A30D25;--mut:#55605B;--line:#D9D6CB;--head:'Overpass',system-ui,'Segoe UI',Arial,sans-serif;--body:'Source Serif 4',Georgia,serif;--g:20px}
*{box-sizing:border-box}html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.7 var(--body)}
img{max-width:100%;height:auto;display:block}a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1.1;margin:0 0 .5em}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.w{max-width:1264px;margin:0 auto;padding:0 var(--g)}@media(min-width:768px){:root{--g:32px}}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:99}.skip:focus{left:8px}
.vh,.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
header.site{border-top:6px solid var(--red);background:#fff;border-bottom:1px solid var(--line)}
.mast{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:6px;padding-bottom:6px}
.logo{display:block;padding:8px 16px 8px 0}.logo-img{width:min(240px,58vw);height:auto}.logo-text{font:800 34px var(--head)}
.tl{display:none;margin:0;text-align:right;font:700 15px/1.3 var(--head);color:var(--sp);text-transform:uppercase;letter-spacing:.06em}
@media(min-width:900px){.tl{display:block}.logo-img{width:min(280px,30vw)}}
.burger{background:none;border:2px solid var(--sp);border-radius:3px;padding:8px 14px;font:700 15px var(--head);color:var(--sp);cursor:pointer}
#menu{display:none;background:var(--sp);color:#fff}#menu.open{display:block}
.barin{padding-top:6px;padding-bottom:14px}
.navlist{list-style:none;margin:0;padding:0}.navlist a{display:block;padding:10px 0;font:700 15px var(--head);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:#fff;border-bottom:3px solid transparent}
.navlist a:hover,.navlist .current-menu-item>a,.navlist .current-cat>a{border-color:#fff}
.sf{display:flex;gap:6px;margin-top:8px}.sf input{flex:1}
@media(min-width:900px){.burger{display:none}#menu,#menu.open{display:block}.barin{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:0;padding-bottom:0}.navlist{display:flex;gap:28px}.navlist a{padding:14px 0 11px}.sf{margin:0;width:240px}}
input,textarea{font:inherit;font-size:16px;padding:9px 12px;border:1px solid #8a8f93;border-radius:3px;background:#fff;color:var(--ink);width:100%}
.btn{display:inline-block;background:var(--red);color:#fff;font:700 16px var(--head);padding:9px 18px;border:0;border-radius:3px;text-decoration:none;cursor:pointer;width:auto}.btn:hover{background:var(--red-d)}.btn.o{background:none;color:var(--ink);border:2px solid var(--ink)}
.k{display:inline-block;background:var(--sp);color:#fff;font:700 12px var(--head);letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:3px;text-decoration:none}.k:hover{background:var(--sp-d)}
.meta{font:400 14px var(--head);color:var(--mut)}
.sign{display:block;background:var(--sp);color:#fff;font:800 19px/1.2 var(--head);padding:14px 16px;border-radius:6px;box-shadow:inset 0 0 0 3px var(--sp),inset 0 0 0 5px #fff;text-decoration:none}.sign small{display:block;font:400 13px var(--head);margin-top:4px}.sign:hover{background:var(--sp-d)}
.ph{aspect-ratio:3/2;width:100%;background:#D5E0DA;border:1px solid var(--line)}.ph-local-businesses{background:#E6DDD0}.ph-food-drink{background:#EFD9D2}.ph-living{background:#D6E0E6}.ph-stories{background:#E3E1D6}
.thumb{display:block}.thumb img{aspect-ratio:3/2;object-fit:cover;width:100%}
.hero{display:grid;gap:32px;padding:36px 0 40px}.hero h1{font-size:clamp(34px,5vw,58px);margin:12px 0}.hero h1 a{text-decoration:none}.hero h1 a:hover{color:var(--red)}.hero .ex{font-size:20px;margin:0 0 8px}
.hero .thumb{margin-bottom:16px}
.plates{display:grid;gap:12px;grid-template-columns:1fr 1fr;align-content:start}
@media(min-width:960px){.hero{grid-template-columns:1.7fr 1fr;gap:48px}}
.sh{font:800 14px var(--head);letter-spacing:.1em;text-transform:uppercase;border-top:4px solid var(--ink);padding-top:10px;margin:0 0 16px}
.cards{display:grid;gap:40px 28px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));margin-bottom:56px}
.post{border-top:3px solid var(--ink);padding-top:14px}.post .thumb{margin-bottom:12px}.post h2{font-size:clamp(21px,2.4vw,25px);margin:8px 0}.post h2 a{text-decoration:none}.post h2 a:hover{color:var(--red)}.post p{margin:0 0 8px;font-size:17px;line-height:1.55}
.pagination{margin:0 0 56px}.nav-links{display:flex;gap:8px;flex-wrap:wrap}.page-numbers{padding:6px 14px;border:2px solid var(--ink);text-decoration:none;font:700 15px var(--head);background:#fff}.page-numbers.current{background:var(--ink);color:#fff}
.art{max-width:720px;margin:0 auto;padding:36px 0 24px}.art h1{font-size:clamp(34px,5vw,50px)}.stand{font-size:21px;color:var(--mut)}.crumb{font:400 14px var(--head);color:var(--mut)}.crumb a{color:var(--mut)}
.entry h2{font-size:28px;margin-top:1.5em}.entry img{border-radius:3px}.entry blockquote{border-left:4px solid var(--red);margin:1.5em 0;padding:0 0 0 20px}
.demo{background:#fff;border-left:4px solid var(--sp);padding:8px 14px;font:400 15px var(--head);margin:16px 0}
figure{margin:24px 0}figcaption{font:400 13px var(--head);color:var(--mut)}
.rel{max-width:1264px;margin:0 auto;padding:0 var(--g) 56px}.relg{display:grid;gap:28px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.relg h3{font-size:22px;margin-top:8px}.relg h3 a{text-decoration:none}
footer.ft{background:#fff;border-top:6px solid var(--sp);padding:36px 0;font:400 16px/1.6 var(--head);margin-top:24px}footer.ft .w{display:grid;gap:24px}@media(min-width:768px){footer.ft .w{grid-template-columns:1.2fr 1fr}}
footer.ft ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 22px}footer.ft .logo-img{width:200px}
.alignleft{float:left;margin:0 20px 10px 0}.alignright{float:right;margin:0 0 10px 20px}.aligncenter{margin:0 auto}