/* Content pages: designers, about, contact, saved, 404, forms plugin */
/* .wrap.page only: WordPress also puts the class "page" on <body>, which must not get this padding */
.wrap.page{padding-bottom:clamp(56px,7vw,112px)}
.page__head{display:grid;gap:15px;padding:clamp(32px,5vw,72px) 0 24px}
.page__head .display{margin-top:4px}
.page__body{max-width:860px}
.page--shop .page__body{max-width:none}

.directory-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 0 16px}
.directory-find{display:flex;align-items:center;gap:10px;border-bottom:var(--hair) solid var(--mute);width:min(320px,100%)}
.directory-find:focus-within{border-color:var(--cobalt);border-bottom-width:2px}
.directory-find input:focus{outline:0}
.directory-find input{border:0;min-height:40px}
.directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.directory a{display:flex;justify-content:space-between;align-items:baseline;gap:15px;padding:18px var(--gut);background:var(--low);min-height:88px;transition:background .25s,color .25s}
.directory a:hover{background:var(--ink);color:var(--paper)}
.directory a:hover .label{color:var(--stone)}
.directory__name{font:700 clamp(1.1rem,1.6vw,1.5rem)/1 var(--display);font-stretch:118%;letter-spacing:-.005em;text-transform:uppercase}
.directory .label{color:var(--quiet);white-space:nowrap;transition:color .25s}
.directory__none{padding:32px 0;color:var(--mute)}
.letters{display:flex;flex-wrap:wrap;gap:10px;padding:0 0 20px}
.letters button{min-width:44px;min-height:44px;padding:0 10px;border:var(--hair) solid var(--mute);font:500 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.letters button:hover:not(:disabled){border-color:var(--cobalt);color:var(--cobalt)}
.letters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.letters button:disabled{color:var(--stone);border-color:var(--stone);cursor:not-allowed}

/* account dashboard: welcome line and three cards above the WooCommerce views */
.account-cards{display:grid;gap:20px;padding-bottom:40px;max-width:none}
.account-cards .lead{margin:0}
.account-cards__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.account-card{display:flex;flex-direction:column;gap:15px;min-height:200px;padding:24px;background:var(--low);transition:background .25s,color .25s}
.account-card:hover,.account-card:focus-visible{background:var(--ink);color:var(--paper)}
.account-card:hover .label,.account-card:focus-visible .label{color:var(--stone)}
.account-card__text{font:400 15px/22px var(--display);color:var(--mute);flex:1}
.account-card:hover .account-card__text{color:var(--stone)}
.account-card .tlink{align-self:flex-start;margin-top:auto}

.about__head{grid-template-columns:repeat(12,1fr);align-items:end;gap:var(--gut)}
.about__head>div{grid-column:1/7;display:grid;gap:15px}
.about__image{grid-column:8/13;aspect-ratio:4/5;background:var(--stone);overflow:hidden}
.about__image img{width:100%;height:100%;object-fit:cover;object-position:top}
.about__body{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);padding-top:24px}
.about__body>.label{grid-column:1/4}
.about__body>.prose{grid-column:4/11;display:grid;gap:15px;font:400 15px/26px var(--display);color:var(--mute)}
.about__body .title{color:var(--ink);margin-bottom:8px}

.places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut)}
.place{display:grid;gap:10px;align-content:start;padding:32px;background:var(--low)}
.place address{font-style:normal;color:var(--mute)}
.contact-lines{display:grid;gap:10px;padding:28px 0;border-bottom:var(--sep) solid var(--stone);margin-bottom:32px}
.band--plain{display:grid;grid-template-columns:1fr;justify-items:center;gap:15px;text-align:center;padding:clamp(40px,6vw,80px) var(--mar);margin-top:48px;background:var(--low)}
.empty__mark{display:grid;place-items:center;width:72px;height:72px;border:var(--hair) solid var(--mute)}

/* forms plugin (contact, newsletter) */
.rkf-panel{display:grid;gap:15px;max-width:640px}
.rkf-panel .eyebrow{font:600  12px/14px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.rkf-panel h2{font:700 clamp(1.5rem,2.2vw,2rem)/1.05 var(--display);font-stretch:118%;text-transform:uppercase}
.rkf-form{display:grid;gap:15px}
.rkf-field{display:grid;gap:4px}
.rkf-field label{font:600  12px/14px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.rkf-consent,.rkf-privacy{font-size:12px;color:var(--mute)}
.rkf-submit,.rkf-form button[type=submit]{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 32px;border:var(--hair) solid var(--mute);background:var(--ink);color:var(--paper);font:500 12px/16px var(--mono);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;width:fit-content;transition:background .2s,color .2s,border-color .2s}
.rkf-submit:hover,.rkf-form button[type=submit]:hover{background:var(--cobalt);border-color:var(--cobalt);color:var(--paper)}
.rkf-error{color:var(--error);font-size:12px}
.rkf-field:has(:required)>label::after{content:" *";color:var(--cobalt)}
.search--page{width:min(520px,100%);margin-top:8px}
.search--page input{font-size:clamp(20px,3vw,28px)}
.rkf-result{padding:16px 20px;border:0;border-left:12px solid var(--cobalt);background:var(--low)}
.rkf-trap{position:absolute;left:-9999px}

@media (max-width:1180px){
  .directory{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about__head>div,.about__image{grid-column:1/13}
  .about__body>.label,.about__body>.prose{grid-column:1/13}
}
@media (max-width:760px){
  .directory,.places,.account-cards__grid{grid-template-columns:1fr}
  .directory-bar{flex-direction:column;align-items:flex-start}
  .place{padding:20px}
}

/* designers directory: columns on each screen (Customizer) */
.directory{grid-template-columns:repeat(var(--n-d,3),minmax(0,1fr))}
@media (max-width:1180px){.directory{grid-template-columns:repeat(var(--n-t,2),minmax(0,1fr))}}
@media (max-width:760px){.directory{grid-template-columns:repeat(var(--n-m,1),minmax(0,1fr))}}
