/* Article */

:root{
  --zig-color: #151d0a;
  --tooth-h: 10px;
  --tooth-w: calc(var(--tooth-h) * 2);  /* 45° sides */
  --zig-gap: 10px;    
	--max-width: 660px;
}

/* Hide truly empty/bad sources if they ever appear */
.embed-article img[src=""],
.embed-article img:not([src]){ display:none; }

/* The wrapper around each article image */
.article-image{
  display:block;         /* avoid inline gaps */
  margin:20px 0;
  max-width:100%;        /* never wider than the container */
  box-sizing:border-box; /* padding/border won't push it wider */
  overflow:hidden;       /* safety: clip any stray overflow */
}

/* The actual media */
.article-image img,
.article-image picture,
.article-image video{
  display:block;         /* removes baseline/descender gap */
  max-width:100%;        /* key: no overflow */
  width:100%;            /* fill the wrapper width */
  height:auto;           /* keep aspect ratio */
}


/* container & spacing so zigzag doesn’t overlap content */
.article-view{
  position: relative;
  padding-top: calc(var(--tooth-h) + var(--zig-gap));  /* <-- re-enable this */
  display: block !important;   /* cancel any flex/grid on this container */
  gap: 0 !important;
  row-gap: 0 !important;
}

/* hero image behind */
.article-view.has-hero::after{
  content:"";
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
  background-image: var(--hero-image);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,.4);
  background-blend-mode: multiply;
}

/* crisp 45° zigzag */
.zigzag-top{
  position:absolute; top:0; left:0; right:0;
  height: var(--tooth-h);
  z-index:2; pointer-events:none;
  background: var(--zig-color);
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1" preserveAspectRatio="none">\
<path fill="black" d="M0,0 L1,1 L2,0 Z"/></svg>') repeat-x top left / var(--tooth-w) var(--tooth-h);
          mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1" preserveAspectRatio="none">\
<path fill="black" d="M0,0 L1,1 L2,0 Z"/></svg>') repeat-x top left / var(--tooth-w) var(--tooth-h);
}

/* ensure content sits above */
.article-view > .article-head,
.article-view .article-sheet{ position: relative; z-index: 3; }

/* reset inside header so H1/H2 sit flush */
.article-head { margin:0; padding:0; display:grid; row-gap:0; }
.article-head .article-title{ margin:0; line-height: 0.8;} 
.article-head .article-subtitle{ margin:0; line-height: 0.9;}

/* spacing after the header only (keep the page flow tidy) */
.article-view > .article-head + .article-sheet { margin-top: 0; }

.article-head {
  margin: 0;
  padding: 20px 20px 0;
  display: block;      /* prevent flex/grid gaps */
}

.article-title {
  margin: 0;
	padding: 100px 0 0 10px;
	max-width: 60%;
	font-size: 70px;
}

.article-subtitle {
  margin: 0;
	padding-left: 10px;
	max-width: 50%;
	font-size: 30px;
}




/* Standfirst container, stacked with small rhythm */
.standfirst-box{
  	margin: 20px 0 0;
	background: var(--jd-nearly-blk);
	border-radius: 0;
	padding: 10px;
}

/* Byline above standfirst */
.standfirst-box .byline{
  margin: 0;
}
.standfirst-box .byline-text{ display:inline-block; }

/* Standfirst text (uses your serif) */
.standfirst-box .standfirst{
  margin: 40px auto 20px;
  	font-family: var(--font-serif, 'Libre Baskerville', serif);
  	font-size: 30px;
  	line-height: 1.3;
  	color: var(--jd-cream);
  	max-width: var(--max-width); 
}

