/* ===== Blog detail (article) page ===== */

  /* article header */
  .article-header { padding:clamp(28px,4vw,40px) 0 0; background:#F9F7F1; }
  .article-header .wrap { max-width:760px; }
  .article-header .tag-row { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  .article-header .tag { font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#A6821D; }
  .article-header .meta { font-size:13px; color:#9A8B6C; }
  .article-header h1 { font-family:'Fraunces',serif; font-weight:400; font-size:clamp(30px,4.4vw,44px); line-height:1.16; color:#1C130C; margin-bottom:22px; }
  .article-header .dek { font-family:'Cormorant Garamond',serif; font-size:19px; line-height:1.7; color:#5A4F3C; margin-bottom:32px; }
  .article-header .byline { display:flex; align-items:center; gap:14px; padding:22px 0; border-top:1px solid #E0D3AE; }
  .article-header .avatar { width:40px; height:40px; border-radius:50%; background-size:cover; background-position:center; flex:0 0 auto; }
  .article-header .byline b { font-family:'Fraunces',serif; font-weight:500; font-size:14.5px; color:#1C130C; display:block; }
  .article-header .byline span { font-size:12.5px; color:#9A8B6C; }

  /* cover image */
  .article-cover { padding:clamp(36px,5vw,52px) 0 0; background:#F9F7F1; }
  .article-cover .frame { max-width:900px; margin:0 auto; aspect-ratio:16/9; background-size:cover; background-position:center; }

  /* article body typography */
  .article-body { padding:clamp(56px,7vw,84px) 0 clamp(70px,9vw,100px); background:#FFFFFF; }
  .article-body .wrap { max-width:720px; }
  .article-body h2 { font-family:'Fraunces',serif; font-weight:500; font-size:clamp(22px,2.6vw,27px); color:#1C130C; line-height:1.3; margin:44px 0 18px; }
  .article-body h2:first-child { margin-top:0; }
  .article-body p { font-family:'Cormorant Garamond',serif; font-size:19px; line-height:1.8; color:#3E342A; margin-bottom:22px; }
  .article-body ul { margin:0 0 24px 0; padding-left:0; list-style:none; }
  .article-body ul li { position:relative; padding:8px 0 8px 24px; font-family:'Cormorant Garamond',serif; font-size:18px; line-height:1.7; color:#3E342A; border-top:1px solid #F0E9D6; }
  .article-body ul li:first-child { border-top:none; }
  .article-body ul li::before { content:''; position:absolute; left:2px; top:19px; width:6px; height:6px; border-radius:50%; background:#A6821D; }

  .article-body blockquote { margin:36px 0; padding:8px 0 8px 28px; border-left:2px solid #A6821D; }
  .article-body blockquote p { font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:24px; line-height:1.5; color:#1C130C; margin-bottom:0; }

  .article-body .share { display:flex; align-items:center; gap:16px; margin-top:48px; padding-top:28px; border-top:1px solid #E0D3AE; }
  .article-body .share span { font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:#9A8B6C; }
  .article-body .share a { width:34px; height:34px; border:1px solid #D8CBA0; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#5A4F3C; transition:all .25s ease; }
  .article-body .share a:hover { border-color:#A6821D; color:#A6821D; }
  .article-body .share .share-copied {
    font-family:'Inter',sans-serif; font-size:12.5px; text-transform:none; letter-spacing:normal; color:#5C7A47;
    opacity:0; transition:opacity .25s ease; pointer-events:none;
  }
  .article-body .share .share-copied.show { opacity:1; }

  /* related posts */
  .related-posts { padding:clamp(70px,9vw,100px) 0; background:#FBF9F4; border-top:1px solid #E4D8BF; }
  .related-posts .head { max-width:600px; margin:0 auto clamp(40px,5vw,56px); text-align:center; }
  .related-posts .head .eyebrow { justify-content:center; display:flex; }
  .related-posts .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3.4vw,40px); }
  .related-posts .card { background:#FFFFFF; border:1px solid #E4D8BF; padding:18px 18px 24px; transition:transform .3s ease, box-shadow .3s ease; }
  .related-posts .card:hover { transform:translateY(-4px); box-shadow:0 20px 40px rgba(28,19,12,.08); }
  .related-posts .card .img { aspect-ratio:16/11; background:#EFE7D3; margin:-18px -18px 18px; overflow:hidden; }
  .related-posts .card .img > div { width:100%; height:100%; background-size:cover; background-position:center; transition:transform .5s ease; }
  .related-posts .card:hover .img > div { transform:scale(1.04); }
  .related-posts .card .tag { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#A6821D; margin-bottom:10px; }
  .related-posts .card h3 { font-family:'Fraunces',serif; font-weight:500; font-size:17px; line-height:1.32; color:#1C130C; margin-bottom:10px; }
  .related-posts .card h3 a { color:inherit; text-decoration:none; transition:color .2s ease; }
  .related-posts .card h3 a:hover { color:#A6821D; }
  .related-posts .card .meta { font-size:12px; color:#9A8B6C; margin-bottom:12px; }
  .related-posts .card .link { font-size:13px; color:#1C130C; border-bottom:1px solid #A6821D; padding-bottom:2px; text-decoration:none; }

  @media (max-width:900px) {
    .related-posts .grid { grid-template-columns:1fr 1fr; }
  }
  @media (max-width:600px) {
    .related-posts .grid { grid-template-columns:1fr; }
    .related-posts .card { max-width:400px; margin:0 auto; }
    .article-body blockquote p { font-size:20px; }
  }