@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;
}

/* semantic H1 (hidden visually)  */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------ */
/* 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: white; /* 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 */
}

/* previous - now unused - save */
.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: white; /* 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;
}

/* ------------------------------ */
/* HERO SECTION    */
/* ------------------------------ */
.hero-section {
	position: relative;
    width: 100%;
    height: 100vh;
	min-height: 600px;
	overflow: hidden;
	margin: 0;
    padding: 0;
    z-index: 1;
}

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

/* hero class - previous use - save */
.hero {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
    width: 100%;
    height: 100%;
	object-fit: cover;
	object-position: center top;
    z-index: 0;
}


/* ------------------------------ */
/* HERO SECTION TEXT LAYER */
/* ------------------------------ */

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

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

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

.hero-subhead {
  font-family: "Baskerville", "Libre Baskerville", "Georgia", "Times New Roman", serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.4;
/*max-width: 700px;*/
/*margin: 0 auto;*/
padding-left: 0px;
padding-right: 0px;
	color: #fff;
	  margin-bottom: 20px;

}



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

/* ================================
   Global Article Layout
   ================================ */
.article {
  max-width: 1920px;          /* Full canvas width */
  margin: 0 auto;              /* Center on page */
  padding: 20px 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: 30px; /* spacing below breadcrumb */
}

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


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

.article-lead-paragraph { 
  margin-top: 30px;
  margin-left: 53px; 
  max-width: 400px;
  margin-right: 0;
  font-family: "Baskerville", serif;
  text-align: justify;	
  font-weight: 300;
  font-size: 15px;
  color: #000;
  letter-spacing: 0px;
  line-height: 1.5;
  margin-bottom: 30px;
}

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


.article-headline h3 {
  margin-top: 20px;
  margin-left: 53px;
  margin-right: 0;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 200;
  font-size: 29px;
  color: #000;
  text-align: left;
	letter-spacing: 0px;
}

.editors-note { 
  margin-left: 53px; 
  margin-top: 5px;
  margin-right: 0;
	max-width: 369px;
  font-family: "AdoptiveMono OT", monospace;
  font-weight: 400;
  font-size: 9px;
  color: #505050;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
  line-height: 1.5; 
	text-transform: uppercase;
}

.article-subhead { /* newly created for index page */
  margin-top: 40px;
  margin-left: 53px; 
  max-width: 390px;
  margin-right: 10px;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 600;
  font-size: 27px;
  color: #000;
  text-align: left;
	letter-spacing: 0px;
}


.article-subhead-h3 {
  margin-top: 10px;
  margin-left: 53px; 
  max-width: 380px;
  margin-right: 0px;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 200;
  font-size: 41px;
  color: #000;
  text-align: left;
	letter-spacing: 0px;
	line-height: 1.2;
}

.article-subhead-h4 {
  margin-top: 20px;
  margin-left: 53px; 
  max-width: 380px;
  margin-right: 0px;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #000;
  text-align: left;
	letter-spacing: 0px;
	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: 10px; /* Gap between image and description */
  line-height: 1.25;
  /* If the parent is align-items: flex-end, this text aligns right */
 /* text-align: inherit; */
	text-align: left;
  max-width: 100%; /* Keeps caption from feeling too heavy */
  font-family: "AdoptiveMono OT", monospace;
  font-weight: 300;
  font-size: 8px;
  color: #777;
text-transform: uppercase;
  padding-top: 0px;
	padding-right: 0px;
  margin-left: 0px;
}

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

/* ================================
   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-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; /* change .article-col-right p + h2 BELOW AT SAME INCREMENT*/
  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; /* change .article-col-right p + h2 BELOW AT SAME INCREMENT*/
  max-width: 485px;
}



.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: 100%;
 height: auto;
 max-width: 450px;
 margin: 2rem 1rem 0rem 1rem;
 opacity: 0.95;
 align-self: flex-start;
}*/


/* ================================
   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: 1.33em;
  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: 1.2em;
  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: 0.91em;
  font-weight: 300;
  color: #000;
  text-align: left;
  margin-top: 5px;
  letter-spacing: 0px;
  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;
  line-height: 1.2;
	letter-spacing: 0px;
}

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


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



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

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


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


/*IMAGE + VIDEO */
/*.image-credit {
  position: absolute;
  top: 20px; 
  right: 0px;
  color: white;
  font-family: "AdoptiveMono OT", monospace;
  font-weight: 300;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}*/

.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;
}


/* ------------------------------ */
/* HERO FEATURE SECTION    */
/* ------------------------------ */
.feature-section {
	position: relative;
    width: 100%;
    height: 100vh;
	min-height: 600px;
	overflow: hidden;
	margin: 0;
    padding: 0;
    z-index: 1;
}

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

