@charset "UTF-8";

/* Root variables */
:root {
  --content-width: 44%;
  --row-padding-x: 40px;
  --row-padding-y: 60px;
  --image-gap: 20px;
  --caption-spacing: 8px;
}

/* Reset 1/6 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    font-family: "Neue Haas Grotesk Display Pro", sans-serif;
    background: #fff;
    color: #000;
    overflow-x: hidden;
}


/* ------------------------------ */
/* VERTICAL BRAND BAR */
/* ------------------------------ */

.vertical-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 100vh; 
  background-color: #7F55A3;
  display: flex;
  flex-direction: column;
  justify-content:center;  /*vertical centering */
  align-items: center; /* horizontal centering */
  pointer-events: none; /* avoid blocking any interaction */
  z-index: 999; /* stays above background but below overlay nav */
}	

.vertical-text {
  color: #fff;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.8px;
  writing-mode: vertical-lr;
  text-orientation: mixed; /* keeps letters upright */
  white-space: nowrap;
  margin: 1rem 0;
  text-align: center;
}

.vertical-text.company-name {
  font-weight: 400;
  top: 100px;
  transform-origin: left top;
}

.vertical-text.tagline {
  font-weight: 400;
  top: 40%;
  transform-origin: left center;
}

.vertical-text.date {
  font-weight: 400;
  bottom: 190px;
  transform-origin: left bottom;
}


/* ------------------------------ */
/* HEADER + NAV  */
/* ------------------------------ */
header {
    position: fixed;
    top: 0;
  
    width: 100%;
    height: 0; /* invisible container, keeps elements positioned */
    z-index: 1000;
}

.logo svg {
    width: 30px;
    height: auto;
	color: black; /* important - use black article pgs */
    mix-blend-mode: difference; /* makes it invert/lighten over dark backgrounds */
	transition: color 0.3s ease, background-color 0.3s ease;/* added for color change */
}

.logo-icon {
      position: absolute;
      top: 1.8em;
      left: 2.8em;
      width: 1.8em;
      height: 1.8em;
      z-index: 1001;
    }

/* ------------------------------ */
/* HAMBURGER MENU */
/* ------------------------------ */
.hamburger {
  position: fixed;      /* keep clickable at all times */
  top: 40px;
  right: 40px;
  width: 40px;
  height: 27px;     /* keep at 27px for a balanced X */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1001; /* higher than nav overlay */
  background: none;
  border: none;
  padding: 0;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: black; /* important - use black article pgs */
  margin-bottom: 6px;
  border-radius: 2px;
  mix-blend-mode: difference;
  transition: 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}


.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translateY(12px);    /* keep at 12px for a balanced X */
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-12px);    /* keep at 12px for a balanced X */
}


/* Dark theme overrides  */
.theme-dark .logo svg {
    color: white;
}

.theme-dark .hamburger span {
    background-color: white;
}

.theme-light .logo svg {
    color: #000;
}

.theme-light .hamburger span {
    background-color: #000;
}


/* --------------------------- 
   Nav Overlay 
   --------------------------- */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	inset: 0;
    background: rgba(20,20,20,0.92);
	z-index: 1000;            /* above vertical bar but below hamburger */
	
	display: flex;  /* Hidden by default toggled via JS */
    align-items: center; 
    justify-content: center; 
	
	color: #fff; /* text color. */
    backdrop-filter: blur(4px);
	
    opacity: 0; 
    visibility: hidden; /* keep this on or doesn't work */
	pointer-events: none; 
	transition: opacity 0.3s ease, visibility 0.3s ease; 
}

.nav-overlay.active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  pointer-events: auto; /* allows clicks when active */
}


/* --------------------------- 
   Main nav list 
   --------------------------- */
.nav-overlay ul {
  list-style: none; /* removes bullets */
  padding: 0;
  margin: 0;
  text-align: left; /* aligns all the nav items */
}

.nav-overlay ul > li {
  margin: 20px 0;
 /* font-size: 1.8em; */
}

.nav-overlay ul li a {
font-family: "neue-haas-grotesk-display", sans-serif;  /* main catagories */
  text-decoration: none;
  color: #fff;
  font-size: 4.8rem;  /* larger size for main catagories */
  font-weight: 200;
  transition: color 0.2s ease;
}

.nav-overlay ul > li > a:hover {
  color: #d5ae7b;
}


/* ------------------------------- 
   Sub-navigation (secondary links
   ------------------------------- */
.nav-overlay ul li ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.nav-overlay ul li ul li {
  margin: 6px 0;
}

.nav-overlay ul li ul li a {
	font-family: "neue-haas-grotesk-display", sans-serif;   /* sub catagories */
	font-weight: 300;
	font-size: 2.1rem; /* smaller size for sub catagories */
	letter-spacing: 0.02em;
	color: #CBC4BD;  /* subtle color difference for sub catagories */
	text-decoration: none;
	transition: color 0.2s ease;
}

.nav-overlay ul li ul li a:hover {
  color: #ffffff;
}


/* ------------------------------  
   ARTICLE IMAGE PRE-LOAD    
   ------------------------------ */
.article-image {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
    width: 100%;
    height: 100%;
	object-fit: cover;
	object-position: center top;
    z-index: 0;
}


/* ------------------------------ 
   GRID SETUP (16 columns)
   ------------------------------ */
.center-container {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  column-gap: 20px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0px 0px 0px 0px; 
}


/* ------------------------------ 
   Global Article Layout
   ------------------------------ */
.article {
  max-width: 1920px;          /* Full canvas width */
  margin: 0 auto;              /* Center on page */
  padding: 100px 60px 150px 60px; /* Top, Right, Bottom, Left */
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-column-gap: 20px;
}


/* ------------------------------ 
   Breadcrumb
   ------------------------------ */
.breadcrumb {
  grid-column: 1 / 7;
}


.breadcrumb p {
  margin-left: 53px; 
  margin-right: 13px; 
  font-family: "AdoptiveMono OT", monospace;
  font-weight: 300;
  font-size: 9px;
  color: #999;
  text-align: left;
  text-transform: uppercase;
  padding-top: 10px;
  margin-bottom: 0px;
}


