/* Beverly Hills Beauty Notes - editorial serif theme */
:root{
  --ivory:#f7f2ea;
  --paper:#fffdf9;
  --espresso:#2c2420;
  --ink:#3d332d;
  --muted:#7b6d63;
  --taupe:#9c7a63;
  --rose:#b08a76;
  --gold:#c6a765;
  --line:#e4dccf;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:"Jost","Century Gothic",system-ui,sans-serif;
  font-size:17px;
  line-height:1.72;
  font-weight:300;
  letter-spacing:.1px;
}
h1,h2,h3,.brand,.kicker,.byline b{
  font-family:"Cormorant Garamond","Georgia",serif;
}
a{color:var(--taupe);text-decoration:none}
a:hover{color:var(--espresso)}
img{max-width:100%}

/* header */
.top{
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.top-inner{
  max-width:900px;margin:0 auto;padding:26px 24px 20px;
  text-align:center;
}
.brand{
  display:inline-block;
  font-size:30px;font-weight:600;letter-spacing:1.5px;
  color:var(--espresso);line-height:1.1;
}
.brand span{display:block;font-family:"Jost",sans-serif;font-size:10.5px;
  letter-spacing:4px;text-transform:uppercase;color:var(--taupe);
  font-weight:400;margin-top:8px}
nav{margin-top:18px}
nav a{
  font-size:12px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);margin:0 14px;font-weight:400;
}
nav a:hover{color:var(--taupe)}

/* layout */
main{max-width:720px;margin:0 auto;padding:54px 24px 30px}
.wide{max-width:840px}

/* home hero */
.lede{
  text-align:center;border-bottom:1px solid var(--line);
  padding-bottom:40px;margin-bottom:44px;
}
.lede .kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;
  color:var(--gold);font-family:"Jost",sans-serif;font-weight:400}
.lede h1{font-size:44px;font-weight:500;line-height:1.12;margin:16px 0 14px;
  color:var(--espresso);letter-spacing:.3px}
.lede p{max-width:520px;margin:0 auto;color:var(--muted);font-size:16px}

/* post list */
.entry{border-bottom:1px solid var(--line);padding:30px 0}
.entry:last-child{border-bottom:none}
.entry .meta{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--gold);font-family:"Jost",sans-serif}
.entry h2{font-size:28px;font-weight:500;line-height:1.2;margin:10px 0 8px}
.entry h2 a{color:var(--espresso)}
.entry h2 a:hover{color:var(--taupe)}
.entry p{margin:0 0 12px;color:var(--ink)}
.readon{font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--taupe);font-family:"Jost",sans-serif}

/* article */
article .kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;
  color:var(--gold);font-family:"Jost",sans-serif;text-align:center;display:block}
article h1{font-size:38px;font-weight:500;line-height:1.15;
  text-align:center;margin:14px 0 18px;color:var(--espresso)}
.byline{text-align:center;color:var(--muted);font-size:13px;
  letter-spacing:.4px;margin-bottom:8px}
.byline b{color:var(--ink);font-weight:600;font-size:15px}
.rule{width:56px;height:1px;background:var(--gold);margin:26px auto 34px;border:none}
article h2{font-size:26px;font-weight:500;margin:38px 0 12px;color:var(--espresso)}
article p{margin:0 0 20px}
article ul{margin:0 0 22px;padding-left:20px}
article li{margin-bottom:9px}
.pull{
  border-left:2px solid var(--gold);padding:4px 0 4px 22px;margin:30px 0;
  font-family:"Cormorant Garamond",serif;font-size:23px;font-style:italic;
  color:var(--espresso);line-height:1.4;
}
.endnote{border-top:1px solid var(--line);margin-top:44px;padding-top:22px;
  color:var(--muted);font-size:14px}

/* about + contact */
.card{background:var(--paper);border:1px solid var(--line);
  padding:38px 34px;border-radius:2px}
.author-row{display:flex;gap:26px;align-items:center;margin-bottom:8px}
.avatar{width:96px;height:96px;border-radius:50%;flex:0 0 96px;
  background:linear-gradient(135deg,#e9d9c4,#c9a86a);
  display:flex;align-items:center;justify-content:center;
  font-family:"Cormorant Garamond",serif;font-size:38px;color:#fff}
.contact-list{list-style:none;padding:0;margin:20px 0 0}
.contact-list li{margin-bottom:14px;font-size:15px}
.contact-list span{display:block;font-size:11px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--gold);margin-bottom:2px;
  font-family:"Jost",sans-serif}

/* footer */
footer{border-top:1px solid var(--line);background:var(--paper);
  margin-top:60px}
.foot-inner{max-width:720px;margin:0 auto;padding:30px 24px;
  text-align:center;color:var(--muted);font-size:12.5px;letter-spacing:.4px}
.foot-inner .brand-sm{font-family:"Cormorant Garamond",serif;
  font-size:18px;color:var(--espresso);letter-spacing:1px;display:block;
  margin-bottom:8px}
.foot-inner a{color:var(--muted)}
.foot-inner nav{margin-top:12px}
.foot-inner nav a{font-size:11px}

@media(max-width:640px){
  .lede h1{font-size:34px}
  article h1{font-size:30px}
  .brand{font-size:25px}
  nav a{margin:0 8px}
  .author-row{flex-direction:column;text-align:center}
  main{padding:38px 20px 20px}
}