:root{
  --ivory:#f6f1e7;
  --paper:#fbf8f2;
  --ink:#1f1d19;
  --muted:#6e685e;
  --gold:#a88746;
  --line:#d8cdb9;
  --navy:#0e2d54;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:#ffffff;
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.shell{width:min(var(--max),calc(100% - 40px));margin:0 auto}
.shell-narrow{width:min(800px,calc(100% - 40px));margin:0 auto}
.site-header{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.header-inner{text-align:center;padding:30px 0 22px}
.brand{
  display:block;
  color:var(--gold);
  font:600 13px/1.2 Arial,sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.journal-title{
  display:block;
  margin-top:8px;
  font-size:52px;
  line-height:1;
  color:var(--navy);
}
.tagline{
  margin:12px auto 0;
  color:var(--muted);
  font:400 14px/1.5 Arial,sans-serif;
  letter-spacing:.03em;
}
.gold-rule{width:74px;height:1px;background:var(--gold);margin:20px auto}
.nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px 24px;
  font:500 11px/1.4 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.nav a{padding-bottom:5px;border-bottom:1px solid transparent}
.nav a:hover{color:var(--gold);border-bottom-color:var(--gold)}

.intro{text-align:center;padding:62px 0 38px}
.intro h1{
  margin:0;
  color:var(--navy);
  font-size:42px;
  line-height:1.12;
  font-weight:400;
}
.intro p{
  max-width:700px;
  margin:18px auto 0;
  color:var(--muted);
  font:400 16px/1.75 Arial,sans-serif;
}

.posts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  padding-bottom:68px;
}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}
.card-image{
  display:block;
  aspect-ratio:4/3;
  background:linear-gradient(135deg,#e9dfcd,#f8f4eb);
  overflow:hidden;
}
.card-image img{width:100%;height:100%;object-fit:cover}
.card-body{
  padding:22px 24px 24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.eyebrow{
  color:var(--gold);
  font:600 10px/1.4 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.15em;
}
.card h2{
  margin:8px 0 10px;
  color:var(--navy);
  font-size:24px;
  line-height:1.16;
  font-weight:400;
}
.card p{
  margin:0 0 18px;
  color:var(--muted);
  font:400 14px/1.65 Arial,sans-serif;
}
.read-more{
  margin-top:auto;
  color:var(--gold);
  font:600 11px/1.4 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.article{padding:68px 0 80px}
.article-header{text-align:center}
.article h1{
  margin:10px auto 14px;
  color:var(--navy);
  font-size:52px;
  line-height:1.08;
  font-weight:400;
}
.standfirst{
  max-width:680px;
  margin:0 auto 14px;
  color:var(--muted);
  font:400 18px/1.65 Arial,sans-serif;
}
.meta{
  color:var(--muted);
  font:500 10px/1.4 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.hero-image{margin:38px 0 42px}
.hero-image img{width:100%}
.article-body{font-size:18px;line-height:1.85}
.article-body p{margin:0 0 1.45em}
.article-body h2{
  margin:1.7em 0 .55em;
  color:var(--navy);
  font-size:34px;
  line-height:1.15;
  font-weight:400;
}
.article-body blockquote{
  margin:36px 0;
  padding-left:24px;
  border-left:2px solid var(--gold);
  color:#3a342b;
  font-size:26px;
  line-height:1.4;
}
.article-cta{
  margin-top:54px;
  padding:34px;
  background:var(--paper);
  border:1px solid var(--line);
  text-align:center;
}
.article-cta h2{margin:0 0 8px;color:var(--navy);font-size:30px;font-weight:400}
.article-cta p{margin:0 auto 20px;max-width:600px;color:var(--muted);font:400 14px/1.7 Arial,sans-serif}

.button{
  display:inline-block;
  border:1px solid var(--gold);
  padding:13px 21px;
  color:var(--ink);
  font:600 10px/1.4 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.button:hover{background:var(--gold);color:white}

.site-footer{background:var(--paper);border-top:1px solid var(--line)}
.footer-inner{text-align:center;padding:42px 0 46px}
.footer-brand{color:var(--navy);font-size:28px}
.footer-inner>p{
  max-width:700px;
  margin:10px auto 20px;
  color:var(--muted);
  font:400 13px/1.7 Arial,sans-serif;
}
.footer-links{
  margin-top:22px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px 20px;
  font:500 10px/1.4 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.11em;
}

.empty-state{padding:0 0 80px;text-align:center;color:var(--muted)}

@media (max-width:760px){
  .shell,.shell-narrow{width:min(100% - 30px,var(--max))}
  .header-inner{padding:23px 0 18px}
  .journal-title{font-size:38px}
  .tagline{font-size:13px}
  .nav{gap:8px 14px;font-size:9px}
  .intro{padding:44px 0 28px}
  .intro h1{font-size:34px}
  .intro p{font-size:14px}
  .posts{grid-template-columns:1fr;gap:20px;padding-bottom:50px}
  .card-body{padding:23px}
  .card h2{font-size:27px}
  .article{padding:46px 0 58px}
  .article h1{font-size:38px}
  .standfirst{font-size:16px}
  .article-body{font-size:17px;line-height:1.78}
  .article-body h2{font-size:29px}
  .article-body blockquote{font-size:23px}
}


.post-nav{
  margin:52px 0 0;
  padding:24px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
}
.post-nav-item a{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.post-nav-prev{text-align:left}
.post-nav-next{text-align:right}
.post-nav-next a{align-items:flex-end}
.post-nav-label,
.post-nav-home a{
  color:var(--gold);
  font:600 10px/1.4 Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.13em;
}
.post-nav-title{
  color:var(--navy);
  font-size:18px;
  line-height:1.25;
}
.post-nav-home{
  text-align:center;
  white-space:nowrap;
}
.post-nav a:hover .post-nav-title,
.post-nav-home a:hover{color:var(--ink)}

@media (max-width:760px){
  .post-nav{
    grid-template-columns:1fr 1fr;
    gap:18px 14px;
  }
  .post-nav-home{
    grid-column:1 / -1;
    grid-row:1;
  }
  .post-nav-prev{grid-column:1}
  .post-nav-next{grid-column:2}
  .post-nav-title{font-size:16px}
}


/* Dapper Diaries card grid */
@media (max-width: 980px){
  .posts{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width: 640px){
  .posts{
    grid-template-columns:1fr;
    gap:20px;
  }
  .card-body{padding:20px;}
  .card h2{font-size:23px;}
}