/* hero class - previous use - save */
.feature {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
    width: 100%;
    height: 100%;
	object-fit: cover;
	object-position: center top;
    z-index: 0;
}


/* ------------------------------ */
/* FEATURE SECTION TEXT LAYER */
/* ------------------------------ */

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

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

.feature-headline {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 400;
  font-size: clamp(42px, 4vw, 54px);
  line-height: 1.1;
  margin: 0 0 12px 0;
  text-shadow: 0 0 13px rgba(244, 240, 233, 0.75);
}

.feature-subhead {
  font-family: "Baskerville", "Libre Baskerville", "Georgia", "Times New Roman", serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.4;
max-width: 480px;
margin: 0 auto;
padding-left: 50px;
padding-right: 50px;
}




/* === 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: 400;
  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; */
}



/* ------- hover 1/12/26----- */
.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; /* ------- hover 1/12/26----- */
}

/* 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: 120px 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; 
}


/* ===============================================
   FULLY CONSOLIDATED RESPONSIVE BREAKPOINTS BELOW
   =============================================== */


/* ============================================= */
/*    1440px (large tablets / small desktops)    */
/* ============================================= */
@media (max-width: 1440px) {

  .cta-headline {
    font-size: clamp(24pt, 6vw, 32px);
  }
	

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


.breadcrumb p {
  margin-left: 53px; 
  margin-right: 13px; 
  padding-top: 80px;
  margin-bottom: 0px;
}


.article-headline {
  grid-column: 1 / 7;
  margin-top: 20px; 
}
	
.article-headline h1 { 
  margin-left: 53px; 
  margin-right: 0px;
  font-size: 59px;
  letter-spacing: -3px;
}
	
.article-headline h2 {
	max-width: 350px;
  margin-top: 10px;
  margin-left: 53px; 
  margin-right: 0px;
  font-size: 24px;
}

	
	.article-lead-paragraph { 
  margin-top: 40px;
  margin-left: 53px; 
  max-width: 340px;
  margin-right: 0px;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #000;
  text-align: left;
	letter-spacing: 0px;
	line-height: 1.4;
 }
}


/* =============================================1024px (large tablets / small desktops)    ============================================= */
@media (max-width: 1024px) {
	.hero-overlay,
	.feature-overlay,
	.cta-overlay {
		min-width: 700px;
	}

.feature-headline {
  font-size: clamp(40px, 5vw, 52px);
  line-height: 1.2;
}
.feature-subhead {
  font-size: 17px;
  line-height: 1.2;
  margin-bottom: 20px;
  padding-right: 20px;
  padding-left: 20px;
}	
	
	
.cta-headline {
  font-size: clamp(40px, 5vw, 52px);
  line-height: 1.2;
}

.cta-subhead {
  font-size: 17px;
  line-height: 1.2;
  margin-bottom: 20px;
  padding-right: 60px;
  padding-left: 60px;
}
	
	
.article {
  padding-bottom: 60px; 
}	
	
.breadcrumb {
  grid-column: 1 / 7;
}
	
.breadcrumb p {
  margin-left: 0px;  
  font-size: 8px;
}

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

.article-headline h1 { 
  margin-left: 0px; 
  margin-top: 50px;
  margin-right: 0;
  font-size: 44px;
  letter-spacing: -2px;
}


.article-headline h2 { 
  margin-top: 30px;
  margin-left: 0px; 
  margin-right: 0px;
  font-size: 18px;
}
	
.article-lead-paragraph { 
  margin-top: 20px;
  margin-left: 0px; 
  font-size: 12px;
}

	
/* 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 {
  position: relative;
  width: 50%;
  padding-top: 88.89%; /* 177.78% = 9:16 aspect ratio */
  background: #fff;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* set to auto on small breakpoints */
  border: 0;
}

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

.image-caption {
  margin-top: 50px; /* Gap between image and description */
  max-width: 80%; /* Keeps caption from feeling too heavy */
  font-size: 0.56em;
  margin-bottom: 20px;
}

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

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

	
.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-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 Content side rail - 1024px
   ================================ */
	

.related-content {
  grid-column: 14 / 17;
 }
	
.related-content h2 {
  font-size: 1.3em;
}	
	
.related-subhead {  /* Exhibition title */ 
  font-size: 1em;
  font-weight: 600;
  margin-top: 8px;
}
	
.related-text {
  font-size: 0.9em;
}

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


