/* Whitney Lamphere — personal site */
:root{
  --paper:#F4EFE6;
  --card:#FBF8F2;
  --ink:#211C16;
  --muted:#6E6457;
  --accent:#B0613A;
  --accent-deep:#8F4D2D;
  --line:rgba(33,28,22,.14);
  --line-soft:rgba(33,28,22,.08);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Mulish',sans-serif;font-size:18px;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
.serif{font-family:'Fraunces',serif;}

.wrap{max-width:1180px;margin:0 auto;padding:0 36px;}
.narrow{max-width:740px;margin:0 auto;padding:0 36px;}

/* ---- header ---- */
.site-header{
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
  background:rgba(244,239,230,.92);backdrop-filter:blur(8px);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:22px;padding-bottom:22px;
}
.brand{
  font-family:'Fraunces',serif;font-size:23px;font-weight:500;
  letter-spacing:.01em;color:var(--ink);
}
.brand span{color:var(--accent);}
.nav{display:flex;gap:34px;align-items:center;}
.nav a{
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--muted);transition:color .15s;
}
.nav a:hover,.nav a.active{color:var(--accent);}

/* ---- hero ---- */
.hero{padding:88px 0 96px;}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;
}
.eyebrow{
  font-size:13px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin-bottom:26px;
}
.hero h1{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:68px;line-height:1.04;letter-spacing:-.01em;margin-bottom:28px;
}
.hero h1 em{font-style:italic;color:var(--accent-deep);}
.hero p.lead{font-size:21px;color:var(--muted);margin-bottom:34px;max-width:30em;}
.hero-portrait{
  position:relative;
}
.hero-portrait img{
  width:100%;border-radius:3px;
  box-shadow:0 40px 70px -40px rgba(33,28,22,.5);
}
.hero-portrait .tag{
  position:absolute;bottom:-22px;left:-22px;background:var(--ink);
  color:var(--paper);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;padding:14px 22px;border-radius:2px;
}

/* ---- buttons / links ---- */
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-size:14px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:16px 30px;border-radius:2px;transition:background .15s;
}
.btn:hover{background:var(--accent-deep);}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn.ghost:hover{background:var(--ink);color:var(--paper);}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;}
.txtlink{
  color:var(--accent);font-weight:700;border-bottom:1px solid var(--accent);
  padding-bottom:1px;
}
.txtlink:hover{color:var(--accent-deep);border-color:var(--accent-deep);}

/* ---- section scaffolding ---- */
.section{padding:84px 0;}
.section.tight{padding:60px 0;}
.section-head{margin-bottom:48px;}
.section-head .eyebrow{margin-bottom:18px;}
.section-head h2{
  font-family:'Fraunces',serif;font-weight:400;font-size:42px;
  line-height:1.1;letter-spacing:-.01em;
}
.section.alt{background:var(--card);border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);}

/* ---- what I do ---- */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.svc h3{font-family:'Fraunces',serif;font-weight:500;font-size:23px;margin-bottom:12px;}
.svc .num{font-size:13px;letter-spacing:.2em;font-weight:700;color:var(--accent);
  margin-bottom:16px;}
.svc p{color:var(--muted);font-size:16.5px;}

/* ---- writing list ---- */
.post-list{border-top:1px solid var(--line);}
.post-item{
  display:grid;grid-template-columns:160px 1fr auto;gap:32px;align-items:baseline;
  padding:30px 0;border-bottom:1px solid var(--line);transition:padding-left .15s;
}
.post-item:hover{padding-left:10px;}
.post-item .date{font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--muted);}
.post-item h3{font-family:'Fraunces',serif;font-weight:400;font-size:27px;line-height:1.25;}
.post-item .arrow{color:var(--accent);font-size:20px;}
.post-item p.excerpt{grid-column:2/3;color:var(--muted);font-size:16px;margin-top:8px;}

