:root{
  --ivory:#FAF6EF;
  --sand:#E8DCC9;
  --sand-deep:#DCC6AC;
  --blush:#E3C0B8;
  --blush-soft:#F0DAD4;
  --gold:#AD8A42;
  --gold-dark:#87692F;
  --charcoal:#2B2624;
  --taupe:#8B7967;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--ivory);
  color:var(--charcoal);
  font-family:'Lora', serif;
  -webkit-font-smoothing:antialiased;
}
.eyebrow{
  font-family:'Jost', sans-serif;
  letter-spacing:0.24em;
  text-transform:uppercase;
  font-size:10.5px;
  color:var(--gold-dark);
  font-weight:500;
}

/* topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 5vw; border-bottom:1px solid rgba(43,38,36,0.08);
}
.topbar .word{font-family:'Cormorant Garamond', serif; font-size:16px; letter-spacing:0.18em; font-weight:600; text-decoration:none; color:var(--charcoal);}
.topbar .tag{font-family:'Jost', sans-serif; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--taupe);}
.topbar nav{display:flex; gap:28px; font-family:'Jost', sans-serif; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;}
.topbar nav a{color:var(--charcoal); text-decoration:none; opacity:0.7;}
.topbar nav a.active{opacity:1; color:var(--gold-dark);}

/* page hero (listing) */
.journal-hero{padding:90px 24px 70px; text-align:center; max-width:680px; margin:0 auto;}
.journal-hero .eyebrow{display:block; margin-bottom:20px;}
.journal-hero h1{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(36px, 5vw, 58px); line-height:1.1; margin-bottom:20px;}
.journal-hero h1 em{font-style:italic; color:var(--gold-dark); font-weight:400;}
.journal-hero p{color:var(--taupe); font-size:16.5px; line-height:1.7;}

/* featured post (listing) */
.featured{max-width:1180px; margin:0 auto 90px; padding:0 24px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
.featured-img{aspect-ratio:4/5; background:linear-gradient(150deg, var(--sand), var(--blush-soft)); border-radius:2px; position:relative; overflow:hidden;}
.featured-img img{width:100%; height:100%; object-fit:cover; display:block;}
.featured-img .ph-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Jost', sans-serif; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--taupe); opacity:0.6;}
.featured-cat{font-family:'Jost', sans-serif; font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:16px; display:block;}
.featured h2{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(28px,3.4vw,42px); line-height:1.18; margin-bottom:18px;}
.featured p.excerpt{color:var(--taupe); font-size:16px; line-height:1.75; margin-bottom:22px;}
.featured .meta{font-family:'Jost', sans-serif; font-size:11px; letter-spacing:0.05em; color:var(--taupe); margin-bottom:20px;}
.read-link{font-family:'Jost', sans-serif; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-dark); text-decoration:none; border-bottom:1px solid var(--gold-dark); padding-bottom:3px;}

/* section head for index */
.section-head{max-width:1180px; margin:0 auto; padding:0 24px 30px; display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid rgba(43,38,36,0.12); margin-bottom:10px;}
.section-head h3{font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500; font-size:22px; color:var(--charcoal);}
.section-head .count{font-family:'Jost', sans-serif; font-size:11px; color:var(--taupe); letter-spacing:0.05em;}

/* ledger-style post index */
.post-index{max-width:1180px; margin:0 auto 100px; padding:0 24px;}
.post-row{display:grid; grid-template-columns:70px 1fr auto 140px; align-items:center; gap:24px; padding:26px 0; border-bottom:1px solid rgba(43,38,36,0.1); text-decoration:none; color:inherit;}
.post-row .idx{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:20px; color:var(--gold-dark);}
.post-row .titles{min-width:0;}
.post-row .cat{font-family:'Jost', sans-serif; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-dark); display:block; margin-bottom:6px;}
.post-row h4{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:23px; line-height:1.25;}
.post-row .dots{border-bottom:1px dotted rgba(43,38,36,0.25); align-self:end; margin-bottom:10px;}
.post-row .date{font-family:'Jost', sans-serif; font-size:11px; color:var(--taupe); white-space:nowrap; text-align:right;}

/* article head */
.article-head{max-width:760px; margin:0 auto; padding:80px 24px 40px; text-align:center;}
.article-head .eyebrow{display:block; margin-bottom:22px;}
.article-head h1{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:clamp(32px, 5vw, 52px); line-height:1.14; margin-bottom:24px;}
.article-head .meta{font-family:'Jost', sans-serif; font-size:11px; letter-spacing:0.08em; color:var(--taupe);}
.article-head .meta span{margin:0 8px;}

.hero-img{max-width:1100px; margin:0 auto 70px; padding:0 24px;}
.hero-img .box{aspect-ratio:16/9; background:linear-gradient(150deg, var(--sand), var(--blush-soft)); border-radius:2px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.hero-img .box img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-img .box span{font-family:'Jost', sans-serif; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--taupe); opacity:0.6;}

