/* ============================================================
   Trinket Treasure Trek — style.css
   Palette:
     --cream:       #F5EDE0   (background)
     --cream-dark:  #EDE0CE   (section alternates)
     --black:       #1A1208   (primary text)
     --gold:        #C9A84C   (accents)
     --gold-light:  #E8D49A   (subtle gold)
     --gold-dark:   #9B7A2A   (deep gold)
     --oxblood:      #6B2737   (second accent — marketplace/energy)
     --oxblood-dark: #4E1C28   (deep oxblood — hover states)
     --social-blue:  #2B3A4A   (social platform accent)
     --white:       #FFFFFF
   ============================================================ */

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

/* ── Custom properties ────────────────────────────────────── */
:root {
  --cream: #F5EDE0;
  --cream-dark: #EDE0CE;
  --cream-deeper: #E4D2B8;
  --black: #1A1208;
  --black-soft: #3D3020;
  --gold: #C9A84C;
  --gold-light: #E8D49A;
  --gold-dark: #9B7A2A;
  --oxblood: #6B2737;
  --oxblood-dark: #4E1C28;
  --social-blue: #2B3A4A;
  --white: #FFFFFF;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Raleway', system-ui, sans-serif;

  --max-width: 1100px;
  --section-pad: 5rem 1.5rem;
}

/* ── Base ─────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--white);
  color: var(--black);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;

  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

main {
  flex: 1;
}

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

a {
  position: relative;
  color: var(--gold-dark);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--gold);
}

/* ── Focus states (keyboard/screen-reader visibility) ────────
   gold-dark on cream passes contrast better than gold, and a
   visible outline + offset makes the focused element unmistakable
   regardless of what's behind it. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.platform-card:focus-visible,
.listing-card__link:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Footer/dark backgrounds need a lighter focus ring to stay visible */
.site-footer a:focus-visible {
  outline-color: var(--gold-light);
}

/* ── Typography ───────────────────────────────────────────── */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--black);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-block;
  padding: 0.75rem 2rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
  text-decoration: none;
  overflow: visible;
}

/* Both logo links wrap an <img> that's block-level (see the global
   img { display: block } reset below) and centered via margin: auto.
   A block-level child inside a default `inline` <a> is invalid nesting,
   and browsers resolve it by expanding the link to the full width of
   its container -- which was silently breaking the sparkle drift
   effect (spawning across the whole footer width instead of just the
   icon) since it reads the link's actual bounding box. */
.header-logo-link,
.footer-logo-link {
  display: inline-block;
}

/* Subtle hover sparkle — two small 4-point stars that twinkle in near
   opposite corners on hover. Pure CSS, no JS needed. Applied to every
   hoverable element on the site: buttons, cards, nav links, the modal
   close button, and plain text links (footer, body copy, etc.). */
.btn::before,
.btn::after,
.platform-card::before,
.platform-card::after,
.listing-card::before,
.listing-card::after,
.hub-card::before,
.hub-card::after,
.header-nav a::before,
.header-nav a::after,
.modal__close::before,
.modal__close::after,
.header-logo-link::before,
.header-logo-link::after,
.footer-links a::before,
.footer-links a::after,
.about-image-link::before,
.about-image-link::after,
.fairy-sparkle::before,
.fairy-sparkle::after,
a::before,
a::after {
  content: '✦';
  position: absolute;
  font-size: 0.7rem;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}

.btn::before,
.platform-card::before,
.listing-card::before,
.hub-card::before,
.header-nav a::before,
.modal__close::before,
.header-logo-link::before,
.about-image-link::before,
.fairy-sparkle::before,
a::before {
  top: -6px;
  left: 10px;
  transform: scale(0.4) rotate(-20deg);
}

.btn::after,
.platform-card::after,
.listing-card::after,
.hub-card::after,
.header-nav a::after,
.modal__close::after,
.header-logo-link::after,
.about-image-link::after,
.fairy-sparkle::after,
a::after {
  bottom: -6px;
  right: 10px;
  transform: scale(0.4) rotate(20deg);
}

