/* ─────────────────────────────
       VARIABLES
    ───────────────────────────── */
    :root {
      --primary: #fff;
      --background: #000;
      --primary-accent: #98FF81;
      --primary-light: #98FF81;

      --nav-height: 3.5em;
      --logo-small-size: 2.5em;

      --ig-card-w: 300px;
      --ig-card-h: 461px;
      --page-pad: 1em;
    }

    /* ─────────────────────────────
       GLOBAL RESET & TYPOGRAPHY
    ───────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }

    html, body {
      margin: 0;
      padding: 0;
      font-family: "Atkinson Hyperlegible", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      font-size: 16px;
      font-weight: 400;
      color: var(--primary);
      background: var(--background);
      width: 100%;
      min-width: 320px;
      scroll-behavior: smooth;
    }

    body { margin-bottom: 5em; padding: var(--page-pad); }

    @font-face {
      font-family: 'Foundry Black';
      src: url('foundry-black.eot');
      src: local('Foundry Black'), local('foundry-black'),
           url('foundry-black.eot?#iefix') format('embedded-opentype'),
           url('foundry-black.woff2') format('woff2'),
           url('foundry-black.woff') format('woff'),
           url('foundry-black.ttf') format('truetype');
      font-weight: 900;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Foundry Sans';
      src: url('foundry-sans.eot');
      src: local('Foundry Sans'), local('foundry-sans'),
           url('foundry-sans.eot?#iefix') format('embedded-opentype'),
           url('foundry-sans.woff2') format('woff2'),
           url('foundry-sans.woff') format('woff'),
           url('foundry-sans.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    h2 {
      font-family: 'Foundry Sans', sans-serif;
      font-size: clamp(2em, 5vw, 5em);
      text-transform: uppercase;
      letter-spacing: -0.005em;
      width: 100%;
      text-align: center;
      margin: 0 0 0.25em;
    }
    h2 span { font-family: 'Foundry Black', serif; }

    p { margin: 0 0 1em 0; max-width: 600px; opacity: 0.66; }

    .mobile-show { display: none; }
    .mobile-hide { display: inline-block; }
    @media (max-width: 480px) {
      .mobile-hide { display: none; }
      .mobile-show { display: inline-block; }
    }

    section { padding-top: 8vh; margin-top: 8vh; }

    /* Reveal on scroll */
    .reveal { opacity: 0; transform: translateY(2em); transition: opacity 1.2s ease, transform 1.2s ease; }
    .reveal.revealed { opacity: 1; transform: translateY(0); }


	/* ─────────────────────────────
	   NAV + HEADER
	───────────────────────────── */
	nav {
	  position: fixed;
	  top: 0; left: 0; right: 0;
	  z-index: 999;
	}

	header {
	  /* reserve space so content doesn't slide under fixed nav */
	  padding-top: var(--nav-height);
	}

	/* ─────────────────────────────
	   HERO LOGO (large)
	───────────────────────────── */
	.logo {
	  width: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 20vh 6vw;
	  transition: opacity 0.25s ease, transform 0.25s ease;
	  transform-origin: center top;
	}

	.logo img {
	  width: 33vw;
	  max-width: 560px;
	  min-width: 240px;
	  height: auto;
	  display: block;
	}

	/* Collapsed: fade/scale out big logo */
	header.collapsed .logo {
	  opacity: 0;
	  transform: scale(0.5);
	  pointer-events: none;
	}

	/* ─────────────────────────────
	   INLINE NAV LOGO (small)
	───────────────────────────── */
	.logo-small {
	  display: flex;
	  align-items: center;
	  max-width: 0;
	  overflow: hidden;
	  transition: all 0.25s ease;
	  padding:0;
	  margin-inline: calc(var(--nav-gap) * -0.5); /* neutralise the “double gap” */
	}

	.logo-small img {
	  width:0;
	  height: auto;
	  display: block;
	  opacity: 0;
	  transform-origin: center;
	  transition: all 0.25s ease;
	}

	/* Reveal + animate small logo when collapsed */
	header.collapsed .logo-small {
	  max-width: calc(var(--logo-small-size) + 8px); /* breathing room */
	  display:block;
	  margin-inline: 0;
	  padding-left:0.25em;
	  padding-right:0.25em;
	}
	header.collapsed .logo-small img {
		width: var(--logo-small-size);
	  opacity: 1;
	}

	/* ─────────────────────────────
	   REDUCED MOTION
	───────────────────────────── */
	@media (prefers-reduced-motion: reduce) {
	  .logo,
	  .logo-small,
	  .logo-small img {
	    transition: none !important;
	  }
	}


  /* ─────────────────────────────
     NAVIGATION
  ───────────────────────────── */

  nav {
  	display: flex;
  	align-content: center;
  	align-items: center;
  	width: 100%;
  	flex-direction: column;
  	position: fixed;
    background: #000;
  }

  nav .links {
  	list-style: none;
  	display: flex;
  	gap: 2em;
  	flex-direction: row;
  	padding-inline-start:0;
  	--nav-gap: 5vw;           /* keep your current spacing here */
  	gap: var(--nav-gap);
  }

  nav .links .link {
  	text-align:center;
  }

  nav a {
	  color: var(--primary);
	  text-transform: uppercase;
	  font-weight: 700;
	  letter-spacing: 0.15em;
	  text-decoration: none;
	  position: relative; /* Needed for pseudo-element */
	  display: inline-block;
	  padding-bottom: 4px; /* space for underline */
	  transition: all 0.2s ease-out;
	}

	nav a:hover {
		color: var(--primary-light);
	}

	nav a::after {
	  content: "";
	  position: absolute;
	  left: 50%;
	  bottom: 0;
	  height: 2px;
	  width: 0;
	  background: var(--primary-light);
	  transition: width 0.2s ease-out, left 0.2s ease-out;
	}

	nav a:hover::after {
	  width: 100%;
	  left: 0;
	}

	@media screen and (max-width:480px) {
		nav a {
			font-size:0.9em;
		}
	}

	nav .logo-small:hover {
		opacity:0.6;
		cursor:pointer;

	}

  /* ─────────────────────────────
     TEXT HERO
  ───────────────────────────── */

