/* Shared chrome + article typography for the Journal (blog) section.
   One stylesheet because every post and the index share near-identical
   structure — unlike the product pages, which are each one-offs. */

:root{
  --paper:#F7F4EE;
  --paper-2:#F1ECE2;
  --ink:#211E19;
  --ink-dim: rgba(33,30,25,0.62);
  --stone:#B9AE9A;
  --line: rgba(33,30,25,0.12);
  --whisper:#8C7F68;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Jost', sans-serif; font-weight:300;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1240px; margin:0 auto; padding:0 40px;}
.wrap-narrow{max-width:700px; margin:0 auto; padding:0 40px;}
.eyebrow{
  font-family:'Jost', sans-serif; font-weight:400; font-size:11px;
  letter-spacing:0.28em; text-transform:uppercase; color:var(--whisper); display:block;
}

header{ padding:26px 0; border-bottom:1px solid var(--line); background:rgba(247,244,238,0.92); backdrop-filter:blur(10px); position:sticky; top:0; z-index:50;}
nav{display:flex; align-items:center; justify-content:space-between; max-width:1240px; margin:0 auto; padding:0 40px;}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none;}
.logo-img{height:30px; width:auto; display:block;}
.brand-divider{width:1px; height:26px; background:var(--line);}
.brand-atelier{font-family:'Jost', sans-serif; font-weight:300; font-size:16px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink);}
.back{font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-dim); transition:color .2s ease;}
.back:hover{color:var(--ink);}

/* ---- Article shell ---- */
.post{padding:64px 0 120px;}
.post-meta{margin-bottom:56px;}
.post-meta .eyebrow{margin-bottom:18px;}
.post-meta h1{
  font-family:'Jost', sans-serif; font-weight:300; text-transform:uppercase;
  font-size:clamp(28px, 4.2vw, 46px); line-height:1.15; letter-spacing:0.01em; margin-bottom:20px;
}
.post-sub{font-size:16px; line-height:1.75; color:var(--ink-dim); max-width:56ch; margin-bottom:22px;}
.post-byline{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone); padding-top:22px; border-top:1px solid var(--line);}

.post-body{font-size:15.5px; line-height:1.9; color:var(--ink-dim);}
.post-body p{margin-bottom:24px;}
.post-body h2{
  font-family:'Jost', sans-serif; font-weight:400; text-transform:uppercase; color:var(--ink);
  font-size:clamp(19px, 2.4vw, 24px); letter-spacing:0.02em; line-height:1.3;
  margin:52px 0 20px;
}
.post-body h2:first-child{margin-top:0;}
.post-body h3{
  font-family:'Jost', sans-serif; font-weight:400; color:var(--ink);
  font-size:16.5px; letter-spacing:0.01em; margin:32px 0 14px;
}
.post-body ul, .post-body ol{margin:0 0 24px 22px;}
.post-body li{margin-bottom:10px; line-height:1.8;}
.post-body strong{color:var(--ink); font-weight:500;}
.post-body a{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line);}
.post-body a:hover{text-decoration-color:var(--ink);}
.post-body blockquote{
  margin:40px 0; padding:4px 0 4px 26px; border-left:2px solid var(--stone);
  font-size:18px; line-height:1.6; color:var(--ink); font-weight:300;
}

.post-cta{
  margin-top:56px; padding:40px; background:var(--paper-2); border:1px solid var(--line); text-align:center;
}
.post-cta h3{
  font-family:'Jost', sans-serif; font-weight:400; text-transform:uppercase; color:var(--ink);
  font-size:19px; letter-spacing:0.02em; margin-bottom:12px;
}
.post-cta p{font-size:14px; line-height:1.75; color:var(--ink-dim); max-width:48ch; margin:0 auto 24px;}
.btn{
  font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; padding:16px 30px;
  border:1px solid var(--ink); color:var(--ink); display:inline-block; text-decoration:none;
  transition:background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.btn:hover{background:var(--ink); color:var(--paper);}

.related{margin-top:64px; padding-top:40px; border-top:1px solid var(--line);}
.related .sub-head{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--stone); margin-bottom:20px;}
.related-links{display:flex; flex-direction:column; gap:14px;}
.related-links a{font-size:14.5px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:14px; display:block; transition:color .2s ease;}
.related-links a:hover{color:var(--whisper);}

/* ---- Index page ---- */
.journal-hero{padding:72px 0 56px; border-bottom:1px solid var(--line);}
.journal-hero h1{
  font-family:'Jost', sans-serif; font-weight:300; text-transform:uppercase;
  font-size:clamp(32px, 5vw, 56px); line-height:1.1; letter-spacing:0.01em; margin:18px 0 18px;
}
.journal-hero p{font-size:15.5px; line-height:1.8; color:var(--ink-dim); max-width:54ch;}

.post-list{padding:20px 0 120px;}
.post-row{
  display:grid; grid-template-columns:70px 1fr auto; gap:30px; align-items:start;
  padding:34px 0; border-bottom:1px solid var(--line); text-decoration:none;
}
.post-row .num{font-size:11px; letter-spacing:0.1em; color:var(--stone); padding-top:4px;}
.post-row h2{
  font-family:'Jost', sans-serif; font-weight:400; text-transform:uppercase; color:var(--ink);
  font-size:19px; letter-spacing:0.01em; line-height:1.4; margin-bottom:10px;
}
.post-row p{font-size:13.5px; line-height:1.7; color:var(--ink-dim); max-width:60ch;}
.post-row .read-more{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim); padding-top:4px; white-space:nowrap; transition:color .2s ease;}
.post-row:hover .read-more{color:var(--ink);}
.post-row:hover h2{color:var(--whisper);}

footer{padding:44px 0; border-top:1px solid var(--line);}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;}
footer span{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--stone);}

@media (max-width: 860px){
  nav{padding:0 22px;}
  .wrap, .wrap-narrow{padding:0 22px;}
  .post{padding:40px 0 80px;}
  .post-row{grid-template-columns:1fr; gap:10px;}
  .post-row .num{display:none;}
}