/* === Global Reset === */

@import url("https://p.typekit.net/p.css?s=1&k=yrr0iqf&ht=tk&f=51964.60615.60616.60617.60618.60619.60620.60621.60622&a=72571784&app=typekit&e=css");


:root {
  --card-pad: 2rem;
}

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


body {
  background-color: #FFF8F0;
  font-family: "arial";
  margin: 0;
  color: #707070;
}

a:link {
  color: #000000;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: #707070;
  background-color: transparent;
  text-decoration: underline;
}

a:hover {
  color: #F04760;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #F04760;
  background-color: transparent;
  text-decoration: underline;
}

/* === Header + Nav === */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  width: 100%;
  position: relative;
}

/* Header logo: lock sizing and stop flex from stretching it */
.header-logo { 
  flex: 0 0 auto;      /* don't grow/shrink */
  min-width: 0;
}

.header-logo img{
  display: block;
  width: auto !important;      /* defeat any global img { width:100% } */
  max-width: none;              /* ensure width isn't capped */
  height: clamp(42px, 8vw, 72px) !important;  /* responsive cap */
  max-height: 72px;             /* desktop ceiling */
}

nav {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex: 1;
  font-family: "norman-variable";
  font-size: 30px;
}

nav a {
  text-decoration: none;
  color: #707070;
}

.spacer {
  width: 60px;
  /* same as logo width approx */
  visibility: hidden;
}



/* === Menu Overlay (clean, full-width) === */

.menu-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  display: none;
  /* hidden by default */
  background: #FFF8F0;
  z-index: 1000;
  padding: 2.5rem 4vw;
}

.menu-overlay.active {
  display: block;
}

/* inner width container */
.menu-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 3 equal columns */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 4rem;
  align-items: start;
}

/* each column */
.menu-group {
  /* keep for structure; no extra styles needed */
}

/* list reset + vertical spacing */
.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

/* links */
.menu-list a {
  text-decoration: none;
  color: #707070;
}

.menu-list a:hover {
  text-decoration: underline;
}




/* === Main Grid Section === */
.container {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  grid-auto-rows: auto;
  /* rows size to tallest content */
  gap: 0;
  /* ensure columns butt together */
}

.item {
  background: #FFF8F0;
  display: flex;
  flex-direction: column;
}

/* unified rule for ALL images inside grid cards */
.item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0;
  padding: 0;
  max-height: 600px;
  /* keep or remove as you like */
}

/* optional: keep for image-only cards */
.img-card {
  width: 100%;
  overflow: hidden;
  /* hides any minor overflow/cropping */


}

/* Override for ville-logo so it doesn't get full-width image styles */
.item.text-card img.ville-logo {
  margin-top: auto;
  /* pushes logo to bottom */
  align-self: flex-end;
  /* aligns it to the right */
  width: auto;
  max-height: 60px;
  display: block;
  object-fit: contain;
}

/* text cards (same look, just tied to --card-pad) */
.text-card {
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* utilities for image placement inside text-card */

/* make the image bleed to both edges (kills side padding just for the image) */
.text-card .bleed {
  width: calc(100% + (var(--card-pad) * 2));
  margin-left: calc(-1 * var(--card-pad));
  margin-right: calc(-1 * var(--card-pad));

}

/* bleed only to the right; keeps left padding intact */
.text-card .bleed-right {
  width: calc(100% + var(--card-pad));
  margin-right: calc(-1 * var(--card-pad));
}

.text-card img.bleed {
  width: calc(100% + (var(--card-pad) * 2) - 100px);
  margin-left: calc(-1 * var(--card-pad) + 100px);
  margin-right: calc(-1 * var(--card-pad));
}

/* spacing helper to replace inline padding-top */
.mt-150 {
  margin-top: 150px;
}

/* container already: .text-card { display:flex; flex-direction:column; } */
.text-card img.push-bottom {
  margin-top: auto;
}

/* bottom */
.text-card img.align-right {
  align-self: flex-end;
}

/* (optional) right */


.line-logos {
  display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center; padding:2rem;
}

.title-card {

  display: flex;
  justify-content: space-between;

}

.title-card>h1 {
 font-size: clamp(8rem, 15vw, 130px);
line-height: 1.4;
  padding: 1rem;
  padding-bottom: 7rem;
  font-family: "norman-variable";
}

/* === Divider Section === */
.divider {
  width: 100%;

  position: relative;
  overflow: visible;
  /* lets art hang if you add it */
  height: clamp(160px, 28vw, 120px);
  /* gives it actual height */

}

.divider img {
  width: 100%;
  height: auto;
  display: block;

}


/* if you add a hanging art image, use this class */
.divider .hang1 {
  position: absolute;
  left: 98%;
  bottom: 90%;
  transform: translate(-50%, 35%);
  /* your current value */
  width: min(1200px, 100%);

  max-width: 1200px;
  /* keeps it sane on huge screens */
  height: auto;
  pointer-events: none;
  z-index: 2;
}

/* === Only Text Card === */

.only-text-card {
  padding: 2rem;
  margin-right: 30%;
}

.only-text-card ol {
  padding-left: 4rem;
}

.only-text-card p {
  padding-top: 1rem;
  padding-bottom: 1rem;
}


/* === Aside Links (single-row horizontal scroller) === */
/* === Aside Links === */
aside.x-links {
  display: flex;
  flex-wrap: nowrap;
  /* force single row */
  overflow-x: auto;
  /* sideways scroll */
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
  /* smooth iOS scroll */
}

.xlink-item>img {
  display: block;

  /* unify height */
  max-width: 100%;
  /* keep aspect ratio */
  object-fit: contain;
  /* safe fit */
}

/* Aside slidey*/
/* === Sideways slider (uniform height) === */
/* minimal sideways scroller */
aside.x-slidey {
  display: flex;
  flex-wrap: nowrap;      /* one row */
  overflow-x: auto;       /* only this box scrolls sideways */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
}

.x-slidey-item {
  flex: 0 0 auto;         /* don't shrink */
}

.x-slidey-item img {
  display: block;
  height: 400px;          /* set your uniform row height */
  width: auto;            /* keep aspect ratio */
  object-fit: contain;    /* use 'cover' if you prefer cropped/zoomed look */
}



/* === bottom nav === */
.bottom-nav {
  display: flex;
  justify-content: space-between;
  align-items: center; /* changed from baseline so icons/text center-align */
  width: 100%;
  font-family: "norman-variable";
  padding: 10px;
}

.bottom-left,
.bottom-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 25px;
}