/* Conditional user message */
.user-message{
  margin: 10px 0 0;
  padding: 10px 10px;
  border: 1px dashed color-mix(in srgb, var(--jd-cream) 50%, transparent);
  background: rgba(21,29,10,.35);
  color: var(--text, #F8EDC2);
  border-radius: 10px;
}
.user-message .actions{
  margin-top: 10px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.user-message .btn{
  /* display:inline-block; padding:6px 10px; border-radius:4px;
  text-decoration:none; border:1px solid rgba(255,255,255,.25); */
}
.user-message .btn-accent{
  /* border-color: var(--jd-accent, #f7aa21); */
}

.article-sheet {
  	margin: 0 20px;
	background: var(--jd-nearly-blk);
	border-radius: 0;
}

.article-sheet article {
	margin: 0 auto 20px;
	max-width: var(--max-width);
	padding: 10px;
}

/* When finished - extract this to type.css */

/* ========== 8) AUTHOR BLOCKS ========== */
.author-text{
  font-family: var(--font-serif);
  font-weight: 400;
  	font-size: 30px;
  	line-height: 1.3;
  	color: var(--jd-cream);
  	max-width: 36ch;            
	margin-bottom: 20px;
	hyphens: none;
	padding-right: 60px;
}
.author-text-body{
  font-family: var(--font-serif);
  font-weight: 400;
  	font-size: 20px;
  	line-height: 1.5;
  	color: var(--jd-cream); 
	padding-right: 60px;
}

.article-image {
	margin: 0 0 40px;
}

.article-image img {
	width: 100%;
	height: auto;
}

/* ========== 9) QUOTES ========== */
/* Apply to both .author-text-quote and plain <blockquote> (incl. inside article body) */
.author-text-quote,
:where(blockquote, .author-text-quote){
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--jd-cream);
  background-color: rgba(37,61,53,.2);
  font-size: 20px;
  line-height: 1.5;
  padding: 20px 30px;
  margin: 0 40px 40px 0;
  border-left: 1px solid var(--jd-cream);
  position: relative;
}




/* Links inside quotes */
:where(blockquote, .author-text-quote) a{
  color: var(--jd-cream);
}

/* Remove default UA margins/quote marks on blockquote to avoid double styling */
blockquote{
   margin: 0 40px 40px 0;              /* UA reset */
  quotes: none;           /* disable automatic quotation marks */
}

/* If your CMS wraps text in <p> inside blockquote, remove extra spacing */
blockquote > :first-child{ margin-top: 0; }
blockquote > :last-child{  margin-bottom: 0; }

/* Decorative open/close marks (for both) */
:where(blockquote, .author-text-quote)::before{
  content: "“";
  font-size: 26px;
  line-height: 0;
  vertical-align: -0.10em;
  margin-right: 5px;
}
:where(blockquote, .author-text-quote)::after{
  content: "”";
  font-size: 26px;
  line-height: 0;
  vertical-align: -0.10em;
  margin-left: 5px;
}

/*

	.author-text{ font-size: 30px; line-height: 1.3; }
	.author-text-body{ font-size: 20px; line-height: 1.5; }

*/

/* ≤960px */
@media (max-width: 960px){
  	.article-head .article-title{
    max-width: 70%; font-size: 50px;  
  	}
  	.article-head .article-subtitle{
    max-width: 70%; font-size: 25px;
  	}
	
}

/* ≤640px */
@media (max-width: 640px){
  	.article-head .article-title{
    max-width: 80%; font-size: 40px;
 	 }
  	.article-head .article-subtitle{
    max-width: 70%; font-size: 20px;
  	}
	.article-title { padding: 40px 0 0 10px; }
	.standfirst-box .standfirst,
	.author-text{ font-size: 25px; padding-right: 20px; line-height: 1.4; }
	.author-text-body{ font-size: 20px; padding-right: 20px; line-height: 1.5; }
	.author-text-quote,
	:where(blockquote, .author-text-quote){ font-size: 20px; line-height: 1.5; }
	.author-text-quote,
	:where(blockquote, .author-text-quote)::before{ font-size: 25px; }
	.author-text-quote,
	:where(blockquote, .author-text-quote)::after{ font-size: 25px; }
	.article-view.has-hero::after{
  		background-size: auto 340px;
	}
}

/* Share */

.jd-share{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:10px 0;
}


/* Article limit messaging device / gate */

.user-gate {
	max-width: 500px;
	margin: 20px auto;
	  border:1px dashed color-mix(in srgb, var(--jd-olive) 50%, transparent);
  	padding:20px;
  	background:transparent;
}

.gate-title,
.gate-sub {
	margin: 0 0 10px;
	color: var(--jd-olive);
}

.gate-actions {
	margin: 10px 0;
}

.user-gate .gate-perks {
  list-style: none;
  padding-left: 0;  /* also removes the default indent */
  margin: 0;
}

.gate-perks li h3 {
	color: var(--jd-olive);
}

.fade80 {
	opacity: .8;
}



.user-gate .gate-actions{
  display:flex;
  align-items:center;      /* vertical align */
  gap:10px;                /* space between items */
  flex-wrap:wrap;          /* allow wrap on small screens; use nowrap if you don't want wrapping */
}

.user-gate .gate-actions .p1{
  margin:0;                /* kill default <p> margins */
}

.user-gate .gate-actions .btn{
  white-space:nowrap;      /* keep button labels on one line */
}