/* home.css — homepage-specific layout layered on top of secondary.css (which
   provides the shared header, chamber walls, mountains, and footer band).
   Hero = blank book base (hero_book.png) + transparent map overlay
   (hero_book_image.png) + real-text name in the open upper-left corner.
   The field-journal cards fill the chamber below. */

/* ---------- Hero: layered book + map + name ---------- */
.hero-book {
  position: relative;
  max-width: 1672px;
  margin: 0 auto;
  aspect-ratio: 1670 / 560;            /* shows the upper portion of the 719-tall book */
  overflow: hidden;
  background: url("../assets/art/hero_book.png") top center / 100% auto no-repeat;
  isolation: isolate;
}
/* the route + medallions + labels, baked transparent; top-aligned on the book */
.hero-book__map {
  position: absolute;
  top: 52px; left: 0; right: 0;
  aspect-ratio: 1670 / 488;
  background: url("../assets/art/hero_book_image.png") top center / 100% auto no-repeat;
  z-index: 1;
  pointer-events: none;
}
/* Clickable medallion hotspots, sized to match the map image exactly so % left/top
   map straight to the 1670x488 art. Each links to a Journey chapter. */
.hero-book__waypoints {
  position: absolute;
  top: 52px; left: 0; right: 0;
  aspect-ratio: 1670 / 488;
  z-index: 3;
  pointer-events: none;                /* container passes through; anchors catch clicks */
}
.hero-book__waypoints .waypoint {
  position: absolute;
  top: 34.9%;
  width: 3.6%;                          /* ~60px on the 1670-wide map */
  height: 12.3%;                        /* equal pixels to width -> a circle */
  pointer-events: auto;
  border-radius: 50%;
  transition: background .15s ease, box-shadow .15s ease;
}
.hero-book__waypoints .waypoint span {   /* accessible + crawlable label, visually hidden */
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.hero-book__waypoints .waypoint:hover,
.hero-book__waypoints .waypoint:focus-visible {
  background: rgba(210, 167, 97, 0.16);
  box-shadow: 0 0 0 2px rgba(210, 167, 97, 0.85);
  outline: none;
}

/* real text sitting in the blank upper-left of the book */
.hero-book__name {
  position: absolute;
  z-index: 2;
  left: clamp(1.5rem, 4.5%, 5.5rem);
  top: clamp(1.3rem, 7%, 4.5rem);
  transform: translate(20px, 15px);    /* nudge: 20px right, 15px down (name + tagline together) */
  max-width: 38%;
  color: #2b2113;                      /* ink on parchment */
}
.hero-book__name h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.3rem, 4.7vw, 4.7rem);
  line-height: 0.92;
}
.hero-book__name p {
  margin: calc(1rem + 5px) 0 0 15px;   /* tagline: +15px right, +5px down (name stays put) */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.45vw, 1.55rem);
  line-height: 1.32;
  max-width: 34ch;
}

/* ---------- Field-journal cards in the chamber ---------- */
.card-grid {
  position: relative;
  z-index: 2;                          /* above the pillar walls */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.8rem);
  width: min(1432px, 85.5%);
  margin: 0 auto;
  padding: clamp(3rem, 6%, 6.5rem) 0 clamp(2.5rem, 5%, 5rem);
}
.field-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--cream);
  border: 1px solid rgba(210, 167, 97, 0.34);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 100% 0%, rgba(210, 167, 97, 0.08), transparent 40%),
    rgba(8, 18, 27, 0.94);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.field-card:hover {
  transform: translateY(-4px);
  border-color: rgba(210, 167, 97, 0.62);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
.field-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid rgba(210, 167, 97, 0.2);
}
.field-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.field-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.1rem 1.15rem 1.25rem;
  flex: 1;
}
.field-card__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  color: var(--gold-soft);
  line-height: 1.1;
}
.field-card__body p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #dccba5; }
.field-card__meta {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Field Journal carousel ---------- */
.card-carousel {
  position: relative;
  z-index: 2;                          /* above the pillar walls */
  width: min(1432px, 85.5%);
  margin: 0 auto;
  padding: clamp(3rem, 6%, 6.5rem) 0 clamp(2.5rem, 5%, 5rem);
}
.carousel-stage {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.6vw, 1.4rem);
}
.carousel-viewport {
  flex: 1 1 auto;
  min-width: 0;                        /* let it shrink so cards keep their size */
  /* Clip adjacent pages horizontally. Pad top/bottom (cancelled by an equal
     negative margin so nothing shifts) to give the cards' hover lift and shadow
     headroom inside the clip box, otherwise the lifted top edge gets cut off. */
  overflow: hidden;
  padding: 16px 0;
  margin: -16px 0;
}
.carousel-track {
  display: flex;
  transition: transform .45s cubic-bezier(.4, .05, .2, 1);
}
.carousel-page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.8rem);
}

/* Brass medallion arrows */
.carousel-arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(2.5rem, 3.2vw, 3.3rem);
  height: clamp(2.5rem, 3.2vw, 3.3rem);
  padding: 0;
  border-radius: 50%;
  color: #3a2a0e;                      /* engraved-ink chevron */
  cursor: pointer;
  border: 1px solid rgba(74, 52, 12, 0.7);
  background: linear-gradient(155deg, #f7e3ad 0%, #ddb866 34%, #c0913a 64%, #8f6420 100%);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 1px 1.5px rgba(255, 250, 228, 0.85),
    inset 0 -2px 3px rgba(74, 52, 12, 0.55);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.carousel-arrow:hover { filter: brightness(1.06); transform: translateY(-1px); }
.carousel-arrow:active { transform: translateY(0); }
.carousel-arrow:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.carousel-arrow:disabled {
  opacity: 0.4;
  cursor: default;
  filter: none;
  transform: none;
}
.carousel-arrow[hidden] { display: none; }
.carousel-arrow svg {
  width: 44%;
  height: 44%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Page dots — one per group of three */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: clamp(1.4rem, 2.4vw, 2.2rem);
}
.carousel-dots[hidden] { display: none; }
.carousel-dot {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(210, 167, 97, 0.55);
  background: rgba(210, 167, 97, 0.16);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.carousel-dot:hover { border-color: rgba(210, 167, 97, 0.9); }
.carousel-dot[aria-selected="true"] {
  background: linear-gradient(155deg, #f7e3ad, #c0913a);
  border-color: rgba(74, 52, 12, 0.6);
  transform: scale(1.1);
}
.carousel-dot:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

@media (max-width: 860px) {
  .card-grid { grid-template-columns: 1fr; width: min(var(--max), calc(100% - 2.5rem)); }
  .hero-book__name { max-width: 58%; }
  /* The tagline overruns the baked-in map medallions at narrow widths; the name
     carries the hero on mobile. Full tagline still lives in the meta/OG tags. */
  .hero-book__name p { display: none; }
  .card-carousel { width: min(var(--max), calc(100% - 2.5rem)); }
  .carousel-page { grid-template-columns: 1fr; }   /* one card per page on phones */
}