/* Section pills = breadcrumb-like, no arrows */
.section-menu-nav { margin: 10px 0 10px 20px; }
.section-menu-nav .crumb-list{
  display:flex; gap:10px; flex-wrap:wrap; list-style:none; margin:0; padding:0;
}
.section-menu-nav .crumb a{
  position: relative;
  text-decoration: none;
  color: var(--jd-cream);
  padding: 2px 2px calc(2px + var(--underline-thickness)); /* breathing room */
  display: inline-block;
  line-height: 1;
}

.section-menu-nav .crumb a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--underline-thickness);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease-out;
}

.section-menu-nav .crumb a:hover{
  background: var(--jd-nearly-blk);
  color: var(--jd-mustard);
}

.section-menu-nav .crumb a:hover::after{
  transform: scaleX(1);
}

.section-menu-nav .crumb-item.is-active .crumb a::after{
  /* keep underline hidden on active, optional */
  transform: scaleX(0);
}



/* In case markup includes <u> or <ins> inside the link */
.section-menu-nav .crumb a u,
.section-menu-nav .crumb a ins { text-decoration: none; }


.section-menu-nav .crumb-item.is-active .crumb a{
  background: var(--jd-cream);
  color: var(--jd-nearly-blk);
}

/* Hide for tab filtering */
.is-hidden{ display: none !important; }

/* -----------------------------
   Base tokens (tweak to taste)
-------------------------------- */
:root{
  /* Brand fallbacks if not already defined globally */
  --jd-cream:    #F8EDC2;
  --jd-nearly-blk: #151D0A;
  --jd-olive:    #4f6139;
  --jd-grey:     #c4c6bd;
 --max-width: 660px;
  --overhang: 120px; /* how much to extend beyond the text column on each side */
}


/* -----------------------------
   Section wrapper
-------------------------------- */
.j-section{
  	position: relative;
  	background: transparent;
  	border-bottom: 1px dashed color-mix(in srgb, var(--jd-cream, #F8EDC2) 40%, transparent);	
}

.j-hero {
	
}

.j-hero-text {
	margin: 0 auto 20px;
	max-width: var(--max-width);
	padding: 10px;
}

/* row container */
.j-section-row{
  display: flex;
  align-items: flex-start;
  gap: 2rem;        /* space between left and right */
}

/* your existing left column */
.j-section-extra{ width: 30%; }

/* push the right block to the far edge */
.j-section-top{ margin-left: auto; }

/* Generic decorative header image */
.j-header-image{
  display:block;
  width: 100%;
  height:auto;
  margin: 0 auto 10px;     /* centered by default */
  line-height:0;
}

.j-header-image.-overhang{
  display:block;
  width: calc(100% + var(--overhang) * 2);
  max-width:none;
  margin-left: calc(-1 * var(--overhang));
  margin-right: calc(-1 * var(--overhang));
}

/* tweak on small screens */
@media (max-width: 800px){
  :root{ --overhang: 32px; }
}


/* Optionally left/right align per section */
.j-header-image.-left{ margin-left:0; }
.j-header-image.-right{ margin-left:auto; }

/* Slightly tighter spacing in Yes/No cards */
.j-yes .j-header-image,
.j-no  .j-header-image{ margin-bottom: 5px; }

/* Mobile: keep it neat */
@media (max-width: 800px){
  .j-header-image{ width: 100%; }
}

/* Make YES/NO behave like a big drop word */
.j-yes h1,
.j-no  h1{
  float: left;
  display: block;                         /* helps shape-outside */
  font-size: 120px;    /* tune to taste */
  line-height: 0.85;
  margin: 10px 20px 0 0;                /* gap to wrapped text */
  text-transform: uppercase;
  letter-spacing: .02em;
  /*font-family: var(--font-serif, serif);
  font-weight: 400;                        avoid shouty bold */
}

/* Smooth rectangular wrap (modern browsers) */
@supports (shape-outside: margin-box){
  .j-yes h1,
  .j-no  h1{ shape-outside: margin-box; }
}

/* Tuck first paragraph up against the drop word */
.j-yes p:first-of-type,
.j-no  p:first-of-type{ margin-top: 0; }

/* Prevent later elements from snaking under the float */
.j-yes::after,
.j-no::after{
  content: "";
  display: table;
  clear: both;
}

/* Mobile: don’t wrap; stack instead 
@media (max-width: 700px){
  .j-yes h1,
  .j-no  h1{
    float: none;
    margin: 0 0 .25rem 0;
    font-size: clamp(36px, 12vw, 64px);
  }
}*/



.back-to-top a{ display:inline-flex; align-items:center; gap:.4rem; }
.back-to-top a img{ width:18px; height:18px; display:block; }  /* sits flush with text */


/* ONLY affect the Back to top link */
.back-to-top a,
.back-to-top a:hover,
.back-to-top a:focus-visible{
  text-decoration: none !important;
  border-bottom: 0 !important;        /* neutralise global underline */
}

/* Your desired 2px underline on hover */
.back-to-top a{
  border-bottom: 2px solid transparent;   /* width set here */
  text-decoration: none;
  transition: border-bottom-color .2s, color .2s;
}
.back-to-top a:hover{
  border-bottom: 2px solid var(--jd-mustard);
  color: var(--jd-mustard);
}



/* stack on small screens */
@media (max-width: 800px){
  .j-section-row{ flex-direction: column; }
  .j-section-extra{ width: 100%; }
  .j-section-top{ margin-left: 0; align-self: flex-end; }
}


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

.prose blockquote {
  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.3;
  padding: 10px 20px;
  margin: 0 40px 40px 0;
  border-left: 1px solid var(--jd-cream);
  position: relative;
	width: 50%;
}

/* Links inside quotes */
.prose blockquote 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) */
.prose blockquote::before{
  content: "“";
  font-size: 26px;
  line-height: 0;
  vertical-align: -0.10em;
  margin-right: 1px;
}
.prose blockquote::after{
  content: "”";
  font-size: 26px;
  line-height: 0;
  vertical-align: -0.10em;
  margin-left: 1px;
}