/* ============================================================
   Landmark Hunt — page-specific styles
   Source: NYC-Cupola/designs/scavenger-hunt/index.html (verbatim)
   Image paths adjusted: ../../assets/production/* → /imgs/*
   Mobile-first, single accent, no card grid clones.
   ============================================================ */

/* Override site.css v1 heading color for v2 ink within <main>.
   Same workaround as home.css / about.css; remove during Phase 10 token consolidation. */
main h1, main h2, main h3, main h4, main h5, main h6 {
  color: var(--ink-primary);
}

/* Hero — uses canonical .hero shell from c360.css for type colors + veil.
   Only override the panoramic photo and the H1 max-width here. */
.hunt-hero .bg-photo {
  background-image: url('/imgs/panoramas/east.jpg');
  background-position: center 38%;
}
.hunt-hero h1.hero-h1 {
  max-width: 18ch;
}

/* Sticky progress bar */
.hunt-progress {
  position: sticky;
  top: 0;
  z-index: 50;
  background: oklch(13% 0.025 268 / 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--t-medium);
}
.hunt-progress__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 14px var(--container-px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
}
.hunt-progress__count {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--ink-primary);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.hunt-progress__count strong { color: var(--gold-accent); font-weight: 400; font-size: 28px; margin-right: 4px; }
.hunt-progress__rail {
  position: relative;
  height: 3px;
  background: var(--hairline);
  overflow: hidden;
}
.hunt-progress__fill {
  position: absolute; inset: 0;
  width: 0%;
  background: var(--gradient-civic-gold);
  transform-origin: left center;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
/* Shimmer pass on every update — JS toggles .is-pulsing on the
   fill element each time the count changes; the class is removed
   and re-added with a forced reflow so the animation re-fires.
   mix-blend-mode: overlay so the catchlight reads against the
   gold gradient as a brief bright sweep rather than a flat band. */
.hunt-progress__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg,
    transparent 35%,
    oklch(99% 0.02 92 / 0.85) 50%,
    transparent 65%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0;
}
.hunt-progress__fill.is-pulsing::after {
  opacity: 1;
  animation: hunt-progress-shimmer 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes hunt-progress-shimmer {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hunt-progress__fill.is-pulsing::after { animation: none; opacity: 0; }
}
.hunt-progress__share {
  appearance: none;
  background: transparent;
  color: var(--gold-accent);
  border: 1px solid var(--gold-soft);
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.hunt-progress__share:hover { background: var(--gold-accent); color: var(--surface-base); border-color: var(--gold-accent); }
.hunt-progress__share svg { width: 14px; height: 14px; }
@media (max-width: 560px) {
  .hunt-progress__inner { grid-template-columns: auto 1fr; gap: 12px; }
  .hunt-progress__share { grid-column: 1 / -1; justify-content: center; }
}

/* How it works strip */
.hunt-how {
  padding: var(--space-7) 0 var(--space-6);
  border-bottom: 1px solid var(--hairline);
}
.hunt-how__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px) {
  .hunt-how__inner { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-7); }
}
.hunt-how__step {
  display: grid;
  /* Poiret One is proportional, so "01" is far narrower than "02"/"03".
     With an `auto` number track each step's heading/body started at a
     different x (jagged left edge). Fix the number column so every step's
     content aligns. 4rem (64px) fits the widest 2-digit numeral at the
     40px size (~61px) with clearance, verified on the live page. */
  grid-template-columns: 4rem 1fr;
  align-items: start;
  gap: 18px;
}
.hunt-how__num {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 0.9;
  /* Poiret One renders the numeral glyph ~5px ABOVE the heading glyph even
     though the grid box-tops are aligned (align-items:start), so the big
     number reads high against its heading. Nudge it down so the numeral cap
     meets the heading cap. 0.125em == 5px at the 40px size (em-relative so it
     tracks the font size; numeral/heading sizes are fixed at every breakpoint
     so this is correct on mobile and desktop). Verified on the live
     /LandmarkHunt page: numeral/heading cap residual 0px. */
  transform: translateY(0.125em);
  color: var(--gold-accent);
  letter-spacing: 0.02em;
}
.hunt-how__step h3 {
  margin: 0 0 4px;
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-primary);
}
.hunt-how__step p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  max-width: 38ch;
}