.bottom-center {
  text-align: center;
  font-size: 40px;
  flex: 1; /* keeps it centered nicely */
}

/* reset link styles */
.bottom-nav a {
  text-decoration: none; /* remove default underline */
  color: inherit; /* inherit from parent (your purple etc.) */
  display: flex; /* keeps icon + text inline */
  align-items: center;
  gap: 0.5rem;
}

.bottom-nav a:hover {
  text-decoration: none; 
}





/* === Footer === */
footer {
  background-color: #292927;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 2rem;
  width: 100%;
  color: #FFFFFF;
}

footer>.social-links>a>i {
  color: #FFF;
  text-decoration: none;

}

footer>.social-links>a>i {
  color: #FFF;
  text-decoration: none;
}

.main-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.credits>p {
  margin: 0;
}

.mtl-logo img {
  max-width: 300px;
  height: auto;
  display: block;
}






/* ===== Row/layout utilities (opt-in, desktop) ===== */

/* A) Image fills its grid cell (use for “text + image” rows)  */
.img-card.img-fill {
  display: grid;
}

.img-card.img-fill>img,
.item img.img-fill {
  width: 100%;
  height: 100%;
  /* fill the cell’s height */
  object-fit: cover;
  /* crop nicely */
  max-height: none;
  /* ignore the global 600px cap */
}

/* B) Equalize two side-by-side image cards with a fixed band height */
.img-card.equalize-16x9 {
  aspect-ratio: 16 / 9;
}

.img-card.equalize-3x2 {
  aspect-ratio: 3 / 2;
}

.img-card.equalize-4x3 {
  aspect-ratio: 4 / 3;
}

.img-card.equalize-1x1 {
  aspect-ratio: 1 / 1;
}

.img-card.equalize-16x9,
.img-card.equalize-3x2,
.img-card.equalize-4x3,
.img-card.equalize-1x1 {
  display: grid;
  overflow: hidden;
}

.img-card.equalize-16x9>img,
.img-card.equalize-3x2>img,
.img-card.equalize-4x3>img,
.img-card.equalize-1x1>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: none;
}

/* C) Inside text cards: bleed + tiny nudges + alignment */
.text-card img.bleed {
  --nudge-left: 0px;
  /* override via .shift-8/.shift-16/.shift-24 */
  width: calc(100% + (var(--card-pad) * 2) - var(--nudge-left));
  margin-left: calc(-1 * var(--card-pad) + var(--nudge-left));
  margin-right: calc(-1 * var(--card-pad));
  display: block;
  object-fit: cover;
}

.text-card img.bleed-right {
  --nudge-left: 0px;
  width: calc(100% + var(--card-pad) - var(--nudge-left));
  margin-left: var(--nudge-left);
  /* small positive nudges right */
  margin-right: calc(-1 * var(--card-pad));
  display: block;
  object-fit: cover;
}

/* nudges */
.shift-8 {
  --nudge-left: 8px;
}

.shift-16 {
  --nudge-left: 16px;
}

.shift-24 {
  --nudge-left: 24px;
}

/* stamp positions inside text-card */
.text-card img.push-bottom {
  margin-top: auto;
}

.text-card img.align-right {
  align-self: flex-end;
}

/* Optional: remove global cap when needed without changing fill */
.img-no-cap {
  max-height: none !important;
}

/* ===== Mobile resets (keep stacked content uncropped) ===== */
@media (max-width: 950px) {

  .img-card.img-fill>img,
  .item img.img-fill {
    height: auto !important;
  }

  .img-card.equalize-16x9,
  .img-card.equalize-3x2,
  .img-card.equalize-4x3,
  .img-card.equalize-1x1 {
    aspect-ratio: auto;
  }
}