/* ============================================================
   THE ATHENAEUM — v1 (clean, informational) with Oct 17 data
   Palette + type from the Canva deck. No frameworks, no build.
   ============================================================ */

:root {
  --cream:    #FCEFD9;
  --cream-2:  #F7E6C9;
  --ink:      #23180E;
  --blue:     #005589;
  --gold:     #F4A600;
  --red:      #C93802;
  --green:    #4E7B3A;

  --maxw: 1120px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 18px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  overflow-x: hidden;
}

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

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

/* ---------- Shared layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.wrap--narrow { max-width: 760px; }

.section { padding: clamp(56px, 9vw, 120px) 0; position: relative; }

.kicker {
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  margin: 0 0 .9rem;
}
.kicker--light { color: var(--gold); }

.h2 {
  font-family: "Archivo Black", "Archivo", sans-serif;
  font-weight: 900;
  font-size: clamp(1.9rem, 4.6vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0 0 1.1rem;
  color: var(--ink);
}
.h2--light { color: var(--cream); }

.lead {
  font-size: clamp(1.06rem, 1.8vw, 1.35rem);
  line-height: 1.55;
  margin: 0;
}

.body { font-size: 1.05rem; margin: 0 0 1.1rem; max-width: 46ch; }

.section__head { max-width: 640px; margin: 0 0 clamp(32px, 5vw, 56px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: .95em 1.6em;
  border-radius: 999px;
  border: 2px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); background: #ffb51f; }
.btn--sm { padding: .65em 1.2em; font-size: .92rem; }
.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--light { color: var(--cream); border-color: var(--cream); }
.btn--light:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ---------- Decorative organic curve figures (asymmetric blobs) ---------- */
.blob {
  position: absolute;
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  filter: blur(2px);
  opacity: .5;
  z-index: 0;
  pointer-events: none;
}
.blob--red  { width: 240px; height: 250px; background: var(--red);  top: 8%;  left: -70px; border-radius: 58% 42% 47% 53% / 63% 55% 45% 37%; }
.blob--blue { width: 300px; height: 320px; background: var(--blue); bottom: -80px; right: -90px; border-radius: 40% 60% 55% 45% / 52% 40% 60% 48%; }
.blob--gold { width: 210px; height: 190px; background: var(--gold); top: 40%; right: 6%; border-radius: 63% 37% 42% 58% / 40% 63% 37% 60%; }
.blob--tk   { width: 360px; height: 330px; opacity: .22; top: -90px; left: 50%; right: auto; transform: translateX(-50%); border-radius: 55% 45% 62% 38% / 48% 58% 42% 52%; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: .7rem var(--pad);
  background: rgba(252, 239, 217, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(35, 24, 14, .1);
}
.nav__brand { display: inline-flex; align-items: center; gap: .55rem; }
.nav__mark { width: 30px; height: 30px; object-fit: contain; }
.nav__name {
  font-family: "Archivo Black", sans-serif;
  font-size: 1.02rem;
  letter-spacing: .01em;
}
.nav__links { display: flex; gap: 1.5rem; margin-left: auto; }
.nav__links a {
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  opacity: .82;
  transition: opacity .15s;
}
.nav__links a:hover { opacity: 1; color: var(--red); }
.nav .btn { margin-left: 0; }
.nav__links + .btn { margin-left: 1rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
  text-align: center;
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.hero__lockup {
  width: min(700px, 90vw);
  margin: 0 auto 1.5rem;
}
.hero__tagline {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(1.25rem, 3vw, 2.05rem);
  line-height: 1.1;
  margin: 0 auto .55rem;
  max-width: none;
  white-space: nowrap;
}
@media (max-width: 460px) {
  .hero__tagline { white-space: normal; max-width: 18ch; }
}
.hero__fund {
  font-size: clamp(1rem, 1.9vw, 1.18rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--red);
  margin: 0 auto 1.5rem;
  max-width: none;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .hero__fund { white-space: normal; max-width: 32ch; }
}
.hero__meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  font-weight: 600;
  font-size: clamp(.9rem, 1.6vw, 1.05rem);
  margin: 0 0 1.9rem;
  color: var(--blue);
}
.hero__meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); display: inline-block;
}
.hero__cta { display: inline-flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* Hero: subtle parallax targets + breathing entrance */
.hero__lockup, .hero .blob { will-change: transform; }
.hero__parallax { transition: transform .35s var(--ease); }

@media (prefers-reduced-motion: no-preference) {
  .hero .blob { animation: floaty 9s ease-in-out infinite; }
  .blob--red  { animation-duration: 11s; }
  .blob--blue { animation-duration: 13s; animation-direction: reverse; }
  .blob--gold { animation-duration: 9s; }

  .js-hero .hero__lockup,
  .js-hero .hero__tagline,
  .js-hero .hero__fund,
  .js-hero .hero__meta,
  .js-hero .hero__cta {
    opacity: 0;
    translate: 0 16px;
    animation: heroIn .9s var(--ease) forwards;
  }
  .js-hero .hero__lockup  { animation-delay: .05s; }
  .js-hero .hero__tagline { animation-delay: .22s; }
  .js-hero .hero__fund    { animation-delay: .34s; }
  .js-hero .hero__meta    { animation-delay: .46s; }
  .js-hero .hero__cta     { animation-delay: .58s; }
}

/* float uses the `translate` property so JS parallax (transform) composes cleanly */
@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}
@keyframes heroIn {
  to { opacity: 1; translate: 0 0; }
}

