/*
Theme Name: BS Bad Art
Theme URI: https://bsbadart.com
Author: SLART
Description: Betty Swollocks. Deliberately bad art, true stories, deadpan British humour.
Version: 1.0
*/

:root{
  --ink:#111;
  --paper:#fff;
  --grey:#f4f4f4;
  --line:#e3e3e3;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Big Shoulders Display','Big Shoulders',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  font-size:20px;
  line-height:1.35;
}

/* ---------- header ---------- */
.site-header{
  border-bottom:3px solid var(--ink);
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  position:sticky;
  top:0;
  background:var(--paper);
  z-index:50;
}
.site-header .logo{width:62px;height:62px;flex:0 0 auto}
.site-header .logo img{width:100%;height:auto;display:block}
.brand{
  font-size:40px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:.95;
  text-decoration:none;
  color:var(--ink);
}
.brand small{display:block;font-size:15px;letter-spacing:.22em;font-weight:400}
.nav{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap}
.nav a{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:22px;
  text-decoration:none;
  color:var(--ink);
  border-bottom:3px solid transparent;
  padding-bottom:2px;
}
.nav a:hover,.nav a.on{border-bottom-color:var(--ink)}

/* ---------- hero ---------- */
.hero{
  padding:70px 20px 50px;
  text-align:center;
  max-width:900px;
  margin:0 auto;
}
.hero h1{
  font-size:clamp(48px,9vw,104px);
  line-height:.92;
  margin:0 0 18px;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.hero p{
  font-size:clamp(20px,2.4vw,27px);
  margin:0 auto;
  max-width:640px;
  line-height:1.3;
}
.hero .tag{
  display:inline-block;
  margin-top:26px;
  font-size:17px;
  letter-spacing:.24em;
  text-transform:uppercase;
  border:3px solid var(--ink);
  padding:9px 18px;
}

/* ---------- gallery ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 20px 70px}
.section-title{
  font-size:clamp(34px,5vw,58px);
  text-transform:uppercase;
  margin:56px 0 8px;
  letter-spacing:.01em;
}
.section-sub{margin:0 0 30px;font-size:20px;opacity:.72}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:22px;
}
.card{
  border:3px solid var(--ink);
  background:var(--paper);
  overflow:hidden;
  display:block;
  text-decoration:none;
  color:var(--ink);
}
.card img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover}
.card .cap{
  padding:12px 14px;
  font-size:19px;
  text-transform:uppercase;
  letter-spacing:.05em;
  border-top:3px solid var(--ink);
}

/* ---------- merch ---------- */
.merch{
  background:var(--ink);
  color:var(--paper);
  padding:64px 20px;
  text-align:center;
  margin-top:70px;
}
.merch h2{font-size:clamp(38px,6vw,72px);margin:0 0 14px;text-transform:uppercase}
.merch p{font-size:22px;max-width:600px;margin:0 auto 26px;opacity:.9}
.btn{
  display:inline-block;
  border:3px solid var(--paper);
  color:var(--paper);
  padding:13px 30px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:20px;
}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn-dark{border-color:var(--ink);color:var(--ink)}
.btn-dark:hover{background:var(--ink);color:var(--paper)}

/* ---------- pages ---------- */
.page-body{max-width:760px;margin:0 auto;padding:50px 20px 80px;font-size:21px;line-height:1.5}
.page-body h1{font-size:clamp(40px,7vw,76px);text-transform:uppercase;margin:0 0 22px}
.page-body p{margin:0 0 20px}
.page-body a{color:var(--ink)}

/* ---------- footer ---------- */
.site-footer{
  border-top:3px solid var(--ink);
  padding:34px 20px;
  text-align:center;
  font-size:17px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.site-footer .logo{width:46px;margin:0 auto 14px}
.site-footer .logo img{width:100%;display:block}
.site-footer a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink)}

/* ---------- single artwork ---------- */
.single-art{max-width:900px;margin:0 auto;padding:44px 20px 80px;text-align:center}
.single-art img{max-width:100%;height:auto;border:3px solid var(--ink)}
.single-art h1{font-size:clamp(34px,6vw,64px);text-transform:uppercase;margin:26px 0 10px}

@media(max-width:640px){
  .brand{font-size:31px}
  .nav{gap:16px;width:100%;margin-left:0;margin-top:8px}
  .nav a{font-size:19px}
  .site-header .logo{width:50px;height:50px}
}

/* woocommerce */
.woocommerce ul.products{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.woocommerce ul.products li.product{border:3px solid var(--ink);text-align:center;margin:0!important;width:auto!important;float:none!important}
.woocommerce ul.products li.product a img{margin:0;display:block;width:100%}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:22px!important;text-transform:uppercase;padding:12px 12px 2px!important}
.woocommerce ul.products li.product .price{font-size:22px;color:var(--ink)!important;display:block;padding:0 12px 10px}
.woocommerce a.button,.woocommerce button.button,.woocommerce ul.products li.product .button,.woocommerce #respond input#submit{background:var(--ink)!important;color:var(--paper)!important;border-radius:0!important;text-transform:uppercase;letter-spacing:.1em;font-family:inherit!important;font-size:18px!important;padding:12px 20px!important}
.woocommerce div.product .product_title{font-size:clamp(32px,5vw,58px);text-transform:uppercase}
.woocommerce div.product p.price{font-size:32px;color:var(--ink)!important}
.woocommerce div.product div.images{border:3px solid var(--ink)}

/* buy-first UX */
.hero-cta{margin:30px 0 12px}
.btn-big{font-size:24px;padding:17px 40px}
.hero-note{font-size:16px!important;letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-top:6px!important}
.nav a.buy{background:var(--ink);color:var(--paper);padding:6px 14px;border-bottom:none}
.nav a.buy:hover{background:#333}
.card .cap{font-size:17px}

/* ---------- A-Z name finder ---------- */
.azbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  padding:14px 0;
  margin:0 0 26px;
}
.azlabel{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:15px;
  opacity:.65;
  margin-right:10px;
}
.azbar .az{
  font-family:inherit;
  font-size:20px;
  line-height:1;
  text-transform:uppercase;
  background:none;
  border:3px solid transparent;
  color:var(--ink);
  padding:7px 11px;
  cursor:pointer;
  min-width:40px;
  min-height:40px;
}
.azbar button.az:hover{border-color:var(--ink)}
.azbar button.az.on{background:var(--ink);color:var(--paper)}
.azbar .az.off{opacity:.22;cursor:default}
.azcount{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:16px;
  opacity:.7;
  margin:-14px 0 22px;
}
@media(max-width:640px){
  .azbar{gap:4px;padding:12px 0}
  .azbar .az{font-size:18px;padding:6px 9px;min-width:36px;min-height:36px}
  .azlabel{width:100%;margin:0 0 6px}
}