/* ===================================================================
   Article single (design: article-single.html) — "Field Journal":
   full-bleed photo hero, single-column reading well with a drop cap,
   numbered section dividers (content h2), photo breaks (wide images),
   pull quotes, related "Articles | Recipes" columns.
   =================================================================== */

.article-page{max-width:1080px; margin:0 auto; width:100%;}

/* ---- hero: photo with title dropped over the bottom ---- */
.article-hero{position:relative; aspect-ratio:16/9; overflow:hidden; border:1.5px solid var(--ink); margin-bottom:0;}
.article-hero img{width:100%; height:100%; object-fit:cover; display:block;}
.article-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(27,23,18,.82) 0%, rgba(27,23,18,.35) 42%, rgba(27,23,18,0) 68%); pointer-events:none;}
.article-hero-content{position:absolute; left:0; right:0; bottom:0; padding:44px 48px; color:#fff; z-index:2;}
.article-hero .kicker{display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; background:var(--gold); color:var(--ink); padding:6px 12px; margin-bottom:16px;}
.article-hero a.kicker:hover{background:var(--paper);}
.article-hero h1{font-family:var(--font-display); font-size:46px; font-weight:700; line-height:1.08; letter-spacing:-.01em; max-width:16ch; overflow-wrap:break-word;}

/* no featured image: title on paper */
.article-hero.no-image{aspect-ratio:auto; border:none; border-top:2px solid var(--ink);}
.article-hero.no-image::after{content:none;}
.article-hero.no-image .article-hero-content{position:static; color:var(--ink); padding:36px 0 0;}
.article-hero.no-image h1{max-width:22ch;}

/* ---- byline strip ---- */
.article-byline{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:20px 4px 40px; border-bottom:1.5px solid var(--ink); margin-bottom:44px;}
.article-byline .who{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-family:var(--font-mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; opacity:.6;}
.article-byline .who .dot{opacity:.5;}
.article-byline .who a:hover{text-decoration:underline;}
.article-byline .read-time{font-family:var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--green);}

.article-video{max-width:680px;}

/* ---- reading well ---- */
.article-content{margin-bottom:60px; counter-reset:mg-section;}
.article-content > *{max-width:680px; margin-left:auto; margin-right:auto;}
.article-content > .alignwide,.article-content > .alignfull,.article-content > .mg-recipe,.article-content > .wp-block-pullquote{max-width:none;}
.article-content > p{font-size:17px; line-height:1.8;}
.article-content > p:first-of-type{font-size:19px; line-height:1.75;}
.article-content > p:first-of-type::first-letter{font-family:var(--font-display); font-weight:800; font-size:74px; line-height:.78; float:left; padding:6px 10px 0 0; color:var(--green);}
.article-content strong{color:var(--ink);}
.article-content a:not(.btn):not(.wp-block-button__link):not([class*="wc-block"] *){color:var(--mgshop); font-weight:600; text-decoration-color:currentColor; text-decoration-thickness:1px; text-underline-offset:2px;}

/* ---- section divider: content h2 → "01 — Title" ---- */
.article-content > h2{counter-increment:mg-section; font-family:var(--font-mono); font-size:22px; font-weight:700; line-height:1.3; text-transform:uppercase; letter-spacing:.04em; margin-top:56px; margin-bottom:30px; text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:3px; text-underline-offset:10px;}
.article-content > h2::before{content:counter(mg-section, decimal-leading-zero); display:inline-block; margin-right:22px; font-family:var(--font-display); font-size:88px; font-weight:800; line-height:.8; color:transparent; -webkit-text-stroke:1.5px var(--ink); text-decoration:none; vertical-align:baseline; letter-spacing:0;}
.article-content > h3{margin-top:40px;}

/* ---- photo breaks: wide / full images span the page ---- */
.article-content > .wp-block-image.alignwide,.article-content > .wp-block-image.alignfull,
.article-content > figure.alignwide,.article-content > figure.alignfull{border:1.5px solid var(--ink); margin-top:52px; margin-bottom:52px; overflow:hidden;}
.article-content > .wp-block-image.alignwide img,.article-content > .wp-block-image.alignfull img{width:100%; height:auto; display:block;}
.article-content > .wp-block-image.alignwide figcaption,.article-content > .wp-block-image.alignfull figcaption{padding:8px 12px; margin:0;}
.article-content > .wp-block-image:not(.alignwide):not(.alignfull) img{border:1.5px solid var(--ink);}

/* ---- pull quote ---- */
.article-content > blockquote:not(.tiktok-embed):not(.instagram-media):not(.twitter-tweet),.article-content .wp-block-pullquote{max-width:760px; margin:60px auto; padding:0 20px; border:none; text-align:center;}
.article-content > blockquote:not(.tiktok-embed):not(.instagram-media):not(.twitter-tweet)::before,.article-content .wp-block-pullquote blockquote::before{content:"“"; font-family:var(--font-display); font-size:64px; font-weight:800; color:var(--gold); line-height:.5; display:block; margin-bottom:6px;}
.article-content .wp-block-pullquote blockquote{border:none; padding:0; margin:0;}
.article-content > blockquote:not(.tiktok-embed):not(.instagram-media):not(.twitter-tweet) p,.article-content .wp-block-pullquote p{font-family:var(--font-display); font-style:italic; font-size:30px; font-weight:700; line-height:1.32; color:var(--ink);}
.article-content > blockquote:not(.tiktok-embed):not(.instagram-media):not(.twitter-tweet) cite,.article-content .wp-block-pullquote cite{display:block; margin-top:14px; font-family:var(--font-mono); font-size:11px; font-style:normal; text-transform:uppercase; letter-spacing:.05em; opacity:.6;}

/* ---- comments well ---- */
.article-page .comments{max-width:680px; margin-left:auto; margin-right:auto;}

/* ---- related: Articles | Recipes ---- */
.article-related{border-top:2px solid var(--gold); padding-top:28px; margin-top:0;}
.article-related .sec-head{margin-bottom:26px;}
.related-cols{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.related-col .related-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid var(--ink);}
.related-col .related-head h3{font-family:var(--font-display); font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;}
.related-col .related-head a{font-family:var(--font-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--mgshop); white-space:nowrap;}
.related-list{display:flex; flex-direction:column; gap:18px;}
.related-item{display:flex; align-items:center; gap:14px; padding-bottom:18px; border-bottom:1px solid var(--line-soft);}
.related-item:last-child{border-bottom:none; padding-bottom:0;}
.related-item .thumb{flex:0 0 auto; width:72px; height:72px; overflow:hidden; border:1.5px solid var(--ink);}
.related-item .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.related-item .info{min-width:0;}
.related-item .eyebrow{display:block; font-size:10px; margin-bottom:4px;}
.related-item h4{font-family:var(--font-display); font-size:14.5px; font-weight:700; line-height:1.3;}
.related-item:hover h4{text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:3px;}
.related-col.c-articles .related-item .eyebrow{color:var(--lavender-deep);}
.related-col.c-recipes .related-item .eyebrow{color:var(--green);}

@media (max-width:1080px){
  .related-cols{grid-template-columns:1fr; gap:36px;}
}

@media (max-width:640px){
  .article-hero{aspect-ratio:4/5;}
  .article-hero-content{padding:28px 22px;}
  .article-hero h1{font-size:28px;}
  .article-hero.no-image .article-hero-content{padding:26px 0 0;}
  .article-byline{padding-bottom:26px; margin-bottom:32px;}
  .article-content > p:first-of-type{font-size:17px;}
  .article-content > p:first-of-type::first-letter{font-size:52px; padding:4px 8px 0 0;}
  .article-content > h2{font-size:16px; margin-top:44px; margin-bottom:22px; text-underline-offset:8px;}
  .article-content > h2::before{font-size:56px; margin-right:14px;}
  .article-content > .wp-block-image.alignwide,.article-content > .wp-block-image.alignfull{margin-top:36px; margin-bottom:36px;}
  .article-content > blockquote:not(.tiktok-embed):not(.instagram-media):not(.twitter-tweet) p,.article-content .wp-block-pullquote p{font-size:22px;}
}