/* BrownMetro — article-page-specific styles (base.css handles shared tokens, nav, and footer) */

/* ===== top bar (article pages keep a compact header instead of the full masthead) ===== */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--rule);
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;
}
.topbar .logo{font-family:'Fraunces',serif;font-weight:900;font-size:20px;letter-spacing:-.01em;text-decoration:none;}
.topbar .back{color:var(--parchment-dim);text-decoration:none;}
.topbar .back:hover{color:var(--ochre);}

/* ===== article layout ===== */
.article-layout{
  display:grid;grid-template-columns:1fr 300px;gap:56px;
  padding:44px 0 80px;align-items:start;
}
.hero-img{
  width:100%;height:340px;object-fit:cover;margin:20px 0 26px;
  filter:contrast(1.08) saturate(1.2) brightness(.94);
}
.article-main{min-width:0;}
.kicker{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ochre);
}
.article-main h1{
  font-family:'Fraunces',serif;font-weight:600;
  font-size:clamp(30px,4vw,48px);line-height:1.08;margin:16px 0 18px;
}
.dek{
  font-family:'Fraunces',serif;font-style:italic;font-weight:450;
  font-size:19px;color:var(--parchment-dim);line-height:1.5;margin:0 0 22px;
}
.byline-row{
  display:flex;gap:16px;align-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--parchment-dim);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:14px 0;margin-bottom:8px;
}
.article-body{font-size:17px;line-height:1.75;max-width:64ch;}
.article-body p{margin:0 0 22px;}
.article-body h2{
  font-family:'Fraunces',serif;font-weight:600;font-size:26px;margin:38px 0 16px;
}
.drop{
  float:left;font-family:'Fraunces',serif;font-weight:900;font-size:64px;
  line-height:.8;padding-right:10px;color:var(--ochre);
}

/* ===== sidebar ===== */
.sidebar{position:sticky;top:24px;display:flex;flex-direction:column;align-items:center;}
.sidebar-section{width:100%;margin-top:36px;}
.sidebar-section h3{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--parchment-dim);
  border-bottom:1px solid var(--rule);padding-bottom:8px;margin:0 0 16px;
}
.sidebar-item{margin-bottom:16px;display:flex;gap:12px;align-items:center;}
.sidebar-item img{
  width:64px;height:48px;object-fit:cover;flex-shrink:0;
  filter:contrast(1.08) saturate(1.2) brightness(.94);
}
.sidebar-item a{
  font-family:'Fraunces',serif;font-weight:600;font-size:15px;line-height:1.3;
  text-decoration:none;display:flex;align-items:center;gap:12px;
}
.sidebar-item a:hover{color:var(--ochre);}

/* ===== related stories ===== */
.related-wrap{border-top:1px solid var(--rule);padding:56px 0;}
.related-wrap h2{
  font-family:'Fraunces',serif;font-weight:600;font-size:24px;margin:0 0 30px;
}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.related-grid img{
  width:100%;height:150px;object-fit:cover;margin-bottom:14px;
  filter:contrast(1.08) saturate(1.2) brightness(.94);
}
.related-grid article .tag{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal);
}
.related-grid article h3{
  font-family:'Fraunces',serif;font-weight:600;font-size:18px;line-height:1.25;
  margin:10px 0 0;
}
.related-grid article a{text-decoration:none;}
.related-grid article a:hover h3{color:var(--ochre);}

@media (max-width:900px){
  .article-layout{grid-template-columns:1fr;}
  .sidebar{position:static;}
  .related-grid{grid-template-columns:1fr;}
}