/* =========================== 1024px (mobile: FOOTER ONLY - new adjustments) ====================== */	
.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) {
	
/* hero section width controls */
 .hero-overlay {
	 min-width: 470px;
	}
	
	 .feature-overlay {
	 min-width: 470px;
	}
		
	
	
/* cta section width controls */
 .cta-overlay {
	 min-width: 600px;
	} 

	
/* headline in hero + cta section */	
 .hero-headline {
   font-size: clamp(27pt, 4vw, 35px);
	}
 
	
.feature-headline,	
.cta-headline {
  font-size: clamp(40px, 5vw, 52px);
  line-height: 1.2;
}
	
/* subhead in hero + cta section */	
 .hero-subhead {
   padding-left: 10px;
   padding-right: 10px;
   font-size: 14px;
	}	
	

 .feature-subhead {
   padding-left: 20px;
   padding-right: 20px;
   font-size: 17px;
   line-height: 1.2;
	}	

	
.cta-subhead {
  font-size: 17px;
  line-height: 1.2;
  margin-bottom: 20px;
  padding-right: 20px;
  padding-left: 20px;
}
	
	
.article {
	padding-top: 0px;
	padding-right: 20px;
	padding-left: 20px;
	}

/* article headline and hero img */
.article-headline {
	margin-top: 0px;    /* spacing below breadcrumb - pushes article headline down */
	}	
	
.article-hero {
	grid-column: 8 / 17;
	}

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

.article-headline h1 { 
  margin-left: 0px; 
  margin-top: 50px;
  margin-right: 5px;
  font-size: 42px;
  letter-spacing: -2px;
}


.article-headline h2 { 
  margin-top: 30px;
  margin-left: 0px; 
  margin-right: 10px;
  font-size: 16px;
}
	
.article-lead-paragraph { 
  margin-top: 20px;
  margin-left: 0px; 
  margin-right: 10px;
  font-size: 12px;
}


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

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* set to auto on small breakpoints */
  border: 0;
}

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

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

	
.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-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;
}

	

	
/* 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); */
}
	
	
/* other article thumbnails */
  .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;
  }	
	
/* ================================
   Related Content side rail - 900px
   ================================ */

.related-content h2 {
  font-size: 1.1em;
}	
	
 .related-subhead {  /* Exhibition title */ 
  font-size: 0.95em;
  font-weight: 600;
  margin-top: 5px;
}
	
	
.related-text {
  font-size: 0.9em;
}

.related-text-link {
  font-size: 1em;
}	
}


/* =====================================
   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;      
  }

/* =============== */
/*    768px body   */
/* =============== */

	

 .hero-overlay,
 .feature-overlay,
 .cta-overlay {
	 min-width: 500px;
	} 

	
/* headline in hero + cta section */	
 .hero-headline,
 .feature-headline,
 .cta-headline {
   font-size: clamp(30pt, 4vw, 38px);
	}
	
 
/* subhead in hero + cta section */	
 .hero-subhead,
 .feature-subhead {
   padding-left: 80px;
   padding-right: 80px;
   font-size: 14px;
	}
	
 .cta-subhead {
   font-size: 14px;
	}
	
	
/* article headline and hero img */
.article-headline {
  grid-column: 1 / 8;
  margin-top: 20px;    /* spacing below breadcrumb */
	padding-right: 25px;
}	
	
.article-headline h1 { 
  margin-left: 0px; 
  margin-top: 30px;
  margin-right: 15px;
  font-size: 35px;
  letter-spacing: -2px;
}


.article-headline h2 { 
  margin-top: 30px;
  margin-left: 0px; 
  margin-right: 15px;
  font-size: 15px;
}
	
.article-lead-paragraph { 
  margin-top: 20px;
  margin-left: 0px; 
  margin-right: 15px;
  font-size: 9px;
}

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

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* set to auto on small breakpoints */
  border: 0;
}

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

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

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

	
.article-hero img {
width: 100%;
max-width: 560px;  /* maintains width */
margin-top: 85px;
}

	
	
/* article (story) */	
.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;   
}

 .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-col-right {
   margin-top: 2rem;   
   width: 100%;
   padding: 0 0px;
} 

/* other 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;
  }
	
/* H2 headings below related article thumbnail */
.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 Content side rail - 768px
   ================================ */
 .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: 0.9em;
}

.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: 13px;
  font-weight: 600;
  margin-top: 5px;
}

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