/* Nav links and plain text links are small — the badge-style corner
   offsets used on buttons/cards are too aggressive here, tuck in closer */
.header-nav a::before,
.footer-links a::before,
a::before {
  top: -8px;
  left: -4px;
  font-size: 0.55rem;
}

.header-nav a::after,
.footer-links a::after,
a::after {
  bottom: -8px;
  right: -4px;
  font-size: 0.55rem;
}

/* The header logo link wraps an image icon, not text — give it the
   larger button-scale sparkle instead of the tiny text-link size */
.header-logo-link::before,
.footer-logo-link::before {
  top: -8px;
  left: -6px;
  font-size: 0.7rem;
}

.header-logo-link::after,
.footer-logo-link::after {
  bottom: -8px;
  right: -6px;
  font-size: 0.7rem;
}

.btn:hover::before,
.btn:hover::after,
.platform-card:hover::before,
.platform-card:hover::after,
.listing-card:hover::before,
.listing-card:hover::after,
.hub-card:hover::before,
.hub-card:hover::after,
.header-nav a:hover::before,
.header-nav a:hover::after,
.modal__close:hover::before,
.modal__close:hover::after,
.header-logo-link:hover::before,
.header-logo-link:hover::after,
.footer-links a:hover::before,
.footer-links a:hover::after,
.about-image-link:hover::before,
.about-image-link:hover::after,
.fairy-sparkle:hover::before,
.fairy-sparkle:hover::after,
a:hover::before,
a:hover::after {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {

  .btn::before,
  .btn::after,
  .platform-card::before,
  .platform-card::after,
  .listing-card::before,
  .listing-card::after,
  .hub-card::before,
  .hub-card::after,
  .header-nav a::before,
  .header-nav a::after,
  .modal__close::before,
  .modal__close::after,
  .header-logo-link::before,
  .header-logo-link::after,
  .footer-links a::before,
  .footer-links a::after,
  .about-image-link::before,
  .about-image-link::after,
  .fairy-sparkle::before,
  .fairy-sparkle::after,
  a::before,
  a::after {
    transition: none;
  }
}

/* Continuous drifting sparkles — spawned by JS while hovering, these
   float upward and fade, like fairy dust rising off the element.
   Distinct from the static corner twinkle above (which fades in place)
   and the click-burst (which scatters outward from a click point). */
.drift-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  color: var(--gold);
  opacity: 0;
  animation: sparkle-drift 1.3s ease-out forwards;
}

.hero-drift-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;

  color: #B8912A;

  opacity: 0;

  font-weight: 600;

  text-shadow:
    0 0 4px rgba(201, 168, 76, .90),
    0 0 10px rgba(201, 168, 76, .45);

  animation: sparkle-drift 1.8s ease-out forwards;
}

@keyframes sparkle-drift {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--drift-x), var(--drift-y)) scale(1);
  }
}

/* ── Hero banner fairy dust ───────────────────────────────── */
.hero-sparkle {
  position: fixed;
  z-index: 9999;
  display: block;
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
  animation: hero-sparkle-drift 1.9s ease-out forwards;
}

.hero-sparkle--symbol {
  color: #A97818;
  font-weight: 600;
  line-height: 1;
  text-shadow:
    0 0 3px rgba(255, 236, 176, 1),
    0 0 7px rgba(216, 174, 65, 0.85),
    0 0 12px rgba(155, 122, 42, 0.4);
}

.hero-sparkle--compass {
  width: 15px;
  height: 15px;
  object-fit: contain;
  filter:
    brightness(1.1) drop-shadow(0 0 4px rgba(201, 168, 76, 0.75));
}

.hero-sparkle--compass-ornate {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter:
    brightness(1.08) drop-shadow(0 0 5px rgba(201, 168, 76, 0.7));
  animation-duration: 2.2s;
}

