/* =============================================
   Venice Foundation — Landing Page
   Desktop base: 1728px | Mobile base: 440px
   Static HTML for fastest load
   ============================================= */

:root {
  --color-burgundy: #642223;
  --color-burgundy-accent: #800f00;
  --color-burgundy-light: #933638;
  --color-cream: #efe8df;
  --color-white: #ffffff;
  --color-black: #070707;

  --font-serif: 'Libre Caslon Text', 'Big Caslon', Georgia, serif;
  --font-sans: Avenir, 'Avenir Next', 'Nunito Sans', 'Helvetica Neue', sans-serif;

  /* Fluid type — scales from 440px → 1728px */
  --text-hero: clamp(1.875rem, 1.25rem + 2.8vw, 3rem);
  --text-display: clamp(1.875rem, 1.25rem + 2.8vw, 3.4375rem);
  --text-heading: clamp(1.625rem, 1.1rem + 1.8vw, 2.3125rem);
  --text-subheading: clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  --text-body: clamp(1rem, 0.9rem + 0.45vw, 1.375rem);
  --text-label: clamp(0.75rem, 0.65rem + 0.45vw, 1.125rem);

  --section-pad-x: clamp(1.25rem, 5vw, 9rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --gradient-burgundy: linear-gradient(
    7.8deg,
    rgb(100, 34, 35) 29.6%,
    rgb(147, 54, 56) 68.1%
  );
  --gradient-burgundy-deep: linear-gradient(
    49.4deg,
    rgb(100, 34, 35) 14.2%,
    rgb(147, 54, 56) 97%
  );
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
}

body {
  font-family: var(--font-serif);
  color: var(--color-burgundy);
  background: var(--color-white);
  overflow-x: hidden;
  width: 100%;
  min-width: 100%;
}

main {
  width: 100%;
  max-width: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Grain texture on burgundy surfaces */
.intro::before,
.investments::before,
.footer::before,
.loader::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

/* ---- Loader ---- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-burgundy-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader__mark {
  position: relative;
  width: clamp(7rem, 38vw, 11rem);
  aspect-ratio: 154 / 87;
}

.loader__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.loader__svg--track {
  position: relative;
  z-index: 1;
}

.loader__fill-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  will-change: clip-path;
}

.loader__fill {
  fill: #000000;
}

@media (max-width: 768px) {
  .loader__mark {
    width: clamp(4.9rem, 26.6vw, 7.7rem);
  }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 440 / 559;
  max-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.hero__media {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero__headline {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 100%;
  margin-top: clamp(5.75rem, 30.45vw, 8.375rem);
  padding: 0;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 2.6875rem;
  color: var(--color-burgundy);
}

.hero__headline em {
  font-style: italic;
  font-weight: 700;
}

.hero__headline-line {
  display: block;
  overflow: hidden;
}

.hero__headline-line--desktop {
  display: none;
}

.hero__headline-line-inner {
  display: block;
}

/* ---- Intro ---- */
.intro {
  position: relative;
  width: 100%;
  max-width: none;
  background: var(--gradient-burgundy);
  padding: clamp(2.5rem, 8vw, 5.5rem) var(--section-pad-x);
}

.intro__text {
  max-width: min(19rem, 100%);
  margin: 0 auto;
  text-align: center;
  font-size: var(--text-body);
  line-height: 1.76;
  color: var(--color-white);
}

.intro__text em {
  font-style: italic;
}

.intro__word,
.scroll-text__word {
  display: inline-block;
  will-change: opacity;
}

/* ---- DIFC Block ---- */
.difc-block__image {
  overflow: hidden;
}

.difc-block__image img {
  width: 100%;
  aspect-ratio: 440 / 278;
  object-fit: cover;
  transform: scale(1.1);
  transform-origin: center center;
  will-change: transform;
}

.difc-block__text {
  background: var(--color-cream);
  padding: clamp(2rem, 8vw, 3.5rem) clamp(1.5rem, 6vw, 3rem);
  text-align: center;
}

.difc-block__text p {
  max-width: 19.2rem;
  margin: 0 auto;
  font-size: var(--text-body);
  line-height: 1.76;
}

.difc-block__text strong {
  font-weight: 700;
}

/* ---- About Block ---- */
.about-block__image {
  overflow: hidden;
}

.about-block__image img {
  width: 100%;
  aspect-ratio: 440 / 496;
  object-fit: cover;
  transform: scale(1.1);
  transform-origin: center center;
  will-change: transform;
}

.about-block__content {
  background: var(--color-cream);
  padding: clamp(2.5rem, 8vw, 4rem) var(--section-pad-x) clamp(3rem, 10vw, 5rem);
  text-align: center;
}

.about-block__label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-burgundy-accent);
  margin-bottom: 1rem;
}

.about-block__headline {
  overflow: hidden;
}

.about-block__label-line {
  display: block;
  overflow: hidden;
}

.about-block__label-line-inner {
  display: block;
  will-change: transform;
}

.about-block__heading-line {
  display: block;
}

.about-block__heading {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.37;
  color: var(--color-burgundy-accent);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  will-change: transform, opacity;
}

.about-block__heading em {
  font-style: italic;
}

.about-block__body {
  max-width: 21.75rem;
  margin: 0 auto;
  font-size: var(--text-body);
  line-height: 1.76;
}

.about-block__body p + p {
  margin-top: 1.25em;
}

/* ---- Investments ---- */
.investments {
  position: relative;
  width: 100%;
  max-width: none;
  background: var(--gradient-burgundy-deep);
  padding: clamp(4rem, 12vw, 12rem) var(--section-pad-x);
  overflow: hidden;
}

