:root {
  --gallery-gap: 2rem;
}


/* Initial hidden state */
.animate-fade-in-right {
    opacity: 0;
    transform: translateX(-80px);
    position: relative;
    visibility: hidden;
    transition:
        opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Animation active */
.is-animating.animate-fade-in-right {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}


.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    padding: 2rem;
    color: white;
    overflow: hidden;
    margin-bottom: 4rem;
}
/* Compact hero variant */
.hero-section.compact-hero {
  height: 500px;
}



.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
  z-index: 1;
}



/* Content sits above the tint */
.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

@media (min-width: 1250px) {
  .hero-inner {
    max-width: 1000px;
  }
}



.hero-above-title {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    opacity: 0.8;
    color: #fff;
    gap: 10px; /* space between text and line */
    position: relative;
}

.hero-above-title::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background-color: currentColor; /* matches text color */
}

/* Main Heading */
.hero-heading {
    font-size: clamp(2.3rem, 5.8vw, 4.8rem);
    line-height: 1.2;
    font-weight: 500;
    color: rgb(255, 255, 255);
    padding-top: 0;
}

/* Intro Section */
.intro-section {
    padding: 3rem 2rem;
    background-color: #fff;
max-width: 1000px;
margin: 0px auto;
}

.intro-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
    gap: 2rem;
}

/* Left Column */
.intro-left {
    flex: 1 1 30%;
    display: flex;
    justify-content: center;
}

.intro-logo img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 312px;
}

/* Right Column */
.intro-right {
    flex: 1 1 60%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

@media (max-width: 768px) {
  .intro-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .intro-left, 
  .intro-right {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .intro-left {
    margin-bottom: 2rem; /* Add some spacing between logo and text */
  }
}


.intro-opening-statement h2 {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 400;
  color: #111;
  margin-bottom: 2rem;
  text-transform: none;
  letter-spacing: 6px;
}


.intro-opening-statement.text-xlarge {
    font-size: clamp(1.375rem, 1.1667rem + 0.9259vw, 2rem);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 2.5rem;
    color: #333;
}

.intro-opening-statement.text-xlarge p:first-child::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 8.25rem; /* Default desktop width */
  height: 2px;
  margin-right: 1.75rem;
  background-color: currentColor;
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .intro-opening-statement.text-xlarge p:first-child::before {
    width: 6rem; /* Reduced width on mobile */
  }
}


.intro-body-text {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: #111;
    font-family: "eb-garamond",serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
}

.intro-body-text-image {
  
}

.intro-signature img {
    max-width: 250px;
    height: auto;
    margin-top: 2rem;
    margin-bottom: .5rem;
}

.intro-signature-title {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 1px;
}


/* GALLERY */
.gallery-section {
    padding: 7rem 2rem;
    background: #fff;
}

.gallery-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.gallery-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--gallery-gap); /* ← gap between columns */
  margin-bottom: var(--gallery-gap); /* ← same spacing between rows */
}

.gallery-row.align-left {
  justify-content: flex-start;
}

.gallery-row.align-center {
  justify-content: center;
}

.gallery-row.align-right {
  justify-content: flex-end;
}


/* Target the last gallery-row */
.gallery-row:last-child {
  margin-bottom: 0;
}

.gallery-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Column widths */
.col-one-third {
  flex: 0 0 calc(33.3333% - 1rem);
}

.col-two-thirds {
  flex: 0 0 calc(66.6667% - 1rem);
}


.gallery-col.align-top img {
    margin-bottom: 8rem;
}

.gallery-col.align-bottom img {
    margin-top: 8rem;
}

@media (max-width: 768px) {
    .gallery-col.align-top img,
    .gallery-col.align-bottom img {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
}

.col-centered {
    flex: 0 0 70%;
    margin-left: 8rem;
    margin-right: auto;
    text-align: center;
}

@media (max-width: 768px) {
  .col-centered {
    margin-right: auto;
  }
}



/* Vertical positioning */
.align-top {
    justify-content: flex-start;
}

.align-bottom {
    justify-content: flex-end;
}

/* Images */
.gallery-col img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .gallery-row {
    flex-direction: column;
    margin-bottom: var(--gallery-gap);
  }

  .gallery-col {
    width: 100% !important;
    flex: none !important;
    margin: 0;
    padding: 0;
  }

  .gallery-col img {
    aspect-ratio: 1 / 1; /* Make images square on mobile */
    height: auto;
    object-fit: cover;
  }

  /* Remove margins/padding from top/bottom aligned images */
  .gallery-col.align-top img,
  .gallery-col.align-bottom img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Remove margin-left for centered images */
  .col-centered {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ===============================
   Scroll Animation: Base State
================================= */
.animate-on-scroll {
  opacity: 0;
  transition: all 0.8s ease-out;
  will-change: transform, opacity;
}

/* ===============================
   Entry Direction Offsets (Hidden)
================================= */
.animate-on-scroll.from-left {
  transform: translateX(-50px);
}

.animate-on-scroll.from-right {
  transform: translateX(50px);
}

.animate-on-scroll.from-top {
  transform: translateY(-50px);
}

/* ===============================
   Final Visible State
================================= */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}




/*

QUOTATION BLOCK

*/

.quotation-section {
    padding: 3rem 2rem;
    background-color: #fff;
}

.quotation-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* <-- FIXED */
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    gap: 2rem;
    flex-wrap: wrap;
}

.quotation-image {
    flex: 0 0 35%;
    max-width: 35%;
    position: relative;
    z-index: 1;
}

.quotation-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4; /* Portrait shape on desktop */
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .quotation-image img {
    aspect-ratio: 1 / 1; /* Square shape on mobile */
  }
}