@keyframes hero-sparkle-drift {
  0% {
    opacity: 0;
    transform:
      translate(0, 0) scale(0.45) rotate(0deg);
  }

  15% {
    opacity: 1;
  }

  70% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform:
      translate(var(--hero-drift-x),
        var(--hero-drift-y)) scale(1.08) rotate(var(--hero-rotation));
  }
}

/* Click-burst sparkles — small stars spawned by JS at the click point
   on primary buttons, animating outward and fading before removing
   themselves. See js/sparkle-effects.js */
.click-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  color: var(--gold);
  font-size: 14px;
  opacity: 1;
  animation: sparkle-burst 0.7s ease-out forwards;
}

@keyframes sparkle-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.6) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translate(var(--sparkle-x), var(--sparkle-y)) scale(1.1) rotate(90deg);
  }
}

.btn--primary {
  background: linear-gradient(to bottom,
      #6E5731 0%,
      #5F492B 15%,
      #533F25 35%,
      #47351F 50%,
      #3E2E1B 65%,
      #342616 85%,
      #2A1E12 100%);
  color: var(--gold-light);
  border: 1px solid #7A623A;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -2px 3px rgba(0, 0, 0, .35),
    0 2px 5px rgba(0, 0, 0, .18);
}

.btn--primary:hover {
  background: linear-gradient(to bottom,
      #F5E6B3 0%,
      #E8D49A 18%,
      #D7BA67 48%,
      #C9A84C 52%,
      #B78F32 82%,
      #9B7A2A 100%);
  border-color: var(--gold-dark);
  color: var(--black);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 3px rgba(0, 0, 0, .15),
    0 2px 6px rgba(0, 0, 0, .18);
}

.btn--secondary {
  background: transparent;
  color: #5F492B;
  border: 1px solid #7A623A;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.btn--secondary:hover {
  background: linear-gradient(to bottom,
      #F5E6B3 0%,
      #E8D49A 18%,
      #D7BA67 48%,
      #C9A84C 52%,
      #B78F32 82%,
      #9B7A2A 100%);
  color: var(--black);
  border-color: var(--gold-dark);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 3px rgba(0, 0, 0, .15),
    0 2px 6px rgba(0, 0, 0, .18);
}

/* ── Section shared styles ────────────────────────────────── */
.section {
  padding: var(--section-pad);
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* gold-dark gives ~3:1 contrast on cream vs. gold's ~1.9:1 —
     keeps the elegant gold feel but reads far more easily,
     especially at this small a size */
  color: var(--gold-dark);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 300;
  margin-bottom: 1rem;
  color: var(--black);
}

.section-subtitle {
  font-size: 1rem;
  color: var(--black-soft);
  max-width: 560px;
  margin: 0 auto 3rem;
  font-weight: 300;
}

/* Small aside note in the Platforms section — sets expectations
   before visitors click a card, without competing for attention
   with the section title/subtitle above it. */
.platforms-note {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--black-soft);
  opacity: 0.75;
  max-width: 480px;
  margin: -2rem auto 3rem;
  font-weight: 300;
  line-height: 1.6;
}

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--gold-light);
  padding: 0.75rem 1.5rem;
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header-logo {
  height: 48px;
  width: auto;
}

.header-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.header-nav a {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black);
}

.header-nav a:hover {
  color: var(--gold);
}

/* Mobile nav toggle button — hidden by default, shown only
   below 480px where the horizontal nav no longer fits */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--gold-light);
  cursor: pointer;
  padding: 0;
}

.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--black);
  transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  background: var(--white);
}

.hero-banner {
  width: 100%;
  overflow: hidden;
}

.hero-banner-img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 2.5rem 1.5rem;
  background: var(--white);
}

/* ── Ornament divider ─────────────────────────────────────── */
.ornament-divider {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.ornament-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.ornament-seal {
  position: relative;
  width: 80px;
  height: 80px;
  object-fit: contain;
  opacity: 0.85;
  flex-shrink: 0;
}

/* Homepage gold wax seal */
.ornament-seal--gold {
  width: 104px;
  height: auto;
}

/* ── Featured finds ───────────────────────────────────────── */
.featured {
  background: var(--white);
  padding-top: 4rem;
}

.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  text-align: left;
  margin-bottom: 4rem;
}