.investments__bg {
  position: absolute;
  top: 24.81%;
  right: 0;
  bottom: 0;
  left: -33.08%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.investments__watermark {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scaleX(-1);
}

.investments__list {
  position: relative;
  z-index: 1;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 8vw, 5rem);
  max-width: 30rem;
  margin: 0 auto;
}

.investments__item {
  text-align: center;
}

.investments__title {
  font-size: var(--text-heading);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-white);
  margin-bottom: 0.6em;
  will-change: transform, opacity, clip-path;
}

.investments__title-full,
.investments__desc-full {
  display: none;
}

.investments__title-break,
.investments__desc-break {
  display: block;
}

.investments__desc {
  font-size: var(--text-subheading);
  font-style: italic;
  line-height: 1.63;
  color: var(--color-white);
  letter-spacing: 0.03em;
  opacity: 0.95;
  will-change: transform, opacity;
}

/* ---- Generations ---- */
.generations {
  width: 100%;
  max-width: none;
}

.generations__media {
  position: relative;
  width: 100%;
  aspect-ratio: 440 / 492;
}

.generations__image-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.generations__image-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

.generations__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.generations__overlay {
  display: none;
}

.generations__text {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(2rem, 12vw, 5rem);
  transform: translateX(-50%);
  text-align: center;
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-burgundy);
  width: min(21rem, 90vw);
}

.generations__text em {
  font-style: italic;
}

/* ---- Footer ---- */
.footer {
  position: relative;
  width: 100%;
  max-width: none;
  background: var(--gradient-burgundy-deep);
  padding: clamp(2.5rem, 8vw, 5rem) var(--section-pad-x) clamp(2rem, 5vw, 3rem);
  text-align: center;
  color: var(--color-white);
}

.footer__logo {
  width: clamp(3.5rem, 20vw, 5.5rem);
  height: auto;
  margin: 0 auto clamp(1.5rem, 5vw, 3rem);
}

.footer__copyright {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 350;
  text-transform: capitalize;
  margin-bottom: clamp(1rem, 3vw, 2rem);
}

.footer__contact {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 350;
  line-height: 1.67;
  opacity: 0.9;
  max-width: 19.5rem;
  margin: 0 auto;
}

.footer__br {
  display: inline;
}

/* =============================================
   DESKTOP — 769px+
   ============================================= */
@media (min-width: 769px) {
  .hero {
    aspect-ratio: auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  .hero__media {
    inset: auto;
    left: 0;
    right: 0;
    top: -12.5%;
    height: 125%;
  }

  .hero__image {
    object-position: center 40%;
  }

  .hero__headline {
    max-width: min(57rem, 90vw);
    margin-top: clamp(8rem, 21.4vw, 23rem);
    font-size: var(--text-hero);
    line-height: 1.375;
  }

  .hero__headline-line--mobile {
    display: none;
  }

  .hero__headline-line--desktop {
    display: block;
  }

  .intro__text {
    max-width: min(81rem, 100%);
    line-height: 1.86;
  }

  /* Desktop: unified cream content grid — full bleed */
  main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .hero { grid-column: 1 / -1; grid-row: 1; }
  .intro { grid-column: 1 / -1; grid-row: 2; }
  .investments { grid-column: 1 / -1; }
  .generations { grid-column: 1 / -1; }

  .difc-block {
    display: contents;
  }

  .difc-block__image {
    grid-column: 1;
    grid-row: 3;
  }

  .difc-block__image img {
    aspect-ratio: 864 / 633;
    height: 100%;
  }

  .difc-block__text {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    align-items: center;
    background: var(--color-cream);
    padding: clamp(3rem, 8vw, 10.5rem) clamp(2rem, 5vw, 5rem);
    text-align: left;
  }

  .difc-block__text p {
    max-width: 32rem;
    margin: 0;
    line-height: 1.83;
  }

  .about-block {
    display: contents;
  }

  .about-block__content {
    grid-column: 1;
    grid-row: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding: clamp(3rem, 8vw, 10.5rem) clamp(2rem, 5vw, 5rem);
  }

  .about-block__label {
    font-size: var(--text-body);
    margin-bottom: clamp(1rem, 2vw, 1.75rem);
  }

  .about-block__body {
    max-width: 36rem;
    margin: 0;
    line-height: 1.55;
  }

  .about-block__image {
    grid-column: 2;
    grid-row: 4;
  }

  .about-block__image img {
    aspect-ratio: 864 / 1021;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .investments {
    padding-bottom: clamp(6rem, 14vw, 14rem);
  }

  .investments__bg {
    top: 24.81%;
    left: -33.08%;
    right: 0;
    bottom: 0;
  }

  .investments__list {
    max-width: 56rem;
    gap: clamp(2.5rem, 5.5vw, 5rem);
  }

  .investments__title {
    line-height: 1.25;
  }

  .investments__title-break,
  .investments__desc-break {
    display: none;
  }

  .investments__title-full,
  .investments__desc-full {
    display: inline;
  }

  .generations__media {
    aspect-ratio: 1728 / 586;
  }

  .generations__overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.28) 17.8%, rgba(0, 0, 0, 0) 64%);
    pointer-events: none;
  }

  .generations__text {
    left: var(--section-pad-x);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    text-align: left;
    color: var(--color-white);
    width: min(31rem, 80vw);
  }

  .footer__logo {
    width: clamp(5rem, 7.4vw, 8rem);
  }

  .footer__contact {
    max-width: none;
  }

  .footer__br {
    display: none;
  }

  footer.footer {
    grid-column: 1 / -1;
  }
}