/* ── Article detail styles (new design / light theme) ───────────────────
   Shared by all articles/<slug>/index.html. Built on kbjdfan-design.css
   tokens. Class names match the original article bodies so only the head
   <link> + chrome change per article; the body markup stays untouched. */

.article-page{max-width:820px; margin:0 auto; padding:40px 20px 80px; color:var(--ink); font-size:16px;}

/* hero */
.article-hero{margin:0 0 22px; position:relative; border-radius:var(--inner-radius); overflow:hidden;
  background:var(--surface); box-shadow:0 8px 22px rgba(40,30,50,.10);}
.article-hero__img{width:100%; display:block; height:auto; object-fit:cover;}
.article-hero__meta{font-size:12px; color:var(--brand-coral); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; margin:18px 2px 0;}

/* typography */
.article h1{font-family:var(--font-head); font-weight:700; font-size:32px; line-height:1.35; margin:12px 0 22px; color:var(--ink);}
.article h2{font-family:var(--font-head); font-weight:700; font-size:24px; margin:46px 0 14px; padding-top:20px;
  border-top:1px solid #ece8e1; color:var(--ink);}
.article h3{font-family:var(--font-head); font-weight:700; font-size:19px; margin:30px 0 10px; color:var(--ink);}
.article p{line-height:1.95; margin:14px 0; color:#33333f;}
.article ul,.article ol{line-height:1.9; padding-left:24px; color:#33333f;}
.article li{margin:6px 0;}
.article hr{margin:36px 0; border:0; border-top:1px solid #ece8e1;}
.article a{color:var(--brand-coral); text-decoration:underline;}
/* BJ name → figure links, injected by bj-link.js. Subtle by default so rosters
   stay readable; the dotted underline signals they are clickable. */
.article a.bjlink{color:inherit; text-decoration:none; border-bottom:1px dotted var(--brand-coral); transition:color .15s;}
.article a.bjlink:hover{color:var(--brand-coral); border-bottom-color:var(--brand-coral);}
.article blockquote{border-left:3px solid var(--brand-coral); padding-left:16px; margin:16px 0; color:var(--text-muted);}
.article table{width:100%; border-collapse:collapse; margin:18px 0; font-size:14px;}
.article th,.article td{text-align:left; padding:9px 12px; border-bottom:1px solid #ece8e1;}
.article th{background:var(--surface); font-weight:700; color:var(--ink);}

/* figures */
.article-figure{margin:28px 0; text-align:center;}
.article-figure img{max-width:100%; height:auto; border-radius:var(--inner-radius); display:block; margin:0 auto;
  box-shadow:0 4px 14px rgba(40,30,50,.10);}
.article-figure figcaption{font-size:12.5px; color:var(--text-subtle); margin-top:9px;}
.figform{max-width:320px; margin:18px auto;}

/* callout */
.callout{background:var(--paper-pink); border:1px solid #ffd4e4; border-left:4px solid var(--brand-coral);
  border-radius:var(--inner-radius); padding:16px 20px; margin:22px 0;}
.callout h4{font-size:15px; color:var(--brand-coral); margin:0 0 6px;}
.callout p{color:#3a2c33; margin:6px 0 0;}

/* pledge cards (two-up) */
.pledge{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:24px 0;}
.pledge .card{background:var(--paper); border:1px solid #efece6; border-radius:var(--inner-radius); overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.05);}
.pledge .card img{width:100%; display:block;}
.pledge .card .body{padding:12px 16px;}
.pledge .card h4{margin:0 0 6px; font-size:16px; color:var(--ink);}
.pledge .card .id{font-family:Consolas,monospace; font-size:12px; color:var(--teal);}
.pledge .card p{font-size:13.5px; margin:6px 0 0; color:var(--text-muted);}

/* member (image + info row) */
.member{display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; background:var(--paper);
  border:1px solid #efece6; border-radius:var(--inner-radius); padding:18px; margin:22px 0; box-shadow:0 1px 3px rgba(0,0,0,.05);}
.member .shots{display:flex; gap:8px;}
.member .shots img{width:120px; height:178px; object-fit:cover; border-radius:10px;}
.member .info h3{margin:0 0 2px;}
.member .info .sub{font-size:13px; color:var(--text-subtle); font-weight:400;}
.member .info .rd{font-size:13px; color:var(--text-subtle); font-family:Consolas,monospace; margin-bottom:8px;}
.member .info .rank{display:inline-block; background:var(--brand-coral); color:#fff; font-weight:700; font-size:12px;
  border-radius:6px; padding:2px 9px; margin-right:6px;}
.member .info .rank.mc{background:var(--gold); color:#5a3a1a;}
.pl{display:inline-block; margin-top:10px; font-size:13px; color:var(--brand-coral); text-decoration:none;
  border:1px solid #e9cdd9; border-radius:8px; padding:4px 12px;}
.pl:hover{background:var(--paper-pink);}
.note{font-size:13px; color:var(--text-subtle);}

/* member-card (flex variant used by mscrew/pandaclass) */
.member-card{display:flex; gap:16px; align-items:flex-start; margin:16px 0; padding:14px; background:var(--paper);
  border-radius:var(--inner-radius); border:1px solid #efece6; box-shadow:0 1px 3px rgba(0,0,0,.05);}
.member-card img{width:110px; height:110px; border-radius:10px; object-fit:cover; flex-shrink:0;}
.member-card__body{font-size:14px; line-height:1.7;}
.member-card__name{font-size:17px; font-weight:700; margin:0 0 2px; color:var(--ink);}
.member-card__name .member-id{font-size:13px; font-weight:400; color:var(--brand-coral);}
.member-card__stats{font-size:12px; color:var(--text-subtle); margin:0 0 8px; letter-spacing:.02em;}
.member-card__body p{margin:8px 0 0; color:#33333f;}

/* roster grid */
.roster-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:24px 0;}
.roster-grid figure{margin:0; text-align:center; font-size:13px;}
.roster-grid img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px;}
.roster-grid figcaption{margin-top:6px; color:var(--text-subtle);}

/* CTA card */
.article-cta-card{margin:48px 0; padding:26px; background:linear-gradient(135deg,#FFEAF2 0%,#FBF8F3 100%);
  border-radius:var(--card-radius); border:1px solid #ffd4e4;}
.article-cta-card h3{margin:0 0 12px; font-size:18px; border:none; padding:0; color:var(--ink);}
.article-cta-buttons{display:flex; flex-wrap:wrap; gap:12px;}
.article-cta-buttons a{display:inline-block; padding:12px 22px; background:var(--brand-coral); color:#fff;
  text-decoration:none; border-radius:var(--pill); font-weight:700; font-size:14px;}
.article-cta-buttons a.secondary{background:#fff; border:1px solid #e9cdd9; color:var(--brand-coral);}

/* related-article cards (tail block 2 — distinct from CTA buttons and pills) */
.related-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0 8px;}
.related-card{display:block; padding:16px 18px; background:var(--paper); border:1px solid #efece6;
  border-radius:var(--inner-radius); text-decoration:none !important; box-shadow:0 1px 3px rgba(0,0,0,.05);
  transition:border-color .15s, box-shadow .15s;}
.related-card:hover{border-color:var(--brand-coral); box-shadow:0 4px 12px rgba(40,30,50,.10);}
.related-card__label{display:block; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--brand-coral); margin-bottom:6px;}
.related-card__title{display:block; font-size:15px; font-weight:700; color:var(--ink); line-height:1.55;}
.related-card__arrow{display:block; margin-top:8px; font-size:14px; font-weight:700; color:var(--brand-coral);}

@media(max-width:680px){
  .pledge{grid-template-columns:1fr;}
  .member{grid-template-columns:1fr;}
  .member .shots img{width:46%; height:auto;}
  .related-cards{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .member-card{flex-direction:column;}
  .member-card img{width:100%; height:auto; aspect-ratio:1;}
}