.breadcrumb a {
	color: #555;
	text-decoration: none;
	padding: 0.15em 0.9em;
	border-radius: 6px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
	background-color: #FFED75;
	color: 000;
}
.breadcrumb span {
	color: 999; 
	cursor: default;
}


/* ================================
   Headline (H1 & H2)
   ================================ */
.article-headline {
  grid-column: 1 / 7;
  margin-top: 60px; /* spacing below breadcrumb */
}

.article-headline h1 { 
  margin-left: 53px; 
  margin-right: 0px;
  max-width: 440px;
  font-family: "Baskerville", serif;
  font-size: 56px;
  font-weight: 200;
  font-style: italic;
  color: #000;
  text-align: left;
  line-height: 1;
  letter-spacing: -1.7px;
}

.article-headline h2 { 
  margin-top: 20px;
  margin-right: 0px;
  margin-left: 53px; 
  max-width: 440px;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 200;
  font-size: 24px;
  color: #000;
  text-align: left;
  letter-spacing: 0px;
  line-height: 1.2;
}

.article-subhead { 
  margin-top: 30px;
  margin-left: 53px; 
  max-width: 440px;
  margin-right: 0px;
  font-family: "Baskerville", serif;
  font-size: 14px;
  text-align: justify;
  line-height: 1.5;
  color: #000;
  text-justify: inter-word;
  hyphens: none;
}


h4 {
  font-family: "neue-haas-grotesk-display", sans-serif; 
  font-weight: 600;
  margin-left: 10px; 
  margin-right: 70px;
  max-width: 440px;
  font-size: 12px;
  padding-right: 50px;
  padding-top: 20px;
  padding-bottom: 10px;
  color: #54644d;
  line-height: 1.2;
  letter-spacing: 0px;
  text-align: left;
  hyphens: none;
  border-top: 1px dotted rgba(0,0,0,0.25);
}


/*
.article-body h2 + p {
	text-indent: 0;
}*/



/* author's note text */
/* 
 .authors-note { 
  margin-top: 0px;
  margin-left: 10px; 
	  max-width: 440px;
  margin-right: 0;
  font-family: "AdoptiveMono OT", monospace;
  font-weight: 300;
  font-size: 9px;
  color: #707070;
  padding-right: 0px; 
  text-align: left;
  text-transform: uppercase;
}
*/


/* Insight box (reuse existing style but ensure width) */
.insight-box {
  margin: 0px 0;
  padding: 15px 18px;
  background: #f7f7f7;
  border-left: 3px solid #7BD196;
  font-size: clamp(13pt, 1.2vw, 15pt);
  font-style: italic;
  color: #444;
  line-height: 1.4;
}

/* ================================
   Hero Image
   ================================ */
.article-hero {
  grid-column: 8 / 16;
}

.article-hero img {
  width: 100%;
  max-width: 900px;  /* maintains my width */
  height: auto;      /* maintain aspect ratio */
}

.image-caption {
  margin-top: 20px; /* Gap between image and description */
  line-height: 1.25;
  /* If the parent is align-items: flex-end, this text aligns right */
  text-align: inherit; 
  max-width: 80%; /* Keeps caption from feeling too heavy */
  font-family: "AdoptiveMono OT", monospace;
  font-weight: 300;
  font-size: 0.56em;
  color: #777;
  text-transform: uppercase;
  padding-top: 0px;
  margin-left: 53px;
}


/* ================================
   Spacer before article body
   ================================ */
.article-spacer {
  grid-column: 1 / 17;
  height: 150px;
}


/* ================================
   Article Body (Two Columns)
   ================================ */
.article-body {
  grid-column: 1 / 17;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-auto-rows: 1fr;  /* key - new */
}


/* ===================
   Article Column Left 
   =================== */
.article-col-left {
  grid-column: 1 / 7;
  display: flex; 
  flex-direction: column;  
}

.article-col-left h2 {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 16px;
  color: #000;
  text-align: justify;
  margin-left: 53px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.article-col-left p {
  margin-left: 53px;  
  margin-right: 25px; 
  font-family: "Baskerville", serif;
  font-size: 15px;
  color: #000;
  text-align: justify;
  line-height: 1.5;
/*text-indent: 1.25em; */ 
  margin-bottom: 1.2em;  
}


/* Inline Image */

/*.article-col-left-image {
  grid-column: 1 / 7;
  display: flex;  
  flex-direction: column;  
  margin-left: 53px;  
  margin-right: 25px;
  max-width: 485px;
}*/


/* ====================
   Article Column Right 
   ==================== */
.article-col-right h2 {
  margin-left: 12px;
  margin-right: 66px;
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 16px;
  color: #000;
  text-align: justify;
  padding-bottom: 10px;
  padding-top: 10px;
}

.article-col-right p {
  margin-left: 12px; 
  margin-right: 66px; 
  font-family: "Baskerville", serif;
  font-size: 15px;
  color: #000;
  text-align: justify;
  line-height: 1.5;
/*text-indent: 1.25em; */
  margin-bottom: 1.2em;  
}

.article-col-right p:last-of-type::after {
  content: " ◆";
  font-size: 0.85em;
  margin-left: 0.25em;
}



/* ================================
   Spotify Section Base
   ================================ */
.spotify-embed {
	width: 82%;
	height: auto;
/*  max-width: 420px;*/
	margin: 2rem 1rem 0rem 1rem;
	opacity: 0.95;
	align-self: flex-start;
}



/* ================================
   Siderail Related Content 
   ================================ */
.related-content {
  grid-column: 14 / 16;
  align-self: stretch;  /* default, but explicit is good */
  display: flex;  
  flex-direction: column;   
  justify-content: flex-end;  
/*margin-top: -380px; *//* off replaced with above */
}

.related-content h2 {
  margin-left: 0; 
  margin-right: 0;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 200;
  font-size: 20px;
  color: #777;
  text-align: left;
}

.related-item img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin-top: 10px;
}

.related-subhead {
  margin-left: 0px; 
  margin-right: 0px; 
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  text-align: left;
  margin-top: 5px;
}