.listing-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gold-light);
  transition: box-shadow 0.2s, transform 0.2s;
}

.listing-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.listing-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.listing-card__img-wrap {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--cream-dark);
}

.listing-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.listing-card:hover .listing-card__img {
  transform: scale(1.04);
}

.listing-card__body {
  padding: 1rem 1.25rem 1.25rem;
}

.listing-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0.35rem;
  color: var(--black);
}

.listing-card__price {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--oxblood);
  margin-bottom: 0.75rem;
}

.listing-card__cta {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}

/* Placeholder when no listings yet */
.listings-placeholder {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: var(--black-soft);
  font-weight: 300;
  font-size: 1.05rem;
}

.placeholder-fairy {
  position: relative;
  width: 120px;
  height: auto;
  margin: 0 auto 1.5rem;
  opacity: 0.6;
}

.listings-placeholder a {
  color: var(--gold-dark);
  font-weight: 500;
  border-bottom: 1px solid var(--gold-light);
}

/* ── Platforms ────────────────────────────────────────────── */
.platforms {
  background: var(--white);
}

.platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 220px));
  justify-content: center;
  gap: 3rem;
}

/* Center a single fifth platform card on desktop */
@media (min-width: 769px) {
  .platform-card:last-child:nth-child(4n + 1) {
    grid-column: 2 / span 2;
    justify-self: center;
    width: 220px;
  }
}

.platform-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  min-height: 210px;
  padding: 0.75rem;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  text-decoration: none;
  color: var(--black);
  transition: transform 0.2s;
}

.platform-card:hover {
  background: transparent;
  color: var(--black);
  transform: translateY(-4px);
  box-shadow: none;
}

/* Pending marketplaces — not yet stocked with listings. Muted at rest
   so active marketplaces remain the priority while pending cards stay
   fully legible and interactive. */
.platform-card--pending {
  opacity: 0.72;
}

.platform-card--pending:hover {
  opacity: 1;
}

.platform-card__badge {
  position: absolute;
  top: -9px;
  right: 12px;
  background: var(--oxblood);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  line-height: 1;
  white-space: nowrap;
}

.platform-card--pending:hover .platform-card__badge {
  background: var(--gold-dark);
}

.platform-card__icon {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

/* Real brand icons (colored badge images), as opposed to the
   currentColor line-art icons social platforms use, or the text
   wordmarks a couple of marketplaces fall back to. */
.platform-card__icon--badge img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

/* eBay's real logo is a wide wordmark, not a square icon. */
.platform-card__icon--wide {
  width: 112px;
  min-width: 112px;
}

.platform-card__icon--wide img {
  width: auto;
  height: 34px;
  display: block;
}

.platform-card__icon svg {
  width: 52px;
  height: 52px;
}

/* Text wordmarks stay proportional rather than being forced square. */
.platform-card__icon--wordmark {
  width: 112px;
  min-width: 112px;
  flex: 0 0 auto;
}

.platform-card__icon--wordmark svg {
  width: auto;
  height: 28px;
  overflow: visible;
}

.platform-card__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.platform-card__name {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black);
}

.platform-card__handle {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--black-soft);
  opacity: 0.7;
}

.platform-card__arrow {
  margin-top: auto;
  font-size: 1rem;
  color: var(--gold-dark);
  opacity: 0.45;
  transition: opacity 0.2s, transform 0.2s, color 0.2s;
}

.platform-card:hover .platform-card__arrow {
  opacity: 1;
  transform: translateX(4px);
  color: var(--gold);
}

.platform-card:hover .platform-card__name,
.platform-card:hover .platform-card__handle {
  color: var(--black);
  opacity: 1;
}

/* ── About ────────────────────────────────────────────────── */
.about {
  background: var(--white);
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: center;
  text-align: left;
  max-width: var(--max-width);
  margin: 0 auto;
}

.about-logo {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  display: block;
}

/* The framed version includes its own ornate border baked into the
   image, so it reads better a bit larger than the plain logo mark */
