/* ============================================================================
   JOURNAL — blog index + long-form article (loads after styles.css)
   Same Swiss/clinical system: black on white, single red accent, Helvetica + mono
   ============================================================================ */

/* solid header + offset (same chrome as store/product) */
body{ padding-top:46px; }
.site-header{ background:var(--bg); color:var(--ink); }
.site-header a, .site-header button{ color:var(--ink); }

.pback{ display:inline-flex; align-items:center; gap:9px; padding:26px var(--gut) 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.pback:hover{ color:var(--red); }
.pback .arw{ transition:transform .3s var(--ease); }
.pback:hover .arw{ transform:translateX(-4px); }

/* ===================================================================== INDEX */
.blog-top{ padding:clamp(40px,7vw,90px) var(--gut) clamp(28px,4vw,48px); border-bottom:1px solid var(--line); }
.blog-top .kick{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.blog-top h1{ font-weight:700; letter-spacing:-.045em; line-height:.86; text-transform:uppercase;
  font-size:clamp(54px,12vw,150px); margin-top:14px; }
.blog-top p{ max-width:54ch; margin-top:20px; color:var(--ink-soft); font-size:clamp(16px,2vw,19px); line-height:1.55; }

.post-list{ padding:clamp(30px,5vw,64px) var(--gut) clamp(60px,8vw,110px); }

/* featured (first) post */
.feat{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,56px); align-items:center;
  border:1px solid var(--ink); border-radius:20px; overflow:hidden; background:linear-gradient(160deg,#f6f5f2,#e7e4de);
  padding:clamp(26px,4vw,52px); margin-bottom:clamp(34px,5vw,64px); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.feat:hover{ transform:translateY(-3px); box-shadow:0 30px 60px -30px rgba(10,10,10,.4); }
.feat__tag{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.feat__tag b{ color:var(--ink-soft); font-weight:400; }
.feat h2{ font-weight:700; letter-spacing:-.035em; line-height:.96; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,60px); margin:16px 0 14px; }
.feat p{ color:var(--ink-soft); font-size:17px; line-height:1.55; max-width:48ch; }
.feat .more{ display:inline-flex; align-items:center; gap:9px; margin-top:22px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.feat .more .arw{ transition:transform .3s var(--ease); }
.feat:hover .more .arw{ transform:translateX(5px); color:var(--red); }
.feat__art{ position:relative; min-height:clamp(220px,28vw,360px); display:grid; place-items:center;
  background:radial-gradient(70% 70% at 50% 40%,#fff 0%,#eceae6 70%); border-radius:14px; overflow:hidden; }
.feat__art img{ width:min(48%,200px); filter:drop-shadow(0 30px 28px rgba(20,18,14,.24)); }
.feat__art .no{ position:absolute; top:14px; left:18px; font-weight:700; font-size:clamp(40px,7vw,86px);
  letter-spacing:-.04em; line-height:.8; color:rgba(10,10,10,.08); }

/* grid of the rest */
.posts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:clamp(18px,2.4vw,30px); }
.pcard{ border:1px solid var(--line); border-radius:16px; padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column;
  min-height:280px; transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease); }
.pcard:hover{ border-color:var(--ink); transform:translateY(-3px); background:#f4f3ef; }
.pcard__k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); }
.pcard__k b{ color:var(--ink-soft); font-weight:400; }
.pcard h3{ font-weight:700; letter-spacing:-.03em; line-height:1.02; text-transform:uppercase;
  font-size:clamp(20px,2.3vw,27px); margin:14px 0 12px; }
.pcard p{ color:var(--ink-soft); font-size:15px; line-height:1.5; }
.pcard .more{ margin-top:auto; padding-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); display:inline-flex; gap:8px; align-items:center; }
.pcard:hover .more{ color:var(--red); }

/* =================================================================== ARTICLE */
.article{ width:100%; max-width:780px; margin-inline:auto; padding:clamp(20px,3vw,40px) var(--gut) clamp(50px,7vw,100px); }
.article__kick{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.article__title{ font-weight:700; letter-spacing:-.04em; line-height:.96; text-transform:uppercase;
  font-size:clamp(34px,6vw,68px); margin:18px 0 0; }
.article__dek{ font-size:clamp(18px,2.4vw,23px); line-height:1.45; color:var(--ink-soft); margin-top:22px; max-width:60ch; }
.article__meta{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin-top:26px; padding:16px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
.article__meta .sep{ color:var(--line-2); }
.article__meta .by{ color:var(--ink); }

/* prose */
.prose{ margin-top:clamp(28px,4vw,44px); }
.prose > p{ font-size:18px; line-height:1.78; margin-bottom:24px; color:#1a1a18; }
.prose > p:first-of-type:first-letter{ } /* (no drop cap; keep clinical) */
.prose h2{ font-weight:700; letter-spacing:-.03em; line-height:1.04; text-transform:uppercase;
  font-size:clamp(24px,3.4vw,36px); margin:clamp(38px,5vw,60px) 0 18px; }
.prose h2 .n{ color:var(--red); font-family:var(--mono); font-size:.5em; vertical-align:middle; margin-right:12px; letter-spacing:.05em; }
.prose h3{ font-weight:700; letter-spacing:-.02em; font-size:20px; margin:30px 0 12px; }
.prose strong{ font-weight:700; color:var(--ink); }
.prose em{ font-style:italic; }
.prose a{ color:var(--red); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose ul, .prose ol{ margin:0 0 24px; padding-left:22px; }
.prose li{ font-size:18px; line-height:1.7; margin-bottom:10px; color:#1a1a18; }
.prose li::marker{ color:var(--red); }

/* pullquote */
.pullquote{ margin:clamp(34px,5vw,56px) 0; padding-left:clamp(22px,3vw,34px); border-left:3px solid var(--red); }
.pullquote p{ font-weight:700; letter-spacing:-.02em; line-height:1.1; font-size:clamp(24px,3.6vw,38px); text-transform:none; }

/* takeaways box */
.takeaways{ margin:clamp(34px,5vw,56px) 0; border:1px solid var(--ink); border-radius:16px; overflow:hidden; }
.takeaways__h{ background:var(--ink); color:var(--bg); font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; padding:12px 22px; }
.takeaways ul{ list-style:none; padding:22px; margin:0; }
.takeaways li{ position:relative; padding-left:26px; margin-bottom:14px; font-size:16px; line-height:1.6; color:#1a1a18; }
.takeaways li:last-child{ margin-bottom:0; }
.takeaways li::before{ content:""; position:absolute; left:0; top:9px; width:10px; height:10px; background:var(--red); }

/* featured-product CTA */
.post-cta{ margin:clamp(40px,5vw,64px) 0 0; }
.post-cta__h{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:18px; }
.pcta-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.pcta{ border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column;
  transition:border-color .3s var(--ease), transform .3s var(--ease); }
.pcta:hover{ border-color:var(--ink); transform:translateY(-3px); }
.pcta__img{ height:120px; display:grid; place-items:center; background:radial-gradient(60% 60% at 50% 45%,#fff,#ececff00 70%); }
.pcta__img img{ width:auto; max-height:110px; filter:drop-shadow(0 16px 14px rgba(20,18,14,.2)); }
.pcta__n{ font-weight:700; letter-spacing:-.02em; font-size:16px; margin-top:10px; }
.pcta__c{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
.pcta__p{ margin-top:auto; padding-top:12px; font-family:var(--mono); font-size:13px; }
.pcta__p small{ color:var(--ink-soft); }

/* disclaimer */
.disclaimer{ margin:clamp(40px,5vw,60px) 0 0; padding:20px 22px; border:1px dashed var(--line-2); border-radius:12px;
  font-size:13px; line-height:1.6; color:var(--ink-soft); }
.disclaimer b{ color:var(--ink); }

/* article foot / related */
.post-foot{ margin-top:clamp(46px,6vw,80px); padding-top:30px; border-top:1px solid var(--line); }
.post-foot__h{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:18px; }
.rel-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.rel{ border:1px solid var(--line); border-radius:12px; padding:18px; transition:border-color .3s var(--ease); }
.rel:hover{ border-color:var(--ink); }
.rel .k{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--red); }
.rel h4{ font-weight:700; letter-spacing:-.02em; line-height:1.05; text-transform:uppercase; font-size:17px; margin-top:10px; }

@media (max-width:760px){
  .feat{ grid-template-columns:1fr; }
  .feat__art{ order:-1; }
}