.related-text {
  margin-left: 0px; 
  margin-right: 0px; 
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: #000;
  text-align: left;
  margin-top: 5px;
  letter-spacing: 0px;
  line-height: 1.2;
}

.related-text-link {
  margin-left: 0px; 
  margin-right: 0px; 
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #d5ae7b;
  text-align: left;
  margin-top: 10px;
  letter-spacing: 0.1px;
  line-height: 1.2;
}


.related-text-caption {
  margin-left: 0px; 
  margin-right: 0px; 
   font-family: "Baskerville", serif;
  font-weight: 400;
  font-size: 12px;
  font-style: italic;
  color: #000;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 25px;
  letter-spacing: -0.5px;
  line-height: 1.2;
}


/* SPACE BEFORE FOOTER */
.article + footer {
  margin-top: 80px;
}



/* ===========================
   video wrapper
=========================== */
/*
.video-wrapper {
  position: relative;
  width: 50%;
  padding-top: 88.89%; 
  background: #fff;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


.video-hero {
  max-height: 90vh; 
}


.related-video h2 {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 400;
  font-size: 24px;
  margin: 0px 0px 10px 0px;
  color: #777777;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0.5px;
  padding: 10px 20px 10px 20px;
  text-align: center;
}
.related-video h3 {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 400;
  font-size: 12px;
  margin: 0px 0px 10px 0px;
  color: #777777;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0.5px;
  padding: 10px 20px 10px 20px;
  text-align: center;
}
*/


/* === CTA Fullscreen Section === */
.cta-section {
  position: relative;
  width: 100vw;
  height: auto; 
  min-height: 1000px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #111; 
}

.cta-section .cta-image { 
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.cta-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  padding: 0 20px;
  z-index: 2;
}