.about-logo--framed {
  max-width: 420px;
}

/* On the dedicated About page, give the image column much more room
   so the framed picture reads at a height closer to the text block
   beside it, instead of looking small in a cramped 1/3-width column. */
.about-page .about-inner {
  grid-template-columns: 1fr 1.15fr;
}

.about-page .about-logo--framed {
  max-width: 100%;
}

/* ── About teaser (homepage) ─────────────────────────────────── */
.about-teaser {
  background: var(--white);
}

.hub-inner {
  text-align: center;
}

.hub-cards {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.hub-card {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 220px;
  text-decoration: none;
  transition: transform 0.2s;
}

.hub-card__img {
  width: 100%;
  max-width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
}

.hub-card__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--black);
}

.hub-card__arrow {
  font-size: 1rem;
  opacity: 0.4;
  transition: opacity 0.2s, transform 0.2s, color 0.2s;
  color: var(--gold-dark);
}

.hub-card:hover .hub-card__arrow {
  opacity: 1;
  transform: translateX(4px);
  color: var(--oxblood);
}

.hub-card:hover {
  transform: translateY(-4px);
}

.about-text .section-eyebrow,
.about-text .section-title {
  text-align: left;
}

.about-text .section-title {
  margin-bottom: 1.5rem;
}

.about-text p {
  font-size: 1rem;
  font-weight: 300;
  color: var(--black-soft);
  margin-bottom: 1rem;
  line-height: 1.8;
}

.about-signature {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--gold-dark) !important;
  margin-top: 1.5rem !important;
}

/* Plain company-credit byline — deliberately understated compared to
   the old script-style signature, since this reads as a small credit
   line rather than a personal sign-off. */
.about-byline {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--black-soft) !important;
  opacity: 0.75;
  margin-top: 1.5rem !important;
}

/* ── Contact page ─────────────────────────────────────────── */
.contact-page {
  background: var(--white);
  padding-top: 5rem;
  min-height: 60dvh;
}

.contact-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.contact-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Honeypot field — invisible to real visitors, but present in the DOM
   so spam bots that auto-fill every field on a page fill it in too.
   Web3Forms silently discards any submission where this is checked. */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Listing-inquiry notice — deliberately visually distinct from the
   surrounding prose (bordered, tinted) so it reads as a rule rather
   than another line of body copy someone might skim past. */
.contact-notice {
  text-align: left;
  background: var(--cream);
  border-left: 3px solid var(--oxblood);
  padding: 1rem 1.25rem;
  margin: 0 auto 2rem;
  max-width: 560px;
}

.contact-notice p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--black-soft);
  margin: 0;
}

.contact-notice strong {
  color: var(--black);
}

.contact-form {
  text-align: left;
  margin-top: 2.5rem;
}

.contact-form__field {
  margin-bottom: 1.5rem;
}

.contact-form__field label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black-soft);
  margin-bottom: 0.5rem;
}

.contact-form__field input[type="text"],
.contact-form__field input[type="email"],
.contact-form__field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--gold-light);
  border-radius: 0;
  resize: vertical;
  transition: border-color 0.2s;
}

.contact-form__field input[type="text"]:focus,
.contact-form__field input[type="email"]:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--gold-dark);
}

/* Explicit invalid-field indicator, since we handle validation feedback
   ourselves rather than relying on the browser's native tooltip. */
.contact-form__field--invalid {
  border-color: var(--oxblood) !important;
  background: rgba(107, 39, 55, 0.04);
}

.contact-form__actions {
  text-align: center;
  margin-top: 0.5rem;
}

.contact-form__actions .btn {
  border: none;
}

.contact-form__status {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.9rem;
  min-height: 1.4em;
}

.contact-form__status--success {
  color: var(--gold-dark);
}

.contact-form__status--error {
  color: var(--oxblood);
}

.contact-alt {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--cream-dark);
  text-align: center;
}

.contact-alt__buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.contact-alt__icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  transition: transform 0.15s, opacity 0.2s;
  opacity: 0.85;
}

