/*
Theme Name: 13 Cupcakes Exact
Theme URI: https://13cupcakes.com
Description: WordPress homepage matching the approved 13 Cupcakes mock-up.
Version: 1.0
Text Domain: thirteen-cupcakes-exact
*/

:root{
  --pink:#b31f4d;
  --ink:#101010;
  --line:#dddddd;
  --light:#f8f2f4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#fff;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(100% - 64px, 1400px);margin:0 auto}

/* black bar */
.topbar{background:#000;color:#fff}
.topbar .wrap{
  min-height:42px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600;
}
.toplinks{display:flex;gap:28px;align-items:center}
.toplinks a{text-decoration:none}

/* masthead */
.masthead{background:#fff}
.mastrow{
  min-height:110px;
  display:grid;
  grid-template-columns:90px 1fr 180px;
  align-items:center;
}
.searchicon{font-size:31px;font-weight:300}
.brand{text-align:center}
.brand a{
  text-decoration:none;
  font-family:"Times New Roman",Georgia,serif;
  font-size:64px;
  line-height:.9;
  letter-spacing:.05em;
  font-weight:400;
  text-transform:uppercase;
}
.brand small{
  display:block;
  margin-top:10px;
  color:var(--pink);
  text-transform:uppercase;
  letter-spacing:.19em;
  font-size:12px;
}
.subscribe{
  justify-self:end;
  border:1px solid #777;border-radius:99px;
  padding:10px 17px;
  text-transform:uppercase;letter-spacing:.08em;
  text-decoration:none;font-size:12px;
}
.nav{
  border-bottom:1px solid #ddd;
}
.nav .wrap{
  display:flex;justify-content:center;gap:54px;align-items:center;
  min-height:60px;
}
.nav a{
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:13px;
  font-weight:600;
}
.nav a span{font-size:9px;margin-left:5px}

/* hero */
.hero{background:#fff}
.hero .wrap{
  display:grid;
  grid-template-columns:34% 66%;
  min-height:470px;
}
.herocopy{
  padding:58px 32px 45px 12px;
  display:flex;flex-direction:column;justify-content:center;
}
.herocopy h1{
  margin:0;
  font-family:"Times New Roman",Georgia,serif;
  font-size:62px;
  line-height:.95;
  letter-spacing:.01em;
  font-weight:400;
  text-transform:uppercase;
}
.pinkline{width:45px;height:1px;background:var(--pink);margin:26px 0}
.herocopy p{
  font-size:17px;line-height:1.5;max-width:300px;margin:0 0 30px;
}
.button{
  display:inline-block;width:max-content;
  background:var(--pink);color:#fff;text-decoration:none;
  padding:16px 28px;text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700;
}
.heroimage{overflow:hidden}
.heroimage img{width:100%;height:100%;object-fit:cover}

/* latest */
.latest{padding:22px 0 26px}
.sectionhead{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.sectionhead h2{
  margin:0;text-transform:uppercase;letter-spacing:.18em;font-size:15px;white-space:nowrap
}
.sectionline{height:1px;background:#ccc;flex:1}
.sectionhead a{
  text-decoration:none;color:var(--pink);
  text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:700;white-space:nowrap
}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{text-align:center;text-decoration:none}
.card img{width:100%;aspect-ratio:1.11/1;object-fit:cover}
.cat{
  color:var(--pink);text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;font-weight:700;margin-top:13px
}
.card h3{
  font-family:"Times New Roman",Georgia,serif;
  font-size:23px;line-height:1.05;font-weight:400;margin:8px 12px 11px;
}
.card p{font-size:13px;line-height:1.45;color:#333;margin:0 22px 14px}
.read{color:var(--pink);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700}

/* why / trending */
.lower{padding:12px 0 0}
.lowergrid{
  display:grid;grid-template-columns:31% 43% 26%;
}
.why{
  background:#090909;color:#fff;padding:34px 28px;
  display:flex;flex-direction:column;justify-content:center;
}
.why .label{
  text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:700
}
.whyline{width:35px;height:1px;background:var(--pink);margin:18px 0}
.why h3{
  font-family:"Times New Roman",Georgia,serif;
  font-size:35px;line-height:1.05;font-weight:400;margin:0 0 22px
}
.why h3 em{font-style:italic}
.why p{font-size:13px;line-height:1.55;color:#eee;margin:0 0 24px}
.why a{
  color:#e44373;text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:700
}
.feature img{width:100%;height:100%;object-fit:cover}
.trending{background:#f7f7f7;padding:30px 27px}
.trending h3{
  margin:0;text-transform:uppercase;letter-spacing:.16em;font-size:14px
}
.trendline{width:36px;height:1px;background:var(--pink);margin:17px 0}
.trending ol{list-style:none;margin:0;padding:0}
.trending li{
  display:grid;grid-template-columns:32px 1fr;gap:9px;
  border-bottom:1px solid #ddd;padding:13px 0;font-size:12px;line-height:1.25
}
.num{font-family:"Times New Roman",serif;color:var(--pink);font-size:18px}

/* newsletter */
.news{
  background:#f8f1f3;
  padding:30px 0;
}
.news .wrap{display:grid;grid-template-columns:180px 1fr 460px;align-items:center;gap:20px}
.envelope{font-size:64px;text-align:center}
.newstext h3{
  margin:0 0 8px;text-transform:uppercase;letter-spacing:.14em;font-size:16px
}
.newstext p{margin:0;font-size:12px}
.form{display:flex}
.form input{flex:1;border:1px solid #ddd;padding:15px 17px}
.form button{
  border:0;background:var(--pink);color:#fff;
  padding:0 32px;text-transform:uppercase;letter-spacing:.09em;font-size:12px;font-weight:700
}
footer{padding:26px 0;text-align:center;font-size:12px;color:#666}

/* inner pages */
.content{width:min(100% - 40px,760px);margin:60px auto}
.content h1{
  font-family:"Times New Roman",Georgia,serif;
  font-size:54px;font-weight:400;line-height:1;margin:0 0 24px
}
.content p{font-size:17px;line-height:1.7}
.content a{color:var(--pink)}

/* responsive */
@media(max-width:950px){
  .wrap{width:min(100% - 28px,1400px)}
  .topbar .wrap{display:block;padding:11px 0}
  .toplinks{margin-top:8px;flex-wrap:wrap}
  .mastrow{grid-template-columns:1fr auto;min-height:90px}
  .searchicon,.subscribe{display:none}
  .brand{text-align:left}
  .brand a{font-size:43px}
  .nav .wrap{justify-content:flex-start;overflow:auto;gap:25px}
  .hero .wrap{grid-template-columns:1fr}
  .herocopy{padding:42px 12px 30px}
  .heroimage{min-height:380px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .lowergrid{grid-template-columns:1fr}
  .feature{max-height:450px}
  .news .wrap{grid-template-columns:1fr}
  .envelope{text-align:left}
}
@media(max-width:560px){
  .brand a{font-size:35px}
  .brand small{font-size:9px}
  .herocopy h1{font-size:48px}
  .cards{grid-template-columns:1fr}
}