.cta-eyebrow {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 300;
  font-size: 0.8rem;
  color: #ffffff;
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.cta-headline {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 400;
  font-size: clamp(46px, 5vw, 58px);
  line-height: 1.2;
  margin: 0 0 12px 0;
  text-shadow: 0 0 13px rgba(244, 240, 233, 0.75);
}

.cta-subhead {
  font-family: "Baskerville", "Libre Baskerville", "Georgia", "Times New Roman", serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.4;
  margin-bottom: 20px;
}


/* ======================
   Links styling (global) 
   ====================== */
a:link,
a:visited {
  color: black;
  text-decoration: none;
}
a:hover,
a:active {
  color: #777;
  text-decoration: none;
}

.cta-eyebrow a {
  color: inherit;  /* keeps same color as div - can declare a color if overide is needed */
  text-decoration: none;
  display: inline-block;  /* ensures padding/margin behave well */
}

.cta-eyebrow a:hover {
  text-decoration: underline;   /* feedback on hover */
}


/* ======================================
   FULL-WIDTH LOWER ARTICLE THUMBNAIL ROW 
   ====================================== */

/* H2 headings below related article thumbnail */
.related-article h2 {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 400;
  font-size: 24px;
  margin: 70px 100px 10px 100px;
  color: #777777;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0.5px;
  padding-top: 70px; 
 /* border-top: 1px dotted rgba(0,0,0,0.25); */
}

.ie-image-row-full-thb {
  width: 100%;
  padding: 10px 100px 140px 100px;     
  margin: 0 auto;
  box-sizing: border-box;
  height: auto;   
  display: grid;
  gap: var(--image-gap);    
  grid-template-columns: 1fr 1fr 1fr 1fr; 
}

/* Article thumbnail Image Container */
.ie-image-item-thb {
  flex: 1;
  display: flex;
  flex-direction: column;
  /*gap: var(--caption-spacing);*/
  /*overflow: hidden; */
}

.ie-image-item-thb:hover img {
  transform: scale(1.03);
  opacity: 0.9;
}

/* Article thumbnail Images */
.ie-image-item-thb img {
  width: 100%;
  height: 100%;   /* set to 100% */
  object-fit: cover;            /* Makes landscape, square, portrait all behave beautifully */
  object-position: center;
  display: block;
	
  /* This forces shared height across columns */
  aspect-ratio: 16 / 10;    /* adjust or remove for natural height */
  transition: transform 0.3s ease, opacity 0.3s ease; 
}

/* Related Article Captions */
.ie-image-item-thb figcaption {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size:  16px;
  font-weight: 600;
  color: #3a3a3a;
  text-align: left;
  line-height: 1.3;
  margin-top: 0px;
  padding-top: 7px;
  letter-spacing: 0.1px;   
}

/* Paragraph style for sub-headings below related article thumbnail */
.related-article-subhead {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-size:  14px;
  font-weight: 400;
  color: #111111;
  text-align: left;
  line-height: 1.3;
  margin-top: 0px;
  padding-top: 3px;
  letter-spacing: 0px;  
}


/* ==========================
   FADE-IN ON SCROLL 
   ========================== */

.fade-in {
  opacity: 0.5;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out,
              transform 0.8s ease-out;
  will-change: opacity, transform;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ---------------------------------------------------------------------------------------------- */
/* article-column-right and .related-content controls for the sidebar call area - keep low on css */
/* ---------------------------------------------------------------------------------------------- */
.article-col-right {
  grid-column: 7 / 13;
  display: flex;  
  flex-direction: column;  
}

.article-col-right .related-content {
 margin-top:auto;
}

/* ------------------------------ */
/* MAIN CONTENT PLACEHOLDER */
/* ------------------------------ */
main {
	padding: 100px 80px;
}

main .content {
    max-width: 44%;
    line-height: 1.4;
    font-size: 20px;
}


/* ------------------------------ */
/* FOOTER - desktop */ 
/* ------------------------------ */

footer {
    width: 100%;
	display: block; /* changed from flex to block to allow vertical stacking */
    background-color: #111;
    color: #5B5B5B;
	padding: 60px 20px 30px 40px; 
	box-sizing: border-box; /* Ensure padding doesn't break width */
}

/* ----------------------------PILLARS (Integrated with existing fade-in script) */
.footer-pillars {
  display:flex;
  justify-content: flex-start; /* Aligns items to top left */
  flex-wrap: wrap;
  column-gap: 60px; /*Large gap between pillars */
  row-gap: 30px; /* Gap if they wrap to a second line */
  margin-bottom: 50px; 
  max-width: 1400px; /* Prevents them from stretching too far on a giant monitor */
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  font-weight: 500;
  color: #414141;
	
  /* Animation Initial state */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
  will-change: opacity, transform;
}

.footer-pillars span {
  transition: color 0.4s ease, transform 0.4s ease;
  cursor: default;
}

.footer-pillars span:hover {
  color: #888;
  transform: translateY(-2px);
}


/* Matches exisiting JavaScript class */
.footer-pillars.visible {
  opacity: 0.6s; 
  transform: translateY(0);
}


.footer-divider {
  border: 0;
  border-top: 1px solid #333;
  margin: 0 0 20px 0; 
  width: 100%;
}

/* ----------------------------bottom: copyright left, links right */
.footer-bottom {
  display: flex;
  justify-content: space-between; /* copyright left, links right */
  align-items: flex-end;  /* anchors them to the bottom of this row */
}


/* copyright */
.footer-left {
  font-size: 11px;
  color: #888;
}

/* footer text - right side */
.footer-right {
  text-align: right;
  justify-content:center;
}

/* footer links */
.footer-right a {
    margin-left: 20px;
	display:inline; 
	font-family: "Neue Haas Grotesk Display Pro", sans-serif;
    font-size:  21px;
    font-weight: 400;
    color: #414141;
    text-decoration: none;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
	text-transform: uppercase;
	transition: opacity 0.3s ease; 
}

/* footer links-hover state */
.footer-right a:hover {
    color: #999;
	opacity: 0.5; 
}

.footer-right a:first-child {
	margin-left: 0;
}

.footer-right a:last-child {
	margin-right: 0;
}

.footer-right a + a::before {   /* auto separators */
	content: "/";
	color: #414141;
	margin-left: 0.1rem;
	margin-right: 0.3rem;
}

/* Style for the active page link */
.footer-right a.current {
    color: #6c604f; /* Warm, muted gold */
    pointer-events: none; /* Prevents clicking the current page */
    cursor: default;
    opacity: 1; /* Ensures it stays bright and doesn't use the 0.5 hover opacity */
}

/* Optional: separator (/) to stay the dark gray color so the gold stands out more */
.footer-right a.current + a::before,
.footer-right a + a.current::before {
    color: #414141; 
}





/* ============================================= */
/*    1200px laptop/desktop    */
/* ============================================= */
@media (max-width : 1200px ){
  
.cta-headline {
  font-size: clamp(24pt, 6vw, 32px);
}

.breadcrumb {
  grid-column: 1 / 7;
}
	
.breadcrumb p {
  margin-left: 0px;  
  font-size: 8px;
}


/* ================================
   Headline (H1 & H2)
   ================================ */
.article-headline {
  grid-column: 1 / 7;
  margin-top: 10px; 
}

.article-headline h1 { /* changed to h2 for index page */
  margin-left: 0px;
  margin-top: 30px;
  font-size: 42px;
  letter-spacing: -1px;
}


.article-headline h2 { /* changed to h2 for index page */
  font-size: 18px;
  margin-top: 20px;
  margin-left: 0px; 
  margin-right: 0px;
  padding-right: 20px;
  line-height: 1.2;
}

	
h3 { /* author's note header */
  font-size: 14px;
  margin: 0px 0px 0px 0px;
  padding-right: 0px;
  padding-top: 20px;
  padding-bottom: 30px;
}

h4 {
  font-size: 14px;
  margin: 0px 30px 0px 0px;
  padding-right: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
}


.article-subhead { 
  margin-top: 20px;
  margin-left: 0px; 
  margin-right: 0px;
  font-size: 14px;
  line-height: 1.4;
}

.image-caption {
  max-width: 100%; 
  font-size: 8px;
  margin-left: 0px;
}	
	
.authors-note { 
  margin-top: 0px;
  margin-left: 0px; 
  margin-right: 0;
  font-size: 9px;
}
		
.article {
  padding-bottom: 60px; 
}	
	
.article-body {
  grid-column: 1 / 17;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-auto-rows: 1fr;  
}
	
.article-col-left {
  grid-column: 1 / 7;
  display: flex;  
  flex-direction: column;  
}
	
.article-col-left h2 {
  font-size: 16px;
  margin-left: 0px;
  margin-right: 0px;
}
	
.article-col-left p {
  margin-left: 0px;  
  margin-right: 25px; 
  font-size: 14px;
	margin-bottom: 1.2em; 
}

	
.article-col-right {
  grid-column: 7 / 13;
  display: flex;  
  flex-direction: column;  
}
	
.article-col-right h2 {
  margin-left: 0px;
  margin-right: 0px;
  font-size: 16px;
}

.article-col-right p {
	margin-left: 0px;
	margin-right: 25px;
	font-size: 14px;
	margin-bottom: 1.2em; 
}
	

/* ================================
   Article Body List Styling
   ================================ */
.article-col-left .article-list {
  font-family: "Baskerville", serif;
  font-size: 14px;
  line-height: 1.5;
  margin-left: 0px;   
  margin-right: 25px;  
  margin-bottom: 1.2em;
  padding-left: 10px;  
  list-style-type: disc; 
}


/* ===========================
   Spotify Section Base
=========================== */
	
.spotify-embed {
  width: 300px;
  height: auto;
  margin: 2rem 0rem 0rem 0rem;
  opacity: 0.95;
  align-self: flex-start;
}
	

/* ===========================
   video wrapper
=========================== */

/*
.video-wrapper iframe {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto; 
  object-fit: cover;
  object-position: center;
}

.related-video .video-wrapper iframe { 
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 820px;
  object-fit: cover;
  object-position: center; 
}

.related-video h3 {
  font-size: 17px;
  margin: 0px 0px 0px 0px;
  padding: 0px 20px 0px 20px;
  text-align: center;
}
*/

	
.article-hero {
  grid-column: 9 / 17;
}

.article-spacer {
  grid-column: 1 / 17;
  height: 80px;
}

	
/* ================================
   Related Content side rail - 1200px
   ================================ */
.related-content {
  grid-column: 14 / 17;
 }
	
.related-content h2 {
  font-size: 20px;
}	
	
.related-subhead {  
  font-size: 16px;
  font-weight: 600;
  margin-top: 5px;
}
	
.related-text {
  font-size: 15px;
}

.related-text-link {
  font-size: 15px;
	padding-bottom: 20px;
 }	


/* =========================== 1200px (mobile: FOOTER ONLY - new adjustments) ====================== */	
.footer-pillars {
	column-gap: 30px; /* Slightly tighter spacing for mid-size screens */
	font-size: 0.67rem;
   }
  }




/* ============================================= */
/*    1024px (large tablets / small desktops)    */
/* ============================================= */
@media (max-width: 1024px) {
  
.cta-headline {
  font-size: clamp(24pt, 6vw, 32px);
}

.breadcrumb {
  grid-column: 1 / 7;
}
	
.breadcrumb p {
  margin-left: 0px;  
  font-size: 8px;
}

.article-headline {
  grid-column: 1 / 7;
  margin-top: 10px; 
}

/* ================================
   Headline (H1 & H2) 1024px
   ================================ */
.article-headline h1 { 
  margin-left: 0px;
  margin-top: 30px;
  font-size: 36px;
  letter-spacing: -1px;
  margin-right: 0px;
}


.article-headline h2 { 
  margin-top: 20px;
  margin-left: 0px; 
  margin-right: 0px;
  padding-right: 0px;
  font-size: 16px;
  line-height: 1.2;
}

h4 {
  margin-left: 0px; 
  margin-right: 30px;
  max-width: 100%;
}
	
.article-subhead { 
  margin-top: 20px;
  margin-left: 0px; 
  margin-right: 0px;
  font-size: 12px;
  line-height: 1.4;
}

.image-caption {
  max-width: 100%; 
  font-size: 8px;
  margin-left:0px;
}	
	

/* --------------------
   Article Body
   -------------------- */	
.article {
  padding-bottom: 60px; 
}	
	
.article-body {
  grid-column: 1 / 17;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-auto-rows: 1fr;  
}


/* --------------------
   Article Column Left
   -------------------- */	
.article-col-left {
  grid-column: 1 / 7;
  display: flex;  
  flex-direction: column;  
}
	
.article-col-left h2 {
  font-size: 16px;
  margin-left: 0px;
  margin-right: 0px;
}
	
.article-col-left p {
  margin-left: 0px;  
  margin-right: 25px; 
  font-size: 14px;
  margin-bottom: 1.2em; 
}

	
/* --------------------
   Article Column Right
   -------------------- */	
.article-col-right {
	grid-column: 7 / 13;
	display: flex;
	flex-direction: column;
	}
	
.article-col-right h2 {
	margin-left: 0px;
	margin-right: 0px;
	font-size: 16px;
	}

.article-col-right p {
	margin-left: 0px;
	margin-right: 25px;
	font-size: 14px;
	margin-bottom: 1.2em;
	}
	

/* --------------------
   Spotify Section Base
   -------------------- */
.spotify-embed {
  width: 300px;
  height: auto;
  margin: 2rem 0rem 0rem 0rem;
  opacity: 0.95;
  align-self: flex-start;
}
	

/* ===========================
   video wrapper
=========================== */

/*
.video-wrapper iframe {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto; 
  object-fit: cover;
  object-position: center;
}

.related-video .video-wrapper iframe { 
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 820px;
  object-fit: cover;
  object-position: center; 
}

.related-video h3 {
  font-size: 17px;
  margin: 0px 0px 0px 0px;
  padding: 0px 20px 0px 20px;
  text-align: center;
}
*/


/* -------------------
   Hero Image - 1024px
   ------------------- */
.article-hero {
  grid-column: 9 / 17;
}

	
.article-spacer {
  grid-column: 1 / 17;
  height: 80px;
}

	
/* ----------------------------------
   Side Rail Related Content - 1024px
   ---------------------------------- */

.related-content {
  grid-column: 14 / 17;
 }
	
.related-content h2 {
  font-size: 20px;
}	
	
.related-subhead {  
  font-size: 15px;
  font-weight: 600;
  margin-top: 5px;
}
	
.related-text {
  font-size: 14px;
}

.related-text-link {
  font-size: 14px;
  padding-bottom: 20px;
}	


/* =========================== mobile: FOOTER ONLY - new adjustments - 1024px  ====================== */
	.footer-pillars {
		column-gap: 30px; /* Slightly tighter spacing for mid-size screens */
		font-size: 0.67rem;
	}
  }

/* ============================================= */
/*     900px (tablet: 2-column image grids)      */
/* ============================================= */
@media (max-width: 900px) {
	
/* cta section width controls */
 .cta-overlay {
	 min-width: 400px;
	} 
	
 .cta-subhead {
	 font-size: 14px;
    }	
	
.article {
	padding-top: 0px;
	padding-right: 20px;
	padding-left: 20px;
	}

.article-headline {
	grid-column: 1 / 7;
	margin-top: 10px;
	}
	
	
/* ----------------------------------
   Headline (H1 & H2) 900px
   ---------------------------------- */
.article-headline h1 { 
  margin-left: 0px;
  margin-top: 60px;
  font-size: 33px;
  letter-spacing: -1px;
  margin-right: 0px;
}

.article-headline h2 { 
  margin-top: 20px;
  margin-left: 0px; 
  margin-right: 0px;
  padding-right: 0px;
  font-size: 15px;
  line-height: 1.2;
}

	
h4 {
  margin-left: 0px; 
  margin-right: 30px;
  max-width: 100%;
}
	
	
.article-subhead { 
  margin-top: 20px;
  margin-left: 0px; 
  margin-right: 0px;
  font-size: 11px;
  line-height: 1.4;
}
	
.image-caption {
  max-width: 100%; 
  font-size: 8px;
}	
	
	
/* ----------------------------------
   Hero image 900px
   ---------------------------------- */	
.article-hero {
	grid-column: 8 / 17;
	}

.article-hero img {
	width: 100%;
	max-width: 600px;  
	margin-top: 80px;
	}		
	
	
.article-spacer {
	grid-column: 1 / 17;
	height: 80px;
	}

	
/* ----------------------------------
   Article Column Left - 900px
   ---------------------------------- */	
.article-col-left {
  grid-column: 1 / 7;
  display: flex;  
  flex-direction: column;  
}

.article-col-left h2 {
  margin-left: 0px;
  font-size: 13px;
}
	
.article-col-left p {
  margin-left: 0px;  
  margin-right: 25px; 
  font-size: 14px;
  margin-bottom: 1.2em;
}

	
/* ----------------------------------
   Article Column Right - 900px
   ---------------------------------- */	
.article-col-right {
  grid-column: 7 / 13;
  display: flex;  
  flex-direction: column;  
}
	
.article-col-right h2 {
  margin-left: 0px;
  margin-right: 0px;
  font-size: 13px;
}

.article-col-right p {
	margin-left: 0px;
	margin-right: 25px;
	font-size: 14px;
	margin-bottom: 1.2em;
}


/* =============================================
   Related Article Thumbnail H2 headings - 900px
   ============================================= */	
.related-article h2 {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 400;
  font-size: 24px;
  margin: 70px 100px 10px 100px;
  color: #777777;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0.5px;
  padding-top: 70px; 
 /* border-top: 1px dotted rgba(0,0,0,0.25); */
}
	
	
/* ----------------------------------------
   Related Article Thumbnail Images - 900px
   ---------------------------------------- */	
  .ie-image-row-full-thb {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  padding: 40px 100px 50px 100px;
	  gap: 20px;
  }
  .ie-image-item-thb img {
	  aspect-ratio: 4 / 3;
  }	
	
	
/* =================================
   Side Rail Related Content - 900px
   ================================= */

.related-content h2 {
  font-size: 16px;
}	
	
 .related-subhead {  /* Exhibition title */ 
  font-size: 14px;
  font-weight: 600;
  margin-top: 5px;
}
	
.related-text {
  font-size: 13px;
}

.related-text-link {
  font-size: 13px;
	}
}


/* =====================================
   768px RESPONSIVE NAV ONLY SPECS below
   ===================================== */
@media screen and (max-width: 768px) {
  .nav-overlay {
    padding: 1.5em;
  }

  .nav-overlay ul li {
    font-size: 1.5em;
  }

  .nav-overlay ul li ul.sub-nav {
    padding-left: 1.5em;
    font-size: 1.1em;
  }

   .hamburger {
    top: 20px;
    right: 20px;
    width: 32px;
    height: 24px;
  }
	
	.nav-overlay a {
    font-size: 28px;      
  }

/* =============== 
   Body 768px   
   =============== */


/* cta section width controls */
 .cta-overlay {
	 min-width: 400px;
	} 

	
/* headline in hero + cta section */	
 .cta-headline {
   font-size: clamp(25pt, 4vw, 33px);
	}	
	
 .cta-subhead {
   font-size: 14px;
	}	
	
/* article headline and hero img */
.article-headline {
  grid-column: 1 / 7;
  margin-top: 10px;    
}	
	
/* ================================
   Headline (H1 & H2) 768px
   ================================ */
.article-headline h1 { 
  margin-left: 0px;
  margin-top: 40px;
  font-size: 27px;
  letter-spacing: -0.9px;
  margin-right: 0px;
}

	
.article-headline h2 { 
  margin-top: 10px;
  margin-left: 0px; 
  margin-right: 0px;
  padding-right: 0px;
  font-size: 12px;
  line-height: 1.2;
}

h4 {
  margin-left: 0px; 
  margin-right: 60px;
  max-width: 100%;
}

.article-subhead { 
  margin-top: 20px;
  margin-left: 0px; 
  margin-right: 0px;
  font-size: 9px;
  line-height: 1.4;
}
	
.image-caption {
	max-width: 90%;
	font-size: 8px;
}	
	
	
/* ================================
   Article Hero Image 768px
   ================================ */
.article-hero {
	grid-column: 8 / 17;
	margin-top: 50px;
	}

.article-hero img {
	width: 100%;
	max-width: 600px;  
	margin-top: 0px;
	}	
	
	
/* -------
   Article 
   ------- */
.article {
	padding: 0px 20px 10px 20px;
	}	

	
/* -------------------
   Article Left Column 
   ------------------- */	
.article-col-left {
  grid-column: 1 / 13;
  display: flex;  
  flex-direction: column;   
}

.article-col-left h2 {
  margin-left: 0px;
  font-size: 13px;
}
	
.article-col-left p {
  margin-left: 0px;  
  margin-right: 55px;   /* controls space on rightside of the article in single column format */
  font-size: 14px;
 /* margin-bottom: 1.2em; */ /* space below last line in article */
  margin-bottom: 10px;
}

	
/* --------------------
   Article Right Column 
   -------------------- */
.article-col-right {
  grid-column: 1 / 13;
  display: flex;  
  flex-direction: column; 
  margin-top: 2rem;   
  width: 100%;
  padding: 0 0px;
}

 .article-col-right p {
  margin-left: 0px;  
  margin-right: 55px;  /* controls space on rightside of the article in single column format */
  font-size: 14px;
/*margin-bottom: 1.2em; */  /* space below last line in article */
  margin-bottom: 10px;
}
	

	
/* -------------------
   Article Thumbnails 
   ------------------- */
  .ie-image-row-full-thb {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  padding: 20px 100px 0px 100px;
	  gap: 20px;
	  margin-bottom: 90px;
	}
	
	.ie-image-item-thb img {
		aspect-ratio: 4 / 3;
	}
	
/*------- Article Thumbnail H2 headings----- */
	.related-article h2 {
		font-size: 24px;
		margin: 80px 100px 20px 100px;
		text-transform: none;
		letter-spacing: 0.5px;
		padding-top: 0px;
		/* border-top: 1px dotted rgba(0,0,0,0.25); */
	}
	
	
/* ---------------------------
   SIDE RAIL - Related Content 
   --------------------------- */
 .related-content {
   min-width: 100px;  
   width: 100%;
   justify-content: flex-end; 
} 
	
 .related-content h2 {
  margin-left: 0; 
  margin-right: 0px;
  font-weight: 200;
  font-size: 15px;
}

.related-item img {
  width: 100%;
  max-width: 100px;
  height: auto;
  display: block;
  margin-top: 10px;
}

.related-subhead {
  margin-left: 0px; 
  margin-right: 0px; 
  font-size: 11px;
  font-weight: 600;
  margin-top: 5px;
}

.related-text {
  margin-left: 0px; 
  margin-right: 0px; 
  font-size: 12px;
  font-weight: 300;
  margin-top: 5px;
  line-height: 1.2;
}

.related-text-link {
  margin-left: 0px; 
  margin-right: 0px;
  font-size: 11px;
  margin-top: 10px;
  line-height: 1.2;
}

	/*
.related-video h3 {
  font-size: 14px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  text-align: center;
}
*/	

	
/* ============== Mobile: FOOTER ONLY - new adjustments -768px ============= */	
	footer {
		padding: 60px 20px 30px; /* Reduces top breathing room slightly */
	}
	
	.footer-pillars {
		column-gap: 30px;
		padding-left: 20px;
	}
	
/* Copyright */
	.footer-left {
		padding-left: 20px;
	}
 }


/* =============================================== */
/*    600px (mobile: single-column image grids)    */
/* =============================================== */
@media ( max-width : 600px ){
	
	.cta-overlay {
		min-width: 400px;
	}
	
	.cta-headline {
		font-size: clamp(26pt, 4vw, 34px);
		padding-left: 20px;
		padding-right: 20px;
	}
	
	.cta-subhead {
	 min-width: 390px;
	}
	
	.breadcrumb {
		grid-column: 1 / 8;
	}
	
	.breadcrumb p {
		margin-left: 0px;
		font-size: 8px;
	}
	
	
   .article {
	   padding-top: 0px;
	   padding-right: 0px;
	   padding-left: 20px;
	}	

	
.article-headline {
  grid-column: 1 / 9;
  margin-top: 30px; 
}		

.article-headline h1 { 
  margin-left: 0px;
  margin-top: 0px;
  font-size: 26px;
  letter-spacing: -0.9px;
  margin-right: 0px;
}
	
.article-headline h2 { 
  margin-top: 30px;
  margin-left: 0px; 
  margin-right: 0px;
  padding-right: 0px;
  font-size: 11px;
}

h4 {
  margin-left: 0px; 
  margin-right: 20px;
  max-width: 100%;
}
	
.article-subhead { 
  margin-top: 20px;
  margin-left: 0px; 
  margin-right: 0px;
  font-size: 12px;
}

.image-caption {
  max-width: 90%; 
  font-size: 7px;
  margin-top: 10px;
}	
	

/* ================================
   Article Hero Image 600px
   ================================ */
.article-hero {
	grid-column: 10 / 17;
	margin-top: 35px;
	}

.article-hero img {
	width: 100%;
	max-width: 500px;  
	margin-top: 0px;
	}	
	
	
.article-spacer {
  grid-column: 1 / 17;
  height: 40px;
}

/* ================================
   Article Column Left 600px
   ================================ */	
.article-col-left {
  grid-column: 1 / 13;
  display: flex;  
  flex-direction: column;  
}

.article-col-left h2 {
  margin-left: 0px;
  font-size: 13px;
}
	
.article-col-left p {
  margin-left: 0px;  
  margin-right: 25px; 
  font-size: 14px;
  margin-bottom: 1.2em;  
}


/* ================================
   Article Column Right 600px
   ================================ */	
.article-col-right {
  grid-column: 1 / 13;
  display: flex;  
  flex-direction: column;
  margin-top: 2rem;   
  width: 100%;
  padding: 0px 0px 0px 0px;
}

.article-col-right h2 {
  margin-left: 0px;
  margin-right: 0px;
  font-size: 13px;
}
	
 .article-col-right p {
  margin-left: 0px;  
  margin-right: 25px; 
  font-size: 14px;
  margin-bottom: 1.2em;  
}
	   
	
	
/* ================================
   Side Rail - Related Content - 600px
   ================================ */
.related-content {
  min-width: 100px;  
  width: 100%;
  justify-content: flex-end;  
}

.related-content h2 {
  margin-left: 0; 
  margin-right: 0;
  font-weight: 200;
  font-size: 14px;
}

.related-item img {
  width: 100%;
  max-width: 100px;
  height: auto;
  display: block;
  margin-top: 10px;
}

.related-subhead {
  margin-left: 0px; 
  margin-right: 0px; 
  font-size: 14px;
  font-weight: 600;
  margin-top: 5px;
}

.related-text {
  margin-left: 0px; 
  margin-right: 0px; 
  font-size: 13px;
  font-weight: 300;
  margin-top: 5px;
  line-height: 1.2;
}

.related-text-link {
  margin-left: 0px; 
  margin-right: 0px; 
  font-size: 13px;
  margin-top: 10px;
  line-height: 1.2;
}

	
/* ----------------------------------------------------
   Related Article H2 headings below thumbnail  - 600px
   ---------------------------------------------------- */	
.related-article h2 {
  font-size: 24px;
  margin: 80px 100px 20px 100px;
  text-transform: none;
  letter-spacing: 0.5px;
  padding-top: 0px; 
 /* border-top: 1px dotted rgba(0,0,0,0.25); */
}
	
/* Related article thumbnails */
.ie-image-row-full-thb {
  grid-template-columns: 1fr;
  padding: 30px 100px;
  gap: 14px;
}
	
/* Related article Paragraph style for sub-headings below thumbnail */
.related-article-subhead {
  padding-bottom: 40px;
}

.related-video h3 {
  font-size: 12px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  text-align: center;
}
	

	
/* ============ 600px (mobile: NEW FOOTER ONLY adjustments)  ============= */	
	.footer-bottom {
	flex-direction: column; /* Stackes Copyright above links */
	align-items: flex-start; /*Aligns to the left axis */
	gap: 15px;
	}
	
	.footer-pillars {
	flex-direction: column; /* Pillars now stacke vertically like a list */
	font-size: 11px; /* Sharper text for small screens */
	padding-right: 0px;
	} 
	
	
	/* copyright */
	.footer-left { /* kept from previous- needed ? */
    font-size: 10px;
	}
	
	.footer-right {
    text-align: left;
	display: flex;
	flex-wrap: wrap;
	gap: 15px; /* Space between About / Contact / Policies */
	padding-left: 20px;
   }	
	
	/* footer links */
	.footer-right a {
    font-size:  14px;
	margin-left: 0; /* Reset desktop margins */
   }	

	

/* -----------------------  600px (mobile) RESPONSIVE ADJUSTMENTS FOR NAV + VERTICAL BAR */
  .vertical-bar {
    width: 16px; /* slightly thinner on phones */
  }

  .vertical-text {
    font-size: 8px; /* scale down branding text */
  }

  .hamburger {
    top: 20px;
    right: 20px;
    width: 32px;
    height: 24px;
  }

  .nav-overlay a {
    font-size: 28px; /* smaller menu items for small screens */
  }
}



/* ============================================= */
/*  480px (small mobile / extra-narrow screens)  */
/* ============================================= */
@media (max-width: 480px) {
 
    .cta-eyebrow {
    font-size: 7px;
    letter-spacing: 0.8px;
    }

	.cta-overlay {
	min-width: 400px;
	}
	
	
	.cta-headline {
	font-size: clamp(26pt, 4vw, 34px);
	padding-left: 20px;
	padding-right: 20px;
	}
	
	.cta-subhead {
	 min-width: 390px;
	}
	
	
	.breadcrumb {
	grid-column: 1 / 17;
	padding-bottom: 20px;
	}
	
	.breadcrumb p {
	margin-left: 0px;
	font-size: 8px;
	}
	

   .article {
	padding-top: 0px;
	padding-bottom: 10px; 
	padding-right: 20px; 
	padding-left: 20px;  
	}	
		

.article-headline {
  grid-column: 1 / 17;
  margin-top: 0px; 
}	

.article-headline h1 { 
  margin-left: 0px;
  margin-top: 30px;
  font-size: 41px;
  letter-spacing: -1px;
}
	
.article-headline h2 { 
  margin-top: 10px;
  margin-left: 0px; 
  margin-right: 0px;
	margin-bottom: 0px;
  padding-right: 0px;
  font-size: 18px;
}

h4 {
  margin-left: 0px; 
  margin-right: 0px;
  max-width: 100%;
}	
	
.article-subhead { 
  margin-top: 0px;
  margin-left: 0px; 
  margin-right: 0px;
  font-size: 13px;
}

.image-caption {
  max-width: 90%; 
  font-size: 8px;
  margin-top: 20px;
}	
	

 .article-hero {
  grid-column: 1 / 17;
}

.article-hero img {
  width: 100%;
  max-width: 490px;  
  margin-top: 20px;
}
	
.article-spacer {
  grid-column: 1 / 17;
  height: 50px;
}
	
	
.article-col-left {
  grid-column: 1 / 17;
  display: flex;  
  flex-direction: column;  
}

.article-col-left h2 {
  margin-left: 0px;
  font-size: 13px;
}
	
.article-col-left p {
  margin-left: 0px;  
  margin-right: 0px; 
  font-size: 14px;
}
	
.article-col-right {
  grid-column: 1 / 17;
  display: flex;  
  flex-direction: column; 
}

.article-col-right h2 {
  margin-left: 0px;
  margin-right: 0px;
  font-size: 13px;
}
	
.article-col-right p {
  margin-left: 0px;  
  margin-right: 0px; 
  font-size: 14px;
  margin-bottom: 1.2em; 
}
	

/* empty space patch below */
	.article-body{
		grid-auto-rows: auto;
	}	

	
/* ================================
   Side Rail Related Content - 480px
   ================================ */	
.related-content {
	grid-column: 1 / 17;
	align-self: start;        
    display: flex; 
    flex-direction: column; 
	justify-content: flex-start;   
	margin-top: 50px;    
	margin-bottom: 0px;
	}

	
.related-content h2 {  
  font-weight: 200;
  font-size: 1.9em;
}	
	
.related-subhead {  
  font-size: 1.6em;
  font-weight: 600;
  margin-top: 5px;
}
	
.related-text {  
  font-size: 1em;
	padding-right: 50px;
}

.related-text-link {
  font-size: 1em;
}	
	
.related-item img {
  min-width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
}
	
	
/* H2 Header ABOVE thumbnail */
 .related-article h2 {
  padding-top: 50px; /* above dotted line */
 }
	
	

/* ===========================
   video wrapper
=========================== */


/* Video H2 heading */
/*
.related-video h2 {
  font-size: 16px;
	font-weight: 500;
  margin: 50px 0px 0px 0px;
  letter-spacing: 0px;
  padding: 0px 0px 0px 0px;
  text-align: center;
}
	
*/
	
/* ========================== 480px (mobile: NEW FOOTER ONLY adjustments)  ========================= */		
	
	   .footer-pillars {
		flex-direction: column; /* Pillars now stacke vertically like a list */
		row-gap: 15px;
		margin-bottom: 40px;
	}
	   .footer-pillars span {
		font-size: 0.7rem; /* Sharper text for small screens */
		gap: 10px;
	}
	
	
	
/* ======================================== */
/* 480px ADJUSTMENTS FOR NAV + VERTICAL BAR */
/* ======================================== */
	
  .vertical-bar {
	  width: 14px;
	}

  .vertical-text {
	  font-size: 7px;
	}

  .hamburger {
	  top: 24px;
	  right: 24px;
	  width: 28px;
	  height: 24px;
	}

  .nav-overlay a {
	  font-size: 22px;
	}	
	
  .nav-overlay ul li a {
	  font-family: "neue-haas-grotesk-display", sans-serif;  /* main catagories */
	  text-decoration: none;
	  color: #fff;
	  font-size: 22px;  /* larger size for main catagories */
	  font-weight: 400;
	  transition: color 0.2s ease;
	}
}