.contact-alt__icon-link:hover {
  transform: translateY(-2px);
  opacity: 1;
}

.contact-alt__icon-link img {
  height: 26px;
  width: auto;
  display: block;
  border-radius: 5px;
}

.contact-alt__icon-link--badge img {
  height: 26px;
  width: 26px;
  border-radius: 6px;
  object-fit: cover;
}

.contact-alt p {
  font-size: 0.9rem;
  color: var(--black-soft);
  margin-bottom: 1rem;
}

/* ── Contact modal ────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 18, 8, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 200;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  position: relative;
  background: var(--white);
  max-width: 560px;
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 3rem 2.5rem 2.5rem;
  text-align: center;
  box-shadow: 0 20px 50px rgba(26, 18, 8, 0.3);
}

.modal .contact-form,
.modal .contact-alt {
  text-align: left;
}

.modal .contact-alt {
  text-align: center;
}

.modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--gold-light);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--black-soft);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.modal__close:hover {
  background: var(--black);
  color: var(--gold-light);
}

/* Prevent background scroll while the modal is open */
body.modal-open {
  overflow: hidden;
}

@media (max-width: 480px) {
  .modal {
    padding: 2.5rem 1.5rem 2rem;
  }
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background: var(--black);
  color: var(--cream);
  padding: 3rem 1.5rem;
  text-align: center;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-logo {
  width: 76px;
  height: auto;
  margin: 0 auto 1rem;
  /* The cube icon's natural colors (white fill, gold accent, black
     outline) already read correctly against the dark footer -- the
     invert filter used for the old fairy+box icon was tuned for a
     different, simpler asset and actually washed the gold out into
     a barely-visible dark smudge on this multi-tone icon. */
  opacity: 0.9;
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--gold-light);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

.footer-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  margin-bottom: 1.5rem;
}

.footer-links__group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.footer-links__group--marketplaces {
  justify-content: flex-end;
}

.footer-links__group--socials {
  justify-content: flex-start;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-icon {
  display: block;
  object-fit: contain;
}

.footer-icon--wide {
  width: 42px;
  height: auto;
}

.footer-icon--badge {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

.footer-social-icon {
  width: 24px;
  height: 24px;
  display: block;
  color: var(--gold-light);
}

.footer-links__separator {
  color: var(--gold-light);
  opacity: 0.5;
}

.footer-links a {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.footer-links a:hover {
  opacity: 1;
  color: var(--gold-light);
}

.footer-copy {
  font-size: 0.75rem;
  color: var(--cream);
  opacity: 0.4;
}

.footer-copy a {
  color: var(--cream);
  opacity: 1;
}

.footer-divider-star {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .header-nav {
    gap: 1rem;
  }

  .hero-banner-img {
    width: 100%;
    height: auto;
    display: block;
  }

  .about-page .about-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .about-text .section-eyebrow,
  .about-text .section-title {
    text-align: center;
  }

  .about-logo {
    max-width: 220px;
  }

  .about-page .about-logo--framed {
    max-width: 320px;
    margin: 0 auto;
  }

}

@media (max-width: 768px) {
  .footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .footer-links__group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
  }

  .footer-links__separator {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .nav-toggle {
    display: flex;
  }

  .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--gold-light);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
  }

  .header-nav.is-open {
    display: flex;
  }

  .header-nav a {
    width: 100%;
    padding: 0.9rem 1.5rem;
    border-top: 1px solid var(--cream-dark);
  }

  .hero-cta {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    text-align: center;
    max-width: 300px;
  }
}

/* ── Reduced motion ───────────────────────────────────────── */
/* Forces near-instant duration rather than `transition: none` /
   `animation: none` outright -- that blanket approach was silently
   breaking hover transforms elsewhere on the page (confirmed via
   isolated testing) and would have also stopped animationend events
   from ever firing, which the sparkle cleanup logic depends on to
   remove its elements. This achieves the same "no visible motion"
   result for reduced-motion users without either side effect. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}