/* ============================================================
   CONCEPT ART BAND
   ============================================================ */
.band {
  height: clamp(220px, 34vw, 440px);
  background-color: var(--cream-2);
  background-image: url("assets/concept-band.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
}
/* Mangan's pre-made banner illustrations: same strip height as the first band.
   Each is cropped to that strip, anchored so the composition survives the cut. */
.band--market {
  background-image: url("assets/band-pavilion.jpg");
  /* the cut lands on tree canopy above the roof and floor below the feet */
  background-position: center 56%;
}
.band--gathering {
  /* The row of vases has only ~32px of side margin, so a side crop slices the end
     pieces. -v2 is the same artwork on a canvas padded top/bottom with its own cream
     to 1228/418 = 2.94 — the band's ratio while its height tracks 34vw — so from
     647px up the cut only ever trims cream. Below that the 220px floor squares the
     band off and the row does crop at the sides, same as the first band. */
  background-image: url("assets/band-vases-v2.jpg");
}

/* ============================================================
   ORIGIN
   ============================================================ */
.origin { text-align: center; background: var(--cream); }
.origin .h2 { margin-bottom: 1.3rem; }
.origin .lead strong { color: var(--red); }

/* ============================================================
   CONCEPT
   ============================================================ */
.concept { background: var(--cream-2); }
.concept__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.concept__figure {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(35, 24, 14, .55);
}
.concept__figure img { width: 100%; height: 100%; object-fit: cover; }

.callout {
  margin: 1.4rem 0 0;
  padding: 1rem 1.15rem;
  background: rgba(0, 85, 137, .08);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  font-size: .98rem;
}
.callout__label {
  display: block;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: .02em;
  margin-bottom: .15rem;
}

/* ============================================================
   EXPERIENCE — the four areas
   ============================================================ */
.experience { background: var(--cream); }
.experience .section__head .lead { max-width: 52ch; }

/* Placeholder for the illustrated map of the four areas (sketch pending) */
.areas-ph {
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding: clamp(40px, 8vw, 88px) clamp(20px, 5vw, 48px);
  border: 2px dashed rgba(35, 24, 14, .28);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(35, 24, 14, .025) 22px 44px),
    var(--cream-2);
  text-align: center;
}
.areas-ph__names {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem .9rem;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  line-height: 1.15;
  color: var(--ink);
}
.areas-ph__x { color: var(--gold); font-weight: 900; }
.areas-ph__note {
  margin: 1.1rem 0 0;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--red);
  opacity: .85;
}

.cards__hint {
  font-size: .9rem;
  font-weight: 600;
  color: var(--red);
  margin: -1.6rem 0 1.8rem;
  opacity: .85;
}
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
  align-items: start;
}
.card {
  background: var(--cream-2);
  border: 1px solid rgba(35, 24, 14, .1);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -26px rgba(35, 24, 14, .5);
}
.card.is-open {
  border-color: rgba(35, 24, 14, .22);
  box-shadow: 0 22px 44px -26px rgba(35, 24, 14, .5);
}