/* Text hero: create a scroll area long enough for the pan */
#text-hero {
  /* controls how long the pan lasts; tweak to taste */
  --text-hero-duration: 10vw;
  position: relative;
  height: var(--text-hero-duration);
  margin:0;
}

/* The sticky viewport sits under the fixed nav */
#text-hero .viewport {
  position: sticky;
  top: var(--nav-height);
  height: 10vw;             /* visible height while sticky */
  overflow: hidden;         /* clip the long image */
}

/* Keep your skew here so the whole line is angled */
#text-hero .text-wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  /*transform: skewY(-5.5deg);*/
  opacity:0.25;
}

#text-hero .track { will-change: transform, opacity; }
#text-hero img { transform-origin: center; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  #text-hero .track { transform: none !important; opacity: 1 !important; }
  #text-hero img { transform: none !important; }
}

/* ─────────────────────────────
   PAGE LOAD ANIMATIONS
───────────────────────────── */
@keyframes fadeGrow {
  0%   { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes fadeRight {
  0%   { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}

.logo img {
  opacity: 0;
  transform: scale(0.8);
}

#text-hero .track img {
  opacity: 0;
  transform: translateX(60px);
}



/* Size the long SVG: scale by height so it fills nicely */
#text-hero img {
  height: 10vw;         /* adjust visual scale */
  width: auto;         /* intrinsic long width preserved */
  display: block;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  #text-hero .track { transform: none !important; }
}



  /* ─────────────────────────────
     INSTAGRAM POSTS
  ───────────────────────────── */
  .instagram-posts-wrapper {
  	width:100vw;
  	min-height:461px;
  }

  .instagram-posts {
  	display: flex;
  	flex-direction: row;
  	gap:0.5em;
  	width:auto;
  	transform: scale(0.9);
  }

  .instagram-post-wrapper {
  	position:relative;
  	overflow:hidden;
  	border-radius:2px;
  	width:326px;
  	flex: 0 0 326px;
  	height: 461px;
  	background: rgba(255,255,255,1);
  }

  .button-hide {
  	width:120px;
  	height:50px;
  	position: absolute;
  	top:2px;
  	right:2px;
  	pointer-events: none;
  	background: #ffffff;
  }

  .instagram-media {
  	margin:0!important;
  }

  .follow-links {
  	display: flex;
  	align-items: center;
    text-align: center;
    justify-content: center;
  	gap:2em;
  	margin-top:2em;
  }

  .follow-links a {
  	font-size: clamp(1em, 4vw, 1.35em);
  	color: var(--primary);
  	text-decoration: none;
  	display: flex;
  	align-items: center;
  	justify-content: middle;
  	gap: 0.5em;
  	transition: all 0.2s ease-out;
  }

  .follow-links a:hover {
  	color: var(--primary-light);
  }

  @media screen and (max-width:480px) {
	.follow-links {
	  	flex-direction: column;
	  }
	}

/* ───── Instagram Carousel ───── */
.instagram-posts-wrapper {
  width: 100%;                 /* use container width (avoid 100vw overflow) */
  /* soft fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.instagram-posts {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Hide scrollbars (keeps touch/trackpad scroll) */
.instagram-posts::-webkit-scrollbar { display: none; }
.instagram-posts { scrollbar-width: none; }

/* Each card snaps cleanly */
.instagram-post-wrapper {
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
}


/* Nav buttons */
.ig-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 56px;
  height: 48px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  border-radius: 4px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ig-nav:hover { background: rgba(0,0,0,1); transform: translateY(-50%) scale(1.03); }
.ig-prev { left: 4px; }
.ig-next { right: 4px; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .instagram-posts { scroll-behavior: auto; }
  .ig-nav { transition: none; }
}





 /* ─────────────────────────────
     INSTAGRAM POSTS
  ───────────────────────────── */

  .menu-content {
  	text-align:center;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  }

  .menu-content .button {
  	color: var(--primary-light);
  	border: 2px solid var(--primary-light);
  	font-size: clamp(1em, 4vw, 1.25em);
  	transition: all 0.2s ease-out;
  	background: transparent;
  	border-radius: 0.5em;
  	padding:1.25em 2em;
  	text-decoration: none;
  	display:inline-block;
  }

  .menu-content .button:hover {
  	color: var(--primary);
  	border: 2px solid var(--primary);
  }


    /* ─────────────────────────────
     MEMBERS
  ───────────────────────────── */
  .members-info {
		text-align: center;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.members-info a {
  	color: var(--primary-light);
  	font-size: clamp(1em, 3vw, 1.5em);
  }


   /* ─────────────────────────────
     VISIT
  ───────────────────────────── */
  #visit {
  	display: flex;
    align-items: center;
    flex-direction: column;
  }

  .visit-content {
  	display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  .visit-content h4 {
  	margin-top:0;
  	margin-bottom:0.05em;
  }

  .visit-content p {
  	margin-top:0;
  }

  .visit-content a {
  	color: var(--primary-light);
  }

  .map {
  	margin-bottom:1.5em;
  }

  .map iframe {
  	border-radius: 0.25em;
  }


   /* ─────────────────────────────
     CONTACT
  ───────────────────────────── */
  .contact-info {
		text-align: center;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.contact-info a {
  	color: var(--primary-light);
  	font-size: clamp(1em, 3vw, 1.5em);
  }


  /* ─────────────────────────────
     FOOTER STICKY
  ───────────────────────────── */

	#footer-sticky {
		position: fixed; bottom:0; left:0;
		width: 100%;
		background: var(--background);
		display:flex;
		align-items: stretch;
		padding: 0.5em 1em;
		gap:2em;
	}
	#copyright-footer {
		font-size:0.9em;
		align-content: center;
	}
	#description-footer {
		flex-grow: 1;
		text-transform: uppercase;
		font-weight: 700;
		letter-spacing: 0.15em;
		text-align: center;
		font-size:0.9em;
		align-content: center;
	}
	#links-footer {
		display: flex;
		flex-direction: row;
		gap: 0.75em;
		align-items: center;
		align-content: center;
	}
	#links-footer img {
		width: auto;
    	height: 1.25em;
	}
	@media screen and (max-width:480px) {
		#copyright-footer {
			font-size:0.8em;
		}
		#description-footer {
			font-size:0.8em;
		}
	}