.article-body{max-width:680px; margin:0 auto; padding:0 24px 100px; font-size:18px; line-height:1.85; color:#3a332f;}
.article-body p{margin-bottom:28px;}
.article-body > p:first-of-type::first-letter{
  font-family:'Cormorant Garamond', serif; font-size:76px; font-weight:500; color:var(--gold-dark);
  float:left; line-height:0.8; margin:10px 12px 0 0;
}
.article-body h2{font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500; font-size:29px; color:var(--charcoal); margin:50px 0 22px;}
.article-body h3{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:22px; color:var(--charcoal); margin:36px 0 16px;}
.article-body blockquote{font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500; font-size:27px; line-height:1.5; color:var(--gold-dark); border-left:2px solid var(--gold); padding-left:28px; margin:44px 0;}
.article-body strong{color:var(--charcoal); font-weight:600;}
.article-body ul, .article-body ol{margin:0 0 28px 22px;}
.article-body li{margin-bottom:10px;}
.article-body table{width:100%; border-collapse:collapse; margin:30px 0; font-size:15px;}
.article-body th, .article-body td{border:1px solid rgba(43,38,36,0.15); padding:12px 14px; text-align:left; vertical-align:top;}
.article-body th{background:var(--sand); font-family:'Jost', sans-serif; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-dark);}
.article-body img{max-width:100%; border-radius:2px; margin:20px 0;}

/* ritual/ingredients callout box (structured CMS field) */
.ritual-callout{background:var(--sand); border-radius:2px; padding:32px 34px; margin:44px 0;}
.ritual-callout .eyebrow{display:block; margin-bottom:14px;}
.ritual-callout ul{list-style:none; margin:0;}
.ritual-callout li{font-family:'Lora', serif; font-size:16px; padding:10px 0; border-bottom:1px solid rgba(43,38,36,0.1); display:flex; justify-content:space-between; margin-bottom:0;}
.ritual-callout li:last-child{border-bottom:none;}
.ritual-callout li span.tag{font-family:'Jost', sans-serif; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold-dark);}

.byline{max-width:680px; margin:0 auto 80px; padding:0 24px; display:flex; align-items:center; gap:16px; padding-top:36px; border-top:1px solid rgba(43,38,36,0.12);}
.byline .avatar{width:44px; height:44px; border-radius:50%; background:var(--sand-deep); flex-shrink:0;}
.byline .name{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:17px; color:var(--charcoal);}
.byline .role{font-family:'Jost', sans-serif; font-size:10.5px; letter-spacing:0.05em; color:var(--taupe); text-transform:uppercase;}

.related{max-width:1180px; margin:0 auto 100px; padding:0 24px;}
.related h3{font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500; font-size:24px; margin-bottom:36px; text-align:center;}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.related-card{text-decoration:none; color:inherit;}
.related-card .img{aspect-ratio:4/5; background:linear-gradient(150deg, var(--blush-soft), var(--sand)); border-radius:2px; margin-bottom:16px; overflow:hidden;}
.related-card .img img{width:100%; height:100%; object-fit:cover; display:block;}
.related-card .cat{font-family:'Jost', sans-serif; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-dark); display:block; margin-bottom:8px;}
.related-card h4{font-family:'Cormorant Garamond', serif; font-weight:500; font-size:19px; line-height:1.3;}

/* newsletter CTA */
.journal-cta{background:var(--charcoal); color:var(--ivory); text-align:center; padding:100px 24px;}
.journal-cta .eyebrow{color:var(--blush); display:block; margin-bottom:18px;}
.journal-cta h2{font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500; font-size:clamp(26px,3.4vw,36px); max-width:520px; margin:0 auto 34px;}
.journal-cta form{display:flex; max-width:400px; margin:0 auto; border-bottom:1px solid var(--ivory); padding-bottom:12px;}
.journal-cta input{flex:1; background:transparent; border:none; outline:none; font-family:'Lora', serif; color:var(--ivory); font-size:15px;}
.journal-cta input::placeholder{color:rgba(250,246,239,0.5);}
.journal-cta button{font-family:'Jost', sans-serif; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; background:none; border:none; color:var(--ivory); cursor:pointer;}

footer{padding:50px 24px; text-align:center;}
footer .mi{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:18px; color:var(--gold-dark); margin-bottom:10px;}
footer .legal{font-family:'Jost', sans-serif; font-size:10px; color:#a89a8c;}

@media (max-width:820px){
  .featured{grid-template-columns:1fr;}
  .post-row{grid-template-columns:36px 1fr; row-gap:6px;}
  .post-row .dots{display:none;}
  .post-row .date{grid-column:2; text-align:left; order:3;}
  .related-grid{grid-template-columns:1fr;}
  .article-body{font-size:16.5px;}
}