.related-text-link {
  margin-left: 0px; 
  margin-right: 0px;
  font-size: 1em;
  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;
}
	

	
/* =========================== 768px (mobile: FOOTER ONLY - new adjustments) ====================== */	
	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 ){
	
	.hero-overlay,
	.feature-overlay,
	.cta-overlay {
		min-width: 400px;
	}
	
	.hero-headline,
	.feature-headline {
		font-size: clamp(26pt, 4vw, 34px);
	}
	
	.cta-headline {
		font-size: clamp(26pt, 4vw, 34px);
		padding-left: 20px;
		padding-right: 20px;
	}
	

	
	/* headline in hero + cta section */
	.hero-subhead,
	.feature-subhead {
    max-width: 348px;
	padding-left: 30px;
    padding-right: 30px;
    font-size: 14px;
	line-height: 1.2;
	}
	
	.cta-subhead {
	 min-width: 390px;
	}
	
	
	/* breadcrumb */
	.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 hero area */
.article-headline {
  grid-column: 1 / 17;
  margin-top: 0px; /* spacing below breadcrumb - pushes heading down */
}	
	
.article-headline h1 { 
  margin-left: 0px; 
  margin-top: 40px;
  margin-right: 0px;
  font-size: 62px;
  letter-spacing: -2.0px;
}


.article-headline h2 { 
  margin-top: 10px;
  margin-left: 0px; 
  margin-right: 0px;
  font-size: 26px;
}
	
.article-lead-paragraph { 
  margin-top: 40px;
  margin-left: 0px; 
  margin-right: 0px;
  font-size: 13px;
}

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

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* set to auto on small breakpoints */
  border: 0;
}

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

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

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

.article-hero img {
  width: 100%;
  max-width: 560px;  /* maintains width */
  margin-top: 30px;
}

	
.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-col-right {
  grid-column: 1 / 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;  
}
	
  .article-col-right  {
   margin-top: 2rem;   
   width: 100%;
   padding: 0px 0px 0px 0px;
} 
	   
	
	
/* ================================
   Related Content side rail - 600px
   ================================ */
.related-content {
   min-width: 100px;  
   width: 100%;  
  justify-content: flex-end;  
}

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

.related-content h2 {
  margin-left: 0; 
  margin-right: 0;
  font-weight: 200;
  font-size: 0.85em;
}
	
.related-subhead {
  margin-left: 0px; 
  margin-right: 0px; 
  font-size: 13px;
  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: 12px;
  margin-top: 10px;
  line-height: 1.2;
}

	
	/* H2 headings below related article thumbnail */
.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;
	}
	
	/* Paragraph style for sub-headings below related article 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) {
 
  .hero-eyebrow,
  .cta-eyebrow {
    font-size: 11px;
    letter-spacing: 0.8px;
  }

    .hero-overlay,
	.feature-overlay,
	.cta-overlay {
		min-width: 380px;
	}
	
	
    /* headline in hero + cta section */
	.hero-headline,
	.feature-headline {
		font-size: clamp(20pt, 4vw, 28px);
	}
	
	.cta-headline {
		font-size: clamp(22pt, 4vw, 30px);
		padding-left: 0px;
		padding-right: 0px;
	}
	
	
	/* subhead in hero + cta section */
	.hero-subhead,
	.feature-subhead {
	 max-width: 380px;
	 font-size: 14px;
	 padding-right: 30px; 
	 padding-left: 30px;
	 line-height: 1.1;
	}
	
	.cta-subhead {
	 min-width: 380px;
	 font-size: 14px;
	 padding-right: 40px; 
	 padding-left: 40px;
	 line-height: 1.1;
	}
	
	
	/* breadcrumb */
	.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 hero area */
.article-headline {
  grid-column: 1 / 17;
  margin-top: 20px; /* keep on - spacing below breadcrumb - pushes headling down */
}	
	
	
.article-headline h1 { 
  margin-left: 0px; 
  margin-top: 0px;
  margin-right: 0px;
  font-size: 46px;
  letter-spacing: -2.0px;
}


.article-headline h2 { 
  margin-top: 10px;
  margin-left: 0px; 
  margin-right: 0px;
  font-size: 19px;
}
	
.article-lead-paragraph { 
  margin-top: 20px;
  margin-left: 0px; 
  margin-right: 0px;
  font-size: 11px;
  margin-bottom: 20px;
}

	
	
/* ===========================
   video wrapper
=========================== */
.video-wrapper {
  position: relative;
  width: 60%;
  padding-top: 88.89%; /* 177.78% = 9:16 aspect ratio */
  background: #fff;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* set to auto on small breakpoints */
  border: 0;
}

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

.image-caption {
  margin-top: 80px; 
  max-width: 100%; 
  font-size: 7px;
  margin-bottom: 20px;
}
	
.image-caption {
  max-width: 100%; /* Keeps caption from feeling too heavy */
  font-size: 7px;
}		
	
 .article-hero {
  grid-column: 1 / 17;
}

.article-hero img {
  width: 100%;
  max-width: 480px;  /* maintains width */
	margin-top: 30px;
}
	
	
/* article area */	
	
.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;
	}	

/* ================================
   Related Content side rail - 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 {  /* Books and Events title  */ 
  font-weight: 200;
  font-size: 1.9em;
  margin-top: 10px;
}	
	
.related-subhead {  /* Exhibition title */ 
  font-size: 1.2em;
  font-weight: 600;
  margin-top: 5px;
}
	
.related-text {  /* Exhibition description */ 
  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 headings below related ARTICLE 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;
 }	
}