/* clickable head — a real <button>, so keyboard + screen readers work */
.card__head {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 1.7rem 1.5rem;
  cursor: pointer;
  position: relative;
}
.card__icon {
  display: inline-flex;
  width: 52px; height: 52px;
  align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--cream);
  color: var(--red);
  margin-bottom: 1rem;
}
.card__icon svg { width: 28px; height: 28px; }
.card:nth-child(2) .card__icon { color: var(--blue); }
.card:nth-child(3) .card__icon { color: var(--gold); }
.card:nth-child(4) .card__icon { color: var(--green); }
.card__chev {
  position: absolute;
  top: 1.6rem; right: 1.4rem;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--ink);
  opacity: .55;
  transition: transform .3s var(--ease), opacity .2s;
}
.card__chev svg { width: 18px; height: 18px; }
.card__head:hover .card__chev { opacity: 1; }
.card.is-open .card__chev { transform: rotate(180deg); opacity: 1; }
.card__head:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; border-radius: var(--radius); }
.card__title {
  display: block;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.18rem;
  margin: 0 0 .5rem;
  padding-right: 1.6rem;
}
.card__text { display: block; font-size: .96rem; margin: 0; line-height: 1.5; }

/* expanding panel — animated via grid-template-rows 0fr -> 1fr */
.card__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s var(--ease);
}
.card.is-open .card__more { grid-template-rows: 1fr; }
.card__more-in { overflow: hidden; }
.card__extra {
  margin: 0 1.5rem 1rem;
  padding-top: 1rem;
  font-size: .92rem;
  line-height: 1.5;
  color: rgba(35, 24, 14, .82);
  border-top: 1px solid rgba(35, 24, 14, .12);
}
.card__extra em { font-style: normal; color: var(--red); font-weight: 600; }
.card__fb {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 1.5rem 1.6rem;
}
.fb {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .3em .7em;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid rgba(35, 24, 14, .14);
  display: inline-flex;
  align-items: center;
  gap: .4em;
}
.fb::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.fb--bar   { color: var(--red); }
.fb--food  { color: var(--gold); }
.fb--water { color: var(--blue); }
.fb--near  { color: var(--green); }

/* ============================================================
   ATMOSPHERE (repurposed "spring" section)
   ============================================================ */
.spring { background: var(--cream-2); }
.spring__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.spring__figure {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(35, 24, 14, .55);
}
.spring__figure img { width: 100%; aspect-ratio: 10 / 9; height: auto; object-fit: cover; }

/* ============================================================
   DETAILS
   ============================================================ */
.details { background: var(--cream); }
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
}
.fact {
  text-align: center;
  padding: 1.6rem 1.1rem;
  border: 1px solid rgba(35, 24, 14, .12);
  border-radius: var(--radius);
  background: var(--cream-2);
}
.fact__icon {
  display: inline-flex;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  color: var(--blue);
  margin-bottom: .7rem;
}
.fact__icon svg { width: 30px; height: 30px; }
.fact__title {
  font-family: "Archivo Black", sans-serif;
  font-size: 1.08rem;
  margin: 0 0 .35rem;
}
.fact__text { font-size: .92rem; margin: 0; line-height: 1.45; }
.fact__text em { font-style: normal; color: var(--red); font-weight: 600; }
.fact__text a { color: var(--red); font-weight: 600; border-bottom: 1px solid rgba(201, 56, 2, .4); }
.fact__text a:hover { border-bottom-color: var(--red); }

/* ============================================================
   TICKETS
   ============================================================ */
.tickets {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  text-align: center;
}
.tickets__inner { position: relative; z-index: 2; }
.tickets__lead {
  color: var(--cream);
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  margin: 0 auto 1.4rem;
  max-width: 40ch;
  opacity: .95;
}
.tickets__price {
  color: var(--cream);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 .35rem;
}
.tickets__price span:first-child { color: var(--gold); }
.tickets__price-x { opacity: .5; margin: 0 .4em; }
.tickets__est {
  color: var(--cream);
  opacity: .7;
  font-size: .88rem;
  margin: 0 0 2rem;
}