/* ---- figure ---- */
figure{margin:0;}
.figure-full img{width:100%;border-radius:3px;}
.figcap{font-size:13.5px;color:var(--muted);margin-top:12px;font-style:italic;}
.photo-band{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.photo-band img{width:100%;height:280px;object-fit:cover;border-radius:3px;}

/* ---- split block ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split.rev .split-text{order:2;}
.split-text h2{font-family:'Fraunces',serif;font-weight:400;font-size:38px;
  line-height:1.12;margin-bottom:22px;}
.split-text p{color:var(--muted);margin-bottom:18px;}
.split img{width:100%;border-radius:3px;box-shadow:0 30px 60px -42px rgba(33,28,22,.5);}

/* ---- article ---- */
.article-head{padding:80px 0 50px;text-align:center;border-bottom:1px solid var(--line);}
.article-head .date{font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin-bottom:22px;}
.article-head h1{font-family:'Fraunces',serif;font-weight:400;font-size:50px;
  line-height:1.1;letter-spacing:-.01em;max-width:16em;margin:0 auto;}
.article-body{padding:56px 0 30px;}
.article-body p{margin-bottom:24px;}
.article-body h2{font-family:'Fraunces',serif;font-weight:500;font-size:29px;
  margin:46px 0 16px;line-height:1.2;}
.article-body p.standfirst{font-size:22px;color:var(--muted);
  font-family:'Fraunces',serif;font-style:italic;line-height:1.5;margin-bottom:34px;}
.article-body blockquote{
  border-left:3px solid var(--accent);padding-left:26px;margin:34px 0;
  font-family:'Fraunces',serif;font-style:italic;font-size:23px;color:var(--ink);
}
.article-foot{border-top:1px solid var(--line);padding:40px 0 0;margin-top:40px;}
.byline{display:flex;align-items:center;gap:16px;margin-top:14px;}
.byline img{width:54px;height:54px;border-radius:50%;object-fit:cover;}
.byline .nm{font-weight:700;}
.byline .rl{font-size:14px;color:var(--muted);}

/* ---- now page entries ---- */
.now-entry{padding:30px 0;border-bottom:1px solid var(--line);}
.now-entry h3{font-family:'Fraunces',serif;font-weight:500;font-size:22px;
  margin-bottom:8px;color:var(--accent-deep);}
.now-entry p{color:var(--muted);}

/* ---- contact ---- */
.contact-card{
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:48px;text-align:center;
}
.contact-card .em{font-family:'Fraunces',serif;font-size:30px;margin:18px 0;}

/* ---- footer ---- */
.site-footer{background:var(--ink);color:#D8CFC0;margin-top:0;}
.site-footer .wrap{padding-top:72px;padding-bottom:48px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;}
.foot-brand .fb-name{font-family:'Fraunces',serif;font-size:25px;color:var(--paper);
  margin-bottom:16px;}
.foot-brand p{font-size:15px;color:#A89C8A;max-width:30em;}
.foot-col h4{font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:18px;}
.foot-col a{display:block;font-size:15px;color:#D8CFC0;padding:6px 0;transition:color .15s;}
.foot-col a:hover{color:#fff;}
.foot-base{border-top:1px solid rgba(255,255,255,.1);margin-top:54px;padding-top:26px;
  display:flex;justify-content:space-between;font-size:13px;color:#8A7E6C;}

/* ---- responsive ---- */
@media(max-width:860px){
  body{font-size:17px;}
  .wrap,.narrow{padding:0 24px;}
  .nav{gap:18px;}
  .nav a{font-size:12px;letter-spacing:.08em;}
  .brand{font-size:20px;}
  .hero{padding:54px 0 60px;}
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .hero-portrait{order:-1;}
  .hero h1{font-size:46px;}
  .cols3{grid-template-columns:1fr;gap:28px;}
  .split,.split.rev .split-text{grid-template-columns:1fr;}
  .split.rev .split-text{order:0;}
  .post-item{grid-template-columns:1fr;gap:6px;}
  .post-item .arrow{display:none;}
  .post-item p.excerpt{grid-column:1;}
  .photo-band{grid-template-columns:1fr 1fr;}
  .photo-band img{height:200px;}
  .section{padding:56px 0;}
  .section-head h2,.split-text h2{font-size:31px;}
  .article-head h1{font-size:34px;}
  .foot-grid{grid-template-columns:1fr;gap:34px;}
  .foot-base{flex-direction:column;gap:8px;}
  .contact-card{padding:30px;}
}