/* Direction group */
.hunt-group {
  padding: var(--space-9) 0 var(--space-8);
  position: relative;
  border-bottom: 1px solid var(--hairline);
}
.hunt-group--north  { background: var(--surface-base); }
.hunt-group--east   { background: var(--surface-mark); }
.hunt-group--south  { background: var(--surface-base); }
.hunt-group--west   { background: var(--surface-mark); }

.hunt-group__head {
  max-width: var(--container-max);
  margin: 0 auto var(--space-7);
  padding: 0 var(--container-px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (min-width: 720px) {
  .hunt-group__head { grid-template-columns: 1fr 320px; gap: var(--space-7); }
}
.hunt-group__heading {
  display: flex; flex-direction: column; gap: 14px;
}
.hunt-group__compass {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--gold-accent);
  text-transform: uppercase;
}
.hunt-group__compass::before {
  content: "";
  width: 36px; height: 1px;
  background: var(--gradient-civic-gold);
}
.hunt-group__title {
  margin: 0;
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--ink-primary);
}
.hunt-group__title em {
  display: block;
  font-family: var(--serif-quote);
  font-style: italic;
  font-size: 0.48em;
  color: var(--gold-warm);
  text-transform: none;
  letter-spacing: 0.005em;
  margin-top: 6px;
}
.hunt-group__pano {
  position: relative;
  aspect-ratio: 16 / 9;
}
.hunt-group__pano .frame-a {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hunt-group__pano img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .hunt-group__pano:hover img,
  .hunt-group__pano:focus-within img { transform: scale(1.04); }
}
/* :focus-within fallback for keyboard nav on touch devices */
.hunt-group__pano:focus-within img { transform: scale(1.04); }
.hunt-group__pano:hover .frame-a .corner,
.hunt-group__pano:focus-within .frame-a .corner {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  opacity: 1;
}
.hunt-group__pano-label {
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 5px 12px;
  background: oklch(13% 0.025 268 / 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gold-accent);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* Landmark grid — asymmetric, NOT identical card layout */
.hunt-grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.hunt-grid--2 { grid-template-columns: 1fr; }
.hunt-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .hunt-grid--2 { grid-template-columns: 1fr 1fr; }
  .hunt-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
  .hunt-grid { gap: var(--space-6); }
}

/* Landmark card — front face: clue + check. Back face: historical context.
   Flip via 3D rotateY on .landmark__inner; both faces stack in the same
   grid cell so the front sets the card height. */
.landmark {
  position: relative;
  perspective: 1400px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  height: 100%;
}
.landmark.is-flipped { cursor: default; }
.landmark__inner {
  display: grid;
  grid-template-areas: "stack";
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.landmark.is-flipped .landmark__inner { transform: rotateY(180deg); }
.landmark__face {
  grid-area: stack;
  position: relative;
  background: var(--surface-raise);
  border: 1px solid var(--hairline);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: border-color var(--t-medium);
}
.landmark__face--back {
  transform: rotateY(180deg);
  justify-content: stretch;
}
.landmark:hover .landmark__face { border-color: var(--gold-soft); }
.landmark.is-checked .landmark__face { border-color: var(--gold-accent); }

.landmark__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-mark);
}
.landmark__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter var(--t-medium);
}
@media (hover: hover) and (pointer: fine) {
  .landmark:hover .landmark__photo img { transform: scale(1.05); }
}

/* Frame A treatment — corners anchored to photo edges,
   expand outward on hover/focus per the canonical system pattern. */
.landmark__corner {
  position: absolute;
  width: 32px; height: 32px;
  border: 1.5px solid var(--gold-accent);
  pointer-events: none;
  opacity: 0.55;
  transition: width var(--t-medium), height var(--t-medium), opacity var(--t-medium);
  z-index: 2;
}
.landmark__corner.tl { top: 8px; left: 8px;   border-right: 0; border-bottom: 0; }
.landmark__corner.tr { top: 8px; right: 8px;  border-left: 0;  border-bottom: 0; }
.landmark__corner.bl { bottom: 8px; left: 8px;  border-right: 0; border-top: 0; }
.landmark__corner.br { bottom: 8px; right: 8px; border-left: 0;  border-top: 0; }
.landmark:hover .landmark__corner,
.landmark:focus-visible .landmark__corner,
.landmark.is-checked .landmark__corner {
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  opacity: 1;
}

