/* PETALCHIME — article layout
   Single column. Shared class names across the site's long-form pages, each
   with a real rule so any article page renders from these three files alone. */

.article-page{max-width:800px;margin:0 auto;padding:30px 20px 56px}

.breadcrumb{font-size:11px;color:var(--ink-3);margin:0 0 16px}
.breadcrumb a{color:var(--ink-3)}
.breadcrumb a:hover{color:var(--rose-dark);text-decoration:underline}
.breadcrumb-sep{margin:0 6px;color:var(--line-2)}

.article-header{border-bottom:2px solid var(--rose-soft);padding-bottom:20px;margin-bottom:24px}
.article-h1{margin:0 0 14px;font-family:Georgia,serif;font-size:30px;line-height:1.32;color:var(--ink)}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:11px;color:var(--ink-3)}
.card-meta .cat{color:var(--rose-dark);font-weight:700;letter-spacing:.08em;text-transform:uppercase}

.author-byline{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);margin-top:11px}
.author-name{color:var(--ink-2);font-weight:700}
.author-sep{color:var(--line-2)}

.article-hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;margin:0 0 26px;border:7px solid #fff;
  box-shadow:0 5px 16px rgba(196,136,171,.24)}

.article-lead{font-size:15px;line-height:1.8;color:var(--ink-2);margin:0 0 24px;padding:14px 16px;
  background:var(--rose-mist);border-left:3px solid var(--rose)}

.article-body{max-width:760px;margin:0 auto;font-size:13.5px;line-height:1.95;color:var(--ink-2)}
.article-body h2{font-family:Georgia,serif;font-size:21px;color:var(--ink);margin:34px 0 12px}
.article-body h3{font-size:14.5px;color:var(--rose-dark);margin:24px 0 8px;font-weight:700}
.article-body p{margin:0 0 17px}
.article-body ul,.article-body ol{padding-left:21px;margin:0 0 17px}
.article-body li{margin-bottom:7px}
.article-body a{color:var(--rose-dark);text-decoration:underline}
.article-body a:hover{color:var(--rose)}
.article-body img{margin:20px 0;border:6px solid #fff;box-shadow:0 4px 14px rgba(196,136,171,.2)}
.article-body blockquote{margin:22px 0;padding:15px 17px;background:var(--rose-mist);
  border-left:3px solid var(--lilac);color:var(--ink-2);font-style:italic}
.article-body code{background:var(--rose-mist);padding:2px 5px;font-size:12px}
.article-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:12.5px}
.article-body th,.article-body td{border:1px solid var(--line-2);padding:9px 11px;text-align:left}
.article-body th{background:var(--rose-mist);color:var(--ink)}

.author-bio-card{display:flex;gap:15px;align-items:flex-start;background:var(--page);border:1px solid var(--line);
  padding:18px;margin:40px 0 0}
.author-bio-avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--rose-soft)}
.author-bio-name{margin:0 0 3px;font-family:Georgia,serif;font-size:15px;color:var(--ink)}
.author-bio-title{margin:0 0 8px;font-size:11px;color:var(--rose-dark)}
.author-bio-text{margin:0;font-size:12px;color:var(--ink-3);line-height:1.7}

.faq-section{margin:40px 0 0;border-top:2px solid var(--rose-soft);padding-top:28px}
.faq-section h2{font-family:Georgia,serif;font-size:20px;margin:0 0 16px;color:var(--ink)}
#faq-items{display:grid;gap:11px}
#faq-items details{background:var(--page);border:1px solid var(--line);padding:13px 15px}
#faq-items summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--ink);list-style:none}
#faq-items summary::-webkit-details-marker{display:none}
#faq-items summary::after{content:"+";float:right;width:19px;height:19px;line-height:17px;text-align:center;
  border-radius:50%;background:var(--rose-mist);color:var(--rose-dark);font-weight:700}
#faq-items details[open] summary::after{content:"\2013"}
#faq-items p{margin:10px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.8}

.cta-banner{margin:40px 0 0;background:linear-gradient(#fdf3f9,#f7e6f1);border:1px solid var(--line-2);
  padding:26px 24px;text-align:center}
.cta-banner h3{margin:0 0 7px;font-family:Georgia,serif;font-size:19px;color:var(--ink)}
.cta-banner p{margin:0 0 15px;color:var(--ink-2);font-size:12.5px}

.related-section{margin:44px 0 0;border-top:1px solid var(--line);padding-top:28px}
.related-section h2{font-family:Georgia,serif;font-size:19px;margin:0 0 16px;color:var(--ink)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.rel-card{background:var(--page);border:1px solid var(--line);padding:14px}
.rel-title{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink)}

/* ---------- article index cards ---------- */
.article-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.article-card{background:var(--page);border:1px solid var(--line);display:flex;flex-direction:column;transition:.18s}
.article-card:hover{box-shadow:0 6px 18px rgba(196,136,171,.22);transform:translateY(-3px)}
.article-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--rose-mist)}
/* higher specificity: bare .article-body is the long-form text column above */
.article-card .article-body{max-width:none;margin:0;padding:13px 14px 16px;display:flex;flex-direction:column;
  flex:1;font-size:12.5px;line-height:1.65}
.article-meta{display:flex;align-items:center;gap:8px;font-size:10.5px;margin:0 0 8px}
.article-cat{color:var(--rose-dark);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.article-date{color:var(--ink-3)}
.article-excerpt{margin:0 0 13px;font-size:12px;color:var(--ink-2);line-height:1.7;flex:1}
.article-link{font-size:11.5px;font-weight:700;color:var(--rose-dark);align-self:flex-start}
.article-link:hover{text-decoration:underline}

@media (max-width:900px){.rel-grid,.article-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){
  .rel-grid,.article-list{grid-template-columns:1fr}
  .article-h1{font-size:24px}
  .author-bio-card{flex-direction:column}
}