/* ===========================================================
   LOMA — magazine.css
   Page styles for the magazine hub + article pages.
   Loaded after base.css. Magazine-scoped only.
   =========================================================== */

/* ===================== HUB ===================== */
.mag-head{padding-top:clamp(120px,15vh,168px);padding-bottom:clamp(28px,4vw,46px);}
.mag-head .section-h{max-width:24ch;}
.mag-dek{margin-top:20px;color:var(--body);font-weight:300;font-size:clamp(16px,1.6vw,19px);max-width:52ch;}
.mag-list{padding-top:clamp(20px,3vw,36px);}
.cluster{margin-bottom:clamp(46px,6vw,76px);}
.cluster-h{
  font-family:'Heebo';font-weight:500;font-size:13px;letter-spacing:.2em;
  color:var(--brass);padding-bottom:14px;border-bottom:1px solid var(--line);
  margin-bottom:30px;display:flex;align-items:center;gap:12px;
}
.cluster-h small{font-weight:300;letter-spacing:.04em;color:var(--muted);font-size:12.5px;}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}

.post-card{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:2px;overflow:hidden;text-decoration:none;color:inherit;position:relative;
  transition:transform .45s var(--ease),box-shadow .45s,border-color .45s;
}
.post-card::before{content:'';position:absolute;top:0;right:0;width:100%;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);z-index:2;}
.post-card:hover{transform:translateY(-5px);border-color:transparent;box-shadow:0 22px 44px -18px rgba(22,22,20,.18);}
.post-card:hover::before{transform:scaleX(1);}
.post-thumb{aspect-ratio:16/10;overflow:hidden;background:#222;}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.post-card:hover .post-thumb img{transform:scale(1.05);}
.post-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:9px;flex:1;}
.post-cluster{font-family:'Heebo';font-size:12px;letter-spacing:.14em;color:var(--brass);}
.post-body h3{font-weight:500;font-size:19px;line-height:1.32;}
.post-body p{color:var(--body);font-weight:300;font-size:14.5px;flex:1;}
.post-more{font-family:'Heebo';font-size:13.5px;color:var(--ink);margin-top:4px;}

/* ===================== ARTICLE HERO ===================== */
.article-hero{padding-top:clamp(112px,14vh,150px);}
.crumb{font-size:13px;color:var(--muted);margin-bottom:22px;}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb a:hover{color:var(--brass);}
.crumb span{margin:0 6px;}
.article-hero .eyebrow{margin-bottom:18px;}
.article-hero h1{
  font-weight:200;font-size:clamp(30px,4.6vw,56px);line-height:1.1;letter-spacing:-.01em;max-width:20ch;
}
.article-hero h1 strong{font-weight:500;}
.article-dek{margin-top:18px;font-size:clamp(16.5px,1.6vw,20px);font-weight:300;color:var(--body);max-width:48ch;}
.article-meta{
  margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  font-family:'Heebo';font-size:13px;color:var(--muted);letter-spacing:.02em;
}
.article-meta span.dot{width:3px;height:3px;border-radius:50%;background:var(--line);}
.article-cover{max-width:var(--max);margin:clamp(32px,5vw,54px) auto 0;padding:0 clamp(20px,4vw,40px);}
.article-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px;}

/* ===================== BODY: TOC + PROSE ===================== */
.article-body{
  display:grid;grid-template-columns:230px minmax(0,720px);
  gap:clamp(30px,5vw,72px);justify-content:center;align-items:start;
  padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(56px,8vw,104px);
}
.toc{position:sticky;top:100px;}
.toc-h{font-family:'Heebo';font-size:12px;letter-spacing:.2em;color:var(--brass);margin-bottom:14px;font-weight:600;}
.toc ol{list-style:none;counter-reset:t;}
.toc li{counter-increment:t;margin-bottom:11px;line-height:1.4;}
.toc li::before{content:counter(t)'.';color:var(--brass-soft);font-family:'Heebo';font-size:12.5px;margin-left:8px;}
.toc a{color:var(--muted);text-decoration:none;font-size:14.5px;transition:color .25s;}
.toc a:hover,.toc a.active{color:var(--ink);}

/* prose reading column */
.prose{max-width:720px;color:var(--body);font-size:18px;line-height:1.85;font-weight:400;}
.prose > .lede{font-size:clamp(19px,2vw,22px);line-height:1.6;color:var(--ink);font-weight:300;margin-bottom:1.3em;}
.prose h2{font-family:'Heebo';font-weight:500;font-size:clamp(23px,2.8vw,31px);color:var(--ink);line-height:1.22;margin:1.8em 0 .5em;scroll-margin-top:100px;}
.prose h3{font-family:'Heebo';font-weight:500;font-size:20px;color:var(--ink);margin:1.5em 0 .4em;}
.prose p{margin-bottom:1.15em;}
.prose a{color:var(--brass);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--brass-soft);transition:text-decoration-color .25s;}
.prose a:hover{text-decoration-color:var(--brass);}
.prose ul,.prose ol{margin:0 0 1.2em;padding-right:1.3em;}
.prose li{margin-bottom:.5em;}
.prose blockquote{margin:1.6em 0;padding:6px 22px;border-right:3px solid var(--brass);color:var(--ink);font-family:'Heebo';font-weight:300;font-size:clamp(20px,2.3vw,25px);line-height:1.45;}
.prose figure{margin:2em 0;}
.prose figure img{width:100%;border-radius:2px;}
.prose figcaption{margin-top:10px;font-size:13.5px;color:var(--muted);text-align:center;}
.prose hr{border:none;border-top:1px solid var(--line);margin:2.4em 0;}
.prose strong{font-weight:600;color:var(--ink);}

/* a tidy data table for the price / comparison articles */
.prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15.5px;}
.prose th,.prose td{text-align:right;padding:12px 14px;border-bottom:1px solid var(--line);}
.prose thead th{font-family:'Heebo';font-weight:600;color:var(--ink);border-bottom:1.5px solid var(--ink);font-size:14px;}
.prose tbody tr:hover{background:var(--stone);}

/* callout box for key takeaways */
.callout{background:var(--stone);border-right:3px solid var(--brass);border-radius:2px;padding:22px 26px;margin:1.8em 0;}
.callout .callout-h{font-family:'Heebo';font-weight:600;font-size:13px;letter-spacing:.1em;color:var(--brass);margin-bottom:8px;}
.callout p{margin:0;font-weight:400;color:var(--ink);}

/* ===================== CTA BAND ===================== */
.cta-band{background:var(--ink);color:var(--paper);padding:clamp(54px,8vw,88px) 0;text-align:center;}
.cta-band .eyebrow{justify-content:center;color:var(--brass-soft);}
.cta-band h2{font-family:'Heebo';font-weight:200;font-size:clamp(26px,3.4vw,42px);line-height:1.12;}
.cta-band h2 strong{font-weight:500;color:var(--brass-soft);}
.cta-band p{color:#BDBAB1;font-weight:300;margin:14px auto 30px;max-width:42ch;}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ===================== RELATED ===================== */
.related{background:var(--stone);}
.related .eyebrow{margin-bottom:8px;}
.related-grid{margin-top:clamp(30px,4vw,46px);display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

/* ===================== RESPONSIVE ===================== */
@media(max-width:920px){
  .post-grid,.related-grid{grid-template-columns:1fr;}
  .article-body{grid-template-columns:minmax(0,720px);}
  .toc{position:static;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:6px;}
  .toc ol{columns:2;column-gap:24px;}
}
@media(max-width:560px){
  .toc ol{columns:1;}
  .prose{font-size:17px;}
}