.landmark__num {
  position: absolute;
  top: 18px;
  left: 24px;
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 52px;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--ink-primary);
  text-shadow: 0 2px 12px oklch(13% 0.025 268 / 0.65);
  z-index: 3;
}
.landmark__compass-chip {
  position: absolute;
  top: 22px;
  right: 28px;
  padding: 4px 10px;
  background: oklch(13% 0.025 268 / 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gold-accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 3;
}

.landmark__body {
  padding: var(--space-5) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}
.landmark__name {
  margin: 0;
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: var(--ink-primary);
  text-transform: uppercase;
}
.landmark__clue {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  max-width: 56ch;
}
.landmark__meta {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-quiet);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.landmark__meta b { color: var(--gold-accent); font-weight: 700; margin-right: 6px; }

.landmark__action {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
}
.landmark__check,
.landmark__info {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 0;
  color: var(--gold-accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast);
  display: inline-flex; align-items: center; gap: 8px;
}
.landmark__check { flex: 1 1 auto; justify-content: flex-start; text-align: left; }
.landmark__info { flex: 0 0 auto; justify-content: flex-end; }
.landmark__check:hover,
.landmark__info:hover,
.landmark__check:focus-visible,
.landmark__info:focus-visible { color: var(--gold-bright); }
.landmark__check:focus-visible,
.landmark__info:focus-visible {
  outline: 1px dashed var(--gold-soft);
  outline-offset: 4px;
}
.landmark__info svg {
  width: 14px; height: 14px;
  transition: transform var(--t-fast);
}
.landmark__info:hover svg,
.landmark__info:focus-visible svg { transform: translateX(2px); }

/* Checked state */
.landmark.is-checked .landmark__face--front { background: oklch(20% 0.034 268); }
.landmark.is-checked .landmark__photo img {
  filter: grayscale(0.15) brightness(0.95);
}
.landmark.is-checked .landmark__num { color: var(--gold-accent); }
.landmark.is-checked .landmark__check { color: var(--gold-bright); }

/* Gold sheen sweep on check — sits on .landmark__photo (not the
   full front face) so it's constrained to the image area, exactly
   like the Frame A on-hover shimmer. This matters for the blend
   mode: overlay against photographic mid-tones reads as a gentle
   catchlight, but overlay against the flat dark text-panel surface
   below the photo lit up dramatically and broke the effect.
   Same chroma/alpha profile as frame-media-shimmer for cohesion. */
.landmark.is-checked .landmark__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 34%,
    oklch(90% 0.14 88 / 0.34) 50%,
    transparent 66%);
  background-repeat: no-repeat;
  background-size: 220% 100%;
  background-position: 220% 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 4;
  animation: landmark-sheen 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}
@keyframes landmark-sheen {
  from { background-position: 220% 0; }
  to   { background-position: -120% 0; }
}