.quotation-text-block {
    flex: 0 0 calc(65% + 4rem); /* Grow width by amount pulled left */
    max-width: calc(65% + 4rem);
    position: relative;
    z-index: 2;
    margin-left: -6rem;
    background: #fff;
    padding: 2rem 0 2rem 2rem;
    box-shadow: none;
}

.quotation-text {
  font-family: eb-garamond, serif;
  font-weight: 100;
  font-style: italic;
  font-size: clamp(1.2rem, 4vw, 2rem);
  line-height: 1.4;
  margin: 0 0 1.5rem;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  color: rgb(17, 17, 17);
}

@media (max-width: 768px) {
  .quotation-text {
    font-size: clamp(1rem, 4vw, 1.6rem);
  }
}


.quotation-text::before {
  content: none !important;
  display: none !important;
}

.quotation-text p {
  margin: 0;
}

/* Optional: Remove default quote marks in some browsers */
.quotation-text blockquote,
.quotation-text q {
  quotes: none;
}

.quotation-cite {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
    letter-spacing: 1px;
    margin-top: 0;
}


.quotation-cite span {
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
    .quotation-inner {
        flex-direction: column;
        gap: 2rem;
    }

    .quotation-image,
    .quotation-text-block {
        flex: 1 1 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .quotation-text-block {
        padding: 0;
    }
}

.custom-hr {
  border: none;
  height: 1px;
  background-color: #181b1a;
  width: calc(100% - 4rem); /* subtract left + right margin */
  margin: 0 2rem; /* top/bottom = 2rem, left/right = 2rem */
}


/* CONTENT BLOCKS */

.content-blocks-section {
    padding: 3rem 4rem; /* Default desktop padding */
}

/* Adjust padding on mobile */
@media (max-width: 768px) {
  .content-blocks-section {
    padding: 2rem;
  }
}


.content-blocks-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.content-block-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 2rem;
    margin: 0 2rem; /* Desktop: 2rem side margins */
}

/* Remove side margin on mobile */
@media (max-width: 768px) {
  .content-block-row {
    margin: 0; /* No side margins on mobile */
  }
}

.content-block-left {
    flex: 0 0 40%;
    min-width: 300px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1.5rem;
}

/* Remove left padding on mobile */
@media (max-width: 768px) {
  .content-block-left {
    padding-left: 0;
  }
}

.block-meta {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.block-number {
    position: absolute;
    left: -2.5rem;
    font-size: 1.4rem;
    font-family: "eb-garamond",serif;
    font-weight: 400;
    font-style: normal;
    color: #a1a1a1;
}

.block-category {
  position: relative;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  color: #333;
  display: inline-flex;
  align-items: center;
  gap: 10px; /* spacing between text and dash */
  letter-spacing: 2px;
}

.block-category::after {
  content: '';
  display: inline-block;
  width: 35px;
  height: 2px;
  background-color: #000;
}

.block-title {
    font-size: clamp(1.575rem, 4.2vw, 2.4rem);
    margin: 1rem 0;
    color: #000;
    margin-top: 0;
    padding-top: 0;
    font-weight: 600;
}

.block-intro {
    font-size: 1.1rem;
    color: #505050;
    line-height: 1.6;
    margin-bottom: 2rem;
    font-family: "eb-garamond",serif;
    font-weight: 400;
    font-style: normal;
}

.block-button .button-link {
    display: inline-block;
    padding: 0.6rem 0.9rem; /* Increased padding */
    font-size: 0.8rem; /* Slightly smaller text */
    font-weight: 600;
    text-transform: uppercase; /* Uppercase text */
    color: #000;
    background-color: #fff;
    border: 2px solid #000;
    text-decoration: none;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.block-button .button-link:hover {
    background-color: #000;
    color: #fff;
}

/* Full-width button on mobile */
@media (max-width: 768px) {
  .block-button .button-link {
    display: block; /* Change from inline-block to block */
    width: 100%;
    text-align: center; /* Center the text inside the full-width button */
  }
}

.content-block-right {
  flex: 0 0 60%;
  max-width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-block-right img {
  width: 100%;
  height: 80vh;
  max-height: 800px;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  display: block;
}

@media (max-width: 768px) {
  .content-block-right img {
    aspect-ratio: 1 / 1; /* Square on mobile */
    height: auto; /* Let height flow naturally */
    max-height: none; /* Remove height limit */
  }
}


/* Responsive */
@media (max-width: 768px) {
    .content-block-row {
        flex-direction: column;
    }

    .content-block-left, 
    .content-block-right {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .block-number {
        left: 0;
        position: static;
        margin-right: 10px;
    }
}




/*  NUCLEUS PAPERS */

/*  NUCLEUS PAPERS */

/* Wrapper */
.nucleus-papers-listing {
  padding: 4rem 2rem;
  background: #fff;
}

/* Grid setup */
.papers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* Each card - now entire card is a link */
.paper-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 0 solid #fff;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s ease;
}

.paper-card:hover {
  box-shadow: none;
}

/* Featured Image */
.paper-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Content Block */
.paper-content {
  padding: 1rem 0 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Title */
.paper-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 2.25rem;
  text-transform: none;
}

/* Excerpt */
.paper-excerpt {
  font-size: 0.95rem;
  color: #555;
  flex-grow: 1;
  margin-bottom: 1rem;
    font-family: "eb-garamond", serif;
    font-weight: 400;
    font-style: normal;
}

/* Read More - styled as button-like text */
.paper-readmore {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  border: 2px solid #000;
  background: #fff;
  padding: 0.5rem 0.9rem;
  align-self: flex-start;
  transition: all 0.3s ease;
}

.paper-card:hover .paper-readmore {
  background: #000;
  color: #fff;
}

/* Responsive */
@media (max-width: 992px) {
  .papers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .papers-grid {
    grid-template-columns: 1fr;
  }
}