/* Three-tier pricing */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 20px);
  margin: 0 auto 2rem;
  max-width: 560px;
}
.tier {
  padding: 1.4rem 1rem;
  border: 1.5px solid rgba(252, 239, 217, .3);
  border-radius: var(--radius);
  background: rgba(252, 239, 217, .07);
}
.tickets .tiers--single {
  grid-template-columns: 1fr;
  justify-items: center;
  max-width: 440px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.tiers--single .tier { width: 100%; padding: 2.2rem 1.6rem; text-align: center; }
.tiers--single .tier__price { font-size: clamp(2.8rem, 7vw, 3.8rem); }
.tiers--single .tier__label { font-size: 1.02rem; margin-top: .6rem; }
.tier--free { border-color: rgba(244, 166, 0, .55); background: rgba(244, 166, 0, .1); }
/* Aug 5: the four areas are not named before purchase — this line replaces the
   map placeholder so the mystery reads as intentional, not unfinished. */
.areas-secret {
  margin: clamp(28px, 5vw, 46px) 0 0;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 30ch;
}
.areas-secret span { color: var(--red); }
.tickets .tiers--pair {
  grid-template-columns: repeat(2, 1fr);
  max-width: 560px; width: 100%;
  margin-left: auto; margin-right: auto;
  align-items: stretch;
}
.tiers--pair .tier { padding: 1.9rem 1.2rem; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.tiers--pair .tier__price { font-size: clamp(2rem, 5.5vw, 2.9rem); }
.tiers--pair .tier__label { font-size: .92rem; margin-top: .55rem; }
.tier__note { display: block; margin-top: .45rem; font-size: .76rem; letter-spacing: .02em; opacity: .72; }
.tier__price {
  display: block;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1;
  color: var(--gold);
}
.tier__label {
  display: block;
  margin-top: .5rem;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--cream);
  opacity: .92;
}

.tickets__incl {
  color: var(--cream);
  font-size: clamp(.96rem, 1.5vw, 1.08rem);
  line-height: 1.5;
  margin: 0 auto 2rem;
  max-width: 40ch;
  opacity: .95;
}

/* Buy Tickets — solid gold once the ticket link lands (data-tbc). Until then it's a
   quiet cream outline: fading the gold with opacity turns it olive against the blue,
   which is nowhere in the palette, and drags the label under contrast. */
.tickets__buy { margin: 0 auto; }
.btn--buy { font-size: 1.08rem; padding: 1.05em 2.2em; }
.btn--buy:disabled {
  background: transparent;
  border-color: rgba(252, 239, 217, .35);
  color: rgba(252, 239, 217, .75);
  cursor: not-allowed;
}
.btn--buy:disabled:hover { transform: none; background: transparent; }
.tickets__soon {
  margin: .9rem 0 0;
  color: var(--cream);
  opacity: .75;
  font-size: .92rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(40px, 6vw, 64px) 0;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
}
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.footer__by { margin: 0; font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.footer__hdh { width: 210px; max-width: 62vw; height: auto; opacity: .95; }
.footer__social { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-left: auto; }
.footer__social a {
  font-weight: 600;
  font-size: .92rem;
  opacity: .8;
  transition: opacity .15s;
  border-bottom: 1px solid transparent;
}
.footer__social a:hover { opacity: 1; border-bottom-color: var(--gold); }
.footer__fine { width: 100%; margin: 0; font-size: .82rem; opacity: .55; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* staggered entrance for grids of cards/facts */
@media (prefers-reduced-motion: no-preference) {
  .cards .reveal:nth-child(2) { transition-delay: .08s; }
  .cards .reveal:nth-child(3) { transition-delay: .16s; }
  .cards .reveal:nth-child(4) { transition-delay: .24s; }
  .cards .reveal:nth-child(5) { transition-delay: .32s; }
  .facts .reveal:nth-child(2) { transition-delay: .08s; }
  .facts .reveal:nth-child(3) { transition-delay: .16s; }
  .facts .reveal:nth-child(4) { transition-delay: .24s; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .concept__grid,
  .spring__grid { grid-template-columns: 1fr; }
  .concept__figure { order: -1; }
}

@media (max-width: 640px) {
  .nav__links { display: none; }
  .nav .btn { margin-left: auto; }
  .cards { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .tiers { grid-template-columns: 1fr; max-width: 320px; }
  .tickets .tiers--pair { grid-template-columns: 1fr; max-width: 320px; }
  .btn--buy { width: 100%; }
}

/* The four names wrap to two lines below ~690px (measured), which leaves a
   separator dangling at the end of the first line. Drop to spacing alone. */
@media (max-width: 700px) {
  .areas-ph__x { display: none; }
  .areas-ph__names { gap: .45rem 1.5rem; }
}