/* Center check badge */
.landmark__check-badge {
  position: absolute;
  top: 50%; left: 50%;
  width: 96px; height: 96px;
  background: oklch(13% 0.025 268 / 0.8);
  border: 2px solid var(--gold-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  /* Subtle overshoot on the badge confirms the check landed.
     Asymmetric: opacity feels instant at 200ms, transform takes
     a touch longer (280ms) so the spring-like overshoot reads. */
  transition: opacity 200ms ease, transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 5;
}
.landmark.is-checked .landmark__check-badge {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  /* Brief shimmer on the gold border (and a soft halo around it),
     delayed so it fires after the badge scale-in lands. The dark
     interior fill stays untouched — only border-color animates. */
  animation: badge-border-shimmer 1.2s cubic-bezier(0.22, 1, 0.36, 1) 260ms 1 forwards;
}
.landmark__check-badge svg {
  width: 44px; height: 44px;
  color: var(--gold-accent);
}
.landmark.is-checked .landmark__check-badge svg {
  /* Shimmer the checkmark stroke (currentColor) in sync with the
     border shimmer above. Same window, same easing, same peak hold. */
  animation: badge-check-shimmer 1.2s cubic-bezier(0.22, 1, 0.36, 1) 260ms 1 forwards;
}
@keyframes badge-border-shimmer {
  0%, 100% {
    border-color: var(--gold-accent);
    box-shadow: none;
  }
  30%, 50% {
    border-color: oklch(99% 0.02 92);
    box-shadow: 0 0 14px oklch(91% 0.13 92 / 0.45);
  }
}
@keyframes badge-check-shimmer {
  0%, 100% { color: var(--gold-accent); }
  30%, 50% { color: oklch(99% 0.02 92); }
}
@media (prefers-reduced-motion: reduce) {
  .landmark.is-checked .landmark__check-badge,
  .landmark.is-checked .landmark__check-badge svg { animation: none; }
}

/* Back face — historical significance */
.landmark__back-inner {
  display: flex; flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  gap: var(--space-3);
}
/* Back card uses the canonical .hero-eyebrow — strip the default
   bottom margin so the flex gap on .landmark__back-inner handles
   spacing instead of stacking. */
.landmark__back-inner .hero-eyebrow { margin-bottom: 0; }
.landmark__back-title {
  margin: 0;
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: 0.03em;
  color: var(--ink-primary);
  text-transform: uppercase;
  line-height: 1.1;
}
.landmark__back-body {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
  overflow-y: auto;
  flex: 1 1 auto;
}
.landmark__back-close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--gold-soft);
  padding: 8px 16px;
  color: var(--gold-accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.landmark__back-close:hover,
.landmark__back-close:focus-visible {
  background: var(--gold-accent);
  color: var(--surface-base);
  border-color: var(--gold-accent);
}
.landmark__back-close:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 2px;
}
.landmark__back-close svg {
  width: 14px; height: 14px;
  transition: transform var(--t-fast);
}
.landmark__back-close:hover svg,
.landmark__back-close:focus-visible svg { transform: translateX(-2px); }

@media (prefers-reduced-motion: reduce) {
  .landmark__inner { transition: none; }
  .landmark__info svg,
  .landmark__back-close svg { transition: none; }
}

/* Completion + share */
.hunt-finish {
  padding: var(--space-10) 0;
  position: relative;
  overflow: hidden;
  background: var(--surface-base);
}
.hunt-finish__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--container-px);
  text-align: center;
  position: relative; z-index: 2;
}
.hunt-finish .bg-laurel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(circle at 50% 50%, oklch(94% 0.18 92 / 0.04) 0%, transparent 70%);
}
.hunt-finish__eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--gold-accent);
  text-transform: uppercase;
  padding: 6px 0;
  border-top: 1px solid var(--gold-soft);
  border-bottom: 1px solid var(--gold-soft);
  margin-bottom: var(--space-6);
}
.hunt-finish__title {
  margin: 0 0 var(--space-5);
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--ink-primary);
}
.hunt-finish__title em {
  display: block;
  font-family: var(--serif-quote);
  font-style: italic;
  font-size: 0.5em;
  color: var(--gold-warm);
  text-transform: none;
  letter-spacing: 0.005em;
  margin-top: var(--space-3);
}
.hunt-finish__lede {
  margin: 0 auto var(--space-6);
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.6;
  max-width: 56ch;
}
.hunt-finish__count {
  margin: 0 auto var(--space-7);
  display: inline-flex; align-items: baseline; gap: 14px;
  padding: 14px 28px;
  border: 1px solid var(--gold-soft);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.hunt-finish__count strong {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  color: var(--gold-accent);
  letter-spacing: 0.02em;
}
.hunt-finish__actions {
  display: flex; gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}
.hunt-finish__hashtags {
  margin-top: var(--space-7);
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--gold-accent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .landmark__photo img { transition: none; }
  .landmark:hover .landmark__photo img { transform: none; }
  .hunt-group__pano img { transition: none; }
  .hunt-group__pano:hover img { transform: none; }
  .landmark.is-checked .landmark__photo::after { animation: none; opacity: 0; }
  .landmark .landmark__corner { transition: none; }
  .hunt-progress__fill { transition: none; }
}