/* ==========================================================================
   ETNIK — Joyería Artesanal · Panamá
   Design system "Opción C": carbón cálido + oro anticado + terracota
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Il sito ha una sola palette, sempre scura — non esiste una versione
     chiara. Senza questa dichiarazione i browser mobile (soprattutto
     Chrome e Samsung Internet su Android) applicano un "dark mode forzato"
     euristico quando il telefono è in modalità scura, e ridipingono i
     colori con una stima propria invece di usare quelli scelti qui.

     ⚠️ Le due righe servono entrambe, NON accorparle. La parola chiave
     `only` ha supporto più stretto di `dark`: dove non è riconosciuta il
     browser scarta l'INTERA dichiarazione, e senza la prima riga di
     riserva la pagina resterebbe senza color-scheme, cioè peggio che
     senza `only`. Chi capisce `only` usa la seconda e sovrascrive. */
  color-scheme: dark;
  color-scheme: dark only;

  /* Color */
  --ink:        #0F0D0B;   /* warm charcoal base */
  --ink-soft:   #17130F;   /* raised surfaces */
  --ink-card:   #1D1812;   /* cards */
  --gold:       #C6A15B;   /* antiqued gold — primary accent */
  --gold-light: #E8D5A3;   /* hover / details */
  --terra:      #7A3B2E;   /* burnt terracotta — Guna Yala echo */
  --ivory:      #F5F1E8;   /* text on dark */
  --ivory-70:   rgba(245, 241, 232, 0.72);
  --ivory-50:   rgba(245, 241, 232, 0.5);
  --line:       rgba(198, 161, 91, 0.22);
  --line-soft:  rgba(198, 161, 91, 0.12);

  /* Type */
  --font-display: "Cormorant Garamond", "Didot", "Playfair Display", serif;
  --font-body:    "Jost", "Futura", "Century Gothic", sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.1875rem;
  --h1: clamp(2.75rem, 3.4vw + 2rem, 5.25rem);
  --h2: clamp(2rem, 2vw + 1.4rem, 3.5rem);
  --h3: clamp(1.375rem, 1vw + 1.1rem, 1.875rem);

  /* Rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --section: clamp(4.5rem, 10vw, 8.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container: 76rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.5s;
  --dur-slow: 0.9s;

  /* Layers */
  --z-header: 100;
  --z-menu: 200;
  --z-cursor: 400;
  --z-preloader: 500;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.01em;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed;
  top: -100%;
  left: var(--space-2);
  z-index: calc(var(--z-preloader) + 1);
  padding: 0.75rem 1.25rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.08em;
  transition: top 0.2s ease;
}
.skip-link:focus { top: var(--space-2); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Typography helpers
   -------------------------------------------------------------------------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* optical centering compensation */
  text-transform: uppercase;
  color: var(--gold);
}

.lede { font-size: var(--text-lg); color: var(--ivory-70); max-width: 34em; }
.muted { color: var(--ivory-70); }
.gold { color: var(--gold); }
em.accent { font-style: italic; color: var(--gold-light); }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 52rem; }

.section { padding-block: var(--section); position: relative; }
.section--flush { padding-block: 0; }

/* Faint mola-step texture on alternating sections */
.section--textured {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23C6A15B' stroke-opacity='0.05'%3E%3Cpath d='M0 48h20v-20h20v-20h20M48 96v-20h20v-20h20v-20'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   5. Mola divider — signature element
   -------------------------------------------------------------------------- */
.mola {
  display: flex;
  justify-content: center;
  padding-block: var(--space-4);
  color: var(--gold);
}
.mola svg { width: min(320px, 70vw); height: auto; }
.mola--tight { padding-block: var(--space-2); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
  border-bottom: 1px solid transparent;
}
.header.is-solid {
  background: rgba(15, 13, 11, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
}
.header.is-hidden { transform: translateY(-100%); }

/* Symmetric grid: language left · brand truly centered · menu right */
.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--container);
  margin-inline: auto;
  padding: 1rem var(--gutter);
}
.header__inner > .lang { justify-self: start; }
.header__inner > .brand { justify-self: center; }
.header__side { justify-self: end; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--gold);
  transition: color 0.3s ease;
}
.brand:hover { color: var(--gold-light); }
.brand svg { width: 44px; height: 44px; flex: none; }
.brand__logo { width: 44px; height: 44px; flex: none; object-fit: contain; }
.brand__word {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--ivory);
}

/* Language toggle — textual, no flags */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
}
.lang a {
  padding: 0.4rem 0.15rem;
  color: var(--ivory-50);
  letter-spacing: inherit;
  transition: color 0.3s ease;
}
.lang a:hover { color: var(--gold-light); }
.lang a[aria-current="true"] { color: var(--gold); }
.lang__sep { color: var(--line); }

.header__side { display: flex; align-items: center; gap: var(--space-3); }

/* Burger */
.burger {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
}
.burger span, .burger::before, .burger::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px;
  height: 1.5px;
  background: var(--ivory);
  transition: transform 0.35s var(--ease-out), opacity 0.25s ease, background 0.3s;
}
.burger::before { top: 16px; }
.burger span    { top: 21.5px; }
.burger::after  { top: 27px; }
.burger:hover span, .burger:hover::before, .burger:hover::after { background: var(--gold-light); }
.burger[aria-expanded="true"]::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span    { opacity: 0; }
.burger[aria-expanded="true"]::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* Mobile menu overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  place-items: center;
  background: rgba(15, 13, 11, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease;
}
.menu__list { text-align: center; display: grid; gap: var(--space-2); }
.menu__link {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3.25rem);
  color: var(--ivory);
  line-height: 1.25;
  transition: color 0.3s ease;
}
.menu__link:hover, .menu__link[aria-current="page"] { color: var(--gold); }
.menu__item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.menu.is-open .menu__item {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.08s + var(--i, 0) * 0.06s);
}
.menu__meta {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   7. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0.9rem 2.2rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  overflow: hidden;
  position: relative;
  /* Without a stacking context of its own, the z-index:-1 fill below is
     painted behind the whole button — including the section background —
     so the gold showed through the dark ground as a muddy brown. Isolating
     keeps the fill inside the button: above its background, under its text. */
  isolation: isolate;
  transition: color 0.35s var(--ease-out), border-color 0.35s;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s var(--ease-out);
  z-index: -1;
}
/* Touch screens keep :hover latched after a tap, which would leave every
   button stuck in its filled state. Only real pointers get the hover fill. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--ink); }
  .btn:hover::before { transform: scaleY(1); }
}
.btn:focus-visible { color: var(--ink); }
.btn:focus-visible::before { transform: scaleY(1); }

.btn--solid { background: var(--gold); color: var(--ink); }
.btn--solid::before { background: var(--gold-light); }
.btn--solid:hover { border-color: var(--gold-light); }

.btn svg { width: 18px; height: 18px; flex: none; }

/* Arrow text link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  padding-block: 0.4rem;
  transition: color 0.3s ease;
}
.link-arrow svg {
  width: 26px; height: 10px;
  transition: transform 0.35s var(--ease-out);
}
.link-arrow:hover { color: var(--gold-light); }
.link-arrow:hover svg { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: -3% 0;      /* slight headroom for parallax drift */
  z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 28% center; /* keep the necklace on the clay vessel in frame */
  transform: scale(1.02);
  transition: transform 2.4s var(--ease-out);
}
body.is-loaded .hero__media img { transform: scale(1); }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(15,13,11,0.55) 0%, rgba(15,13,11,0.28) 40%, rgba(15,13,11,0.78) 100%);
}
.hero__content {
  padding: calc(var(--space-5) + 4rem) var(--gutter) calc(var(--space-5) + 2rem);
  max-width: 56rem;
}
.hero__content .eyebrow { margin-bottom: var(--space-2); }
.hero__title {
  margin-bottom: var(--space-2);
  /* slightly smaller than the global h1 so the whole block fits above the fold */
  font-size: clamp(2.1rem, 2.4vw + 1.5rem, 3.9rem);
}
.hero__sub {
  margin-inline: auto;
  margin-bottom: var(--space-3);
  max-width: 34em;
  color: var(--ivory-70);
  font-size: 1.0625rem;
  font-weight: 300;
}
/* Short screens: compact everything so nothing gets cut */
@media (max-height: 760px) {
  .hero__title { font-size: clamp(1.9rem, 2vw + 1.3rem, 3.1rem); }
  .hero__sub { font-size: 1rem; max-width: 38em; }
  .hero__content { padding-block: calc(var(--space-4) + 4rem) var(--space-5); }
  .hero__scroll { display: none; }
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
/* Desktop: copy sits on the right, clear of the necklace on the left */
@media (min-width: 900px) {
  .hero { place-items: center end; }
  .hero__content {
    text-align: left;
    max-width: 38rem;
    padding-inline: var(--gutter) clamp(2rem, 8vw, 8rem);
  }
  .hero__sub { margin-inline: 0; }
  /* scoped to the hero: buttons elsewhere (.band CTAs) stay centered */
  .hero .hero__actions { justify-content: flex-start; }
  .hero::after {
    background:
      linear-gradient(90deg, rgba(15,13,11,0) 38%, rgba(15,13,11,0.62) 72%),
      linear-gradient(180deg, rgba(15,13,11,0.35) 0%, rgba(15,13,11,0.15) 40%, rgba(15,13,11,0.6) 100%);
  }
}

/* Mobile: the centered copy used to sit on the brightest, busiest part of
   the photo. Anchor it to the bottom instead — over the darkest band of the
   scrim — drop the long subtitle, and stack the buttons full-width. */
@media (max-width: 899px) {
  .hero { place-items: end center; }
  .hero__content {
    width: 100%;
    max-width: 30rem;
    text-align: left;
    padding: 0 var(--gutter) var(--space-5);
  }
  .hero__sub { display: none; }
  .hero__title {
    font-size: clamp(2.2rem, 8.5vw, 3rem);
    margin-bottom: var(--space-3);
  }
  /* Compact buttons: hug their text instead of spanning the screen, so
     more of the necklace photo stays visible behind the copy */
  .hero__actions { gap: 0.6rem; justify-content: flex-start; }
  .hero .hero__actions .btn {
    min-height: 42px;
    padding: 0.55rem 1.2rem;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
  }
  /* keep the necklace visible in the upper half, clear of the text panel */
  .hero__media img { object-position: 28% 30%; }
  /* stronger, taller bottom band so the copy always reads cleanly */
  .hero::after {
    background: linear-gradient(180deg,
      rgba(15, 13, 11, 0.5) 0%,
      rgba(15, 13, 11, 0.08) 32%,
      rgba(15, 13, 11, 0.4) 58%,
      rgba(15, 13, 11, 0.94) 100%);
  }
  /* the copy now owns the bottom edge — the bobbing mouse would collide */
  .hero__scroll { display: none; }
}

.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  translate: -50% 0;
  color: var(--ivory-50);
}
.hero__scroll svg { width: 20px; height: 34px; }
.hero__scroll .wheel { animation: scroll-hint 2.2s ease-in-out infinite; }
@keyframes scroll-hint {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55%      { transform: translateY(9px); opacity: 0; }
}

/* Hero band (interior pages) */
.page-hero {
  position: relative;
  padding: calc(var(--space-6) + 4.5rem) 0 var(--space-5);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.page-hero .eyebrow { margin-bottom: var(--space-2); }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--image::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,13,11,0.72), rgba(15,13,11,0.88));
}

/* --------------------------------------------------------------------------
   9. Category gallery — expandable flex row. Hovering one tile widens it
   (flex 2) while its siblings narrow (flex .5); clicking a tile links to
   the matching section on the collections page. Vanilla port of a
   framer-motion pattern.
   -------------------------------------------------------------------------- */
.xgal {
  display: flex;
  gap: 0.5rem;
  height: clamp(320px, 52vh, 460px);
}
.xgal__item {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: var(--ink-card);
  cursor: pointer;
  padding: 0;
  transition: flex 0.5s ease-in-out;
}
.xgal:hover .xgal__item,
.xgal:focus-within .xgal__item { flex: 0.5; }
.xgal:hover .xgal__item:hover,
.xgal:focus-within .xgal__item:focus-visible { flex: 2; }
.xgal__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* resting scrim, lifted on hover/focus — mirrors the reference animation */
.xgal__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 11, 0.35);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.xgal__item:hover::after,
.xgal__item:focus-visible::after { opacity: 0; }
.xgal__label {
  position: absolute;
  z-index: 1;
  left: 1rem;
  bottom: 0.9rem;
  color: var(--gold-light);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(15, 13, 11, 0.8);
}
@media (max-width: 699px) {
  /* touch screens have no hover — a steady 2x2 grid works better there */
  .xgal { display: grid; grid-template-columns: 1fr 1fr; height: auto; }
  .xgal__item { aspect-ratio: 4 / 5; }
  /* No hover on touch, so the photo can't lighten back up on demand: keep it
     fully visible everywhere except a short gradient behind the label, just
     enough to keep the gold text readable over bright photos. */
  .xgal__item::after {
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(180deg, transparent, rgba(15, 13, 11, 0.88) 100%);
    opacity: 1;
  }
  .xgal__label { text-shadow: 0 1px 4px rgba(15, 13, 11, 0.9); }
}

/* --------------------------------------------------------------------------
   10. Split sections (featured / about excerpts)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
.split__media {
  position: relative;
  overflow: hidden;
}
.split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.split__media:hover img { transform: scale(1.04); }
.split__media::before {
  /* offset gold frame */
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid var(--line);
  pointer-events: none;
  z-index: 1;
}
.split__body .eyebrow { margin-bottom: var(--space-2); }
.split__body h2 { margin-bottom: var(--space-3); }
.split__body p { margin-bottom: var(--space-3); color: var(--ivory-70); max-width: 34em; }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .split--flip .split__media { order: 2; }
  .split--flip .split__body { order: 1; }
}

/* --------------------------------------------------------------------------
   10b. "Why us" — three reasons the jewelry is different
   -------------------------------------------------------------------------- */
.why__head { text-align: center; margin-bottom: var(--space-5); }
.why__head .eyebrow { margin-bottom: var(--space-2); }
.why__head .lede { max-width: 46em; margin: var(--space-3) auto 0; }
.why__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  max-width: var(--container);
  margin-inline: auto;
}
.why__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  margin-bottom: var(--space-3);
}
.why__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.why__item:hover .why__media img { transform: scale(1.045); }
.why__num {
  display: block;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.why__item h3 {
  text-align: center;
  font-size: var(--h3);
  margin-bottom: 0.6rem;
}
.why__item p {
  text-align: center;
  color: var(--ivory-70);
  max-width: 24em;
  margin-inline: auto;
}
@media (min-width: 700px) {
  .why__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
}

/* --------------------------------------------------------------------------
   11. Heritage band (full-bleed image + overlay)
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  padding-block: var(--space-6);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 35%; }
.band::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(15,13,11,0.85), rgba(15,13,11,0.62));
}
.band .eyebrow { margin-bottom: var(--space-2); }
.band h2 { max-width: 20em; margin-inline: auto; margin-bottom: var(--space-3); }
.band p { max-width: 36em; margin-inline: auto; margin-bottom: var(--space-4); color: var(--ivory-70); }

/* No-photo variant — flat warm ground + faint mola texture instead of the
   dark-overlay-on-image treatment, for CTAs that don't need a background shot. */
.band--plain {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(198,161,91,0.08), transparent 60%),
    var(--ink-soft);
}
.band--plain::after { content: none; }

/* --------------------------------------------------------------------------
   12. Editorial strip (horizontal scroll)
   -------------------------------------------------------------------------- */
.strip {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: var(--gutter);
  padding-bottom: var(--space-2);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.strip::-webkit-scrollbar { height: 4px; }
.strip::-webkit-scrollbar-thumb { background: var(--line); }
.strip__item {
  /* matches the 4:5 source crops (strip-*), so the tiles show the whole
     frame rather than a cropped slice of it */
  flex: 0 0 min(78vw, 480px);
  scroll-snap-align: center;
  overflow: hidden;
}
.strip__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.strip__item:hover img { transform: scale(1.04); }
/* --------------------------------------------------------------------------
   13. Collections page
   -------------------------------------------------------------------------- */
/* Material specs band at the top of the collections page. Each icon sits in
   a mola rhombus — the same diamond as the civilizations trail markers — so
   the row reads as part of the site's vocabulary rather than a spec sheet. */
/* A slim info bar under the category nav, not a full section — tight
   padding and a hairline rule keep it feeling like one deliberate detail
   instead of an empty, oversized block. */
.specs-band {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.specs__intro { margin-bottom: 0.4rem; }
.specs-line {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
}
@media (min-width: 640px) {
  .specs-line { font-size: var(--text-xs); letter-spacing: 0.22em; }
}

/* Bounds the sticky nav below to the category content — it releases once
   this wrapper ends, instead of staying pinned through the final CTA. */
.coll-categories { position: relative; }

.coll-nav {
  position: sticky;
  top: 72px;
  z-index: 50;
  background: rgba(15, 13, 11, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block: 1px solid var(--line-soft);
  transition: transform 0.4s ease;
}
/* Slides away together with the header (see main.js) instead of staying
   pinned on its own and cutting across the gallery underneath it.
   Shifts up by its sticky offset (72px) plus its own height, so it fully
   clears the viewport regardless of how tall it renders. */
.coll-nav.is-hidden { transform: translateY(calc(-72px - 100%)); }
.coll-nav ul {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding: 0.9rem var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
  scrollbar-width: none;
}
.coll-nav ul::-webkit-scrollbar { display: none; }
.coll-nav a {
  white-space: nowrap;
  font-size: var(--text-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ivory-50);
  padding-block: 0.35rem;
  transition: color 0.3s;
}
.coll-nav a:hover, .coll-nav a.is-active { color: var(--gold); }

.coll-section { scroll-margin-top: 140px; }

/* True masonry: CSS columns let each photo keep its own natural proportions
   and pack tight underneath its neighbour — no fixed row height, so no
   leftover dark gaps the way a same-height grid produced with mixed spans. */
.gallery {
  columns: 1;
  column-gap: var(--space-2);
}
.gallery figure {
  position: relative;
  overflow: hidden;
  background: var(--ink-card);
  border-radius: 10px;
  break-inside: avoid;
  margin-bottom: var(--space-2);
}
.gallery img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.45s var(--ease-out);
}
/* Press-in feel on hover, matching the expanded view it opens into: the photo
   eases back inside its frame instead of pushing past it. */
.gallery figure:hover img,
.gallery figure:focus-visible img { transform: scale(0.98); }
.gallery figure:active img { transform: scale(0.95); }
.gallery figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 11, 0.16);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.gallery figure:hover::after,
.gallery figure:focus-visible::after { opacity: 1; }
/* the tile the zoom is currently flying to/from stays invisible under it */
.gallery figure.is-zooming img { opacity: 0; }
.gallery figcaption {
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  padding: 1.1rem var(--space-3);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  color: var(--ivory);
  background: linear-gradient(0deg, rgba(15,13,11,0.85), transparent);
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.45s ease, translate 0.45s var(--ease-out);
}
.gallery figure:hover figcaption { opacity: 1; translate: 0 0; }

/* Country-of-origin tag — small and always visible, so the piece's origin
   reads at a glance even though the page is organised by product type. */
.gallery__origin {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(15, 13, 11, 0.55);
  border: 1px solid var(--line-soft);
  padding: 0.3rem 0.6rem;
  pointer-events: none;
}

/* Le colonne si fermano a 3: a 4 ogni foto scendeva sotto i 270px e il
   dettaglio dei pezzi — incisioni, filigrana — non si leggeva più. Sugli
   schermi larghi la griglia si allarga oltre il contenitore standard,
   così le foto guadagnano spazio invece di moltiplicare le colonne. */
@media (min-width: 640px)  { .gallery { columns: 2; } }
@media (min-width: 1024px) { .gallery { columns: 3; } }

@media (min-width: 1360px) {
  .coll-section .container { max-width: 96rem; }
}

/* --------------------------------------------------------------------------
   13b. The Journey — scroll-driven 3D trip (civilizations page)
   -------------------------------------------------------------------------- */
.journey { position: relative; height: 460svh; }
.journey__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Seamless hand-off: the page hero shares the stage's warm glow, so the
   journey ambience starts with no visible seam */
body[data-page="civilizations"] .page-hero {
  background: radial-gradient(42rem 42rem at 30% 100%, rgba(198, 161, 91, 0.12), transparent 65%);
}

/* Small bobbing arrow under "Scroll down to begin" */
.page-hero__arrow {
  margin-top: var(--space-3);
  display: flex;
  justify-content: center;
  color: var(--gold);
}
.page-hero__arrow svg {
  width: 22px;
  height: 22px;
  animation: arrow-bob 2.2s ease-in-out infinite;
}
@keyframes arrow-bob {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  55%      { transform: translateY(7px); opacity: 0.35; }
}

/* Travelling warm glow */
.journey__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(42rem 42rem at 30% calc(var(--gp, 0) * 100%),
              rgba(198, 161, 91, 0.12), transparent 65%);
  pointer-events: none;
}

/* Ancient parchment map (real image) behind the whole scene: Costa Rica at
   the top, Colombia at the bottom, drifting south with the trail.
   Outer layer fades top/bottom, inner layer fades left/right. */
.journey__chart {
  position: absolute;
  top: 0;
  /* Shifted slightly left of the gold trail map, now that both are
     confined to the stage's left third */
  left: clamp(1.5rem, 7vw, 9rem);
  width: clamp(380px, 42vw, 640px);
  aspect-ratio: 1000 / 1403; /* matches civ-chart.jpg — no distortion */
  opacity: 0.16;
  will-change: transform;
  /* long, soft fades so the parchment melts into the charcoal background */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
.journey__chart-img {
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/civ-chart.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
@media (max-width: 999px) {
  .journey__chart {
    left: 50%;
    translate: -50% 0;
    width: min(150vw, 640px);
    opacity: 0.1;
  }
}
html.no-js .journey__chart, .journey--static .journey__chart { display: none; }

/* Trail map — confined to the left third, so the text/photo column on
   the right can take up roughly two-thirds of the stage. */
.journey__map {
  position: absolute;
  left: clamp(5rem, 12vw, 15rem);
  top: 0;
  height: 175svh;
  width: auto;
  color: var(--gold);
  will-change: transform;
  transform: translateZ(-80px) rotateX(4deg);
}
.journey__trail-base { stroke: var(--line); stroke-width: 1.5; }
.journey__trail { stroke: var(--gold); stroke-width: 2; }
.journey__compass {
  fill: var(--ivory-50);
  font-family: var(--font-body);
  font-size: 22px;
  letter-spacing: 0.2em;
}
.journey__stop .stop-diamond,
.journey__stop .stop-ring { stroke: var(--gold); fill: rgba(15, 13, 11, 0.85); }
.journey__stop .stop-ring {
  fill: none;
  stroke: var(--line);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.journey__stop.is-active .stop-ring { opacity: 1; }

/* Chapters */
.journey__chapters { position: absolute; inset: 0; transform-style: preserve-3d; }
.journey__chapter {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(34rem, 88vw);
  translate: -50% -50%;
  text-align: center;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}
.journey__chapter .eyebrow { margin-bottom: var(--space-2); }
.journey__chapter h2 { margin-bottom: var(--space-2); }
.journey__chapter p:not(.eyebrow) {
  color: var(--ivory-70);
  margin-bottom: var(--space-2);
  font-size: 1.15rem;
  line-height: 1.55;
}
/* Piece photo under the chapter's text, set as a mola rhombus — the same
   diamond that marks the stops on the gold trail and the "values" icons.
   The frame owns the size and draws the gold contour; the photo is clipped
   into the diamond inside it. The photos are pre-cropped square and centred
   on the pendant, so the jewel falls in the rhombus' wide middle band.
   Kept bounded so the card never outgrows the pinned stage (100svh, hidden). */
.journey__chapter-frame {
  position: relative;
  display: block;
  width: clamp(240px, 34vw, 370px);
  aspect-ratio: 1;
  margin-inline: auto;
}
.journey__chapter-frame::after {
  content: "";
  position: absolute;
  /* 14.64% puts the rotated square's corners exactly on the box edges, so the
     hairline traces the photo's diamond instead of floating outside it */
  inset: 14.64%;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  pointer-events: none;
}
.journey__chapter-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* Tied to viewport HEIGHT (not width) below 720px tall — a wide-but-short
   window is exactly the case that risks the card outgrowing the stage. */
@media (max-height: 720px) {
  .journey__chapter-frame { width: clamp(160px, 26vh, 210px); }
}
@media (max-height: 520px) {
  .journey__chapter-frame { width: clamp(96px, 19vh, 130px); }
  /* The square rhombus is taller than the old 4:3 crop, so on very short
     windows the longest chapter needs the copy tightened to stay inside. */
  .journey__chapter p:not(.eyebrow) { font-size: 0.82rem; line-height: 1.35; }
  .journey__chapter h2 { margin-bottom: var(--space-1); }
}
@media (min-width: 1000px) {
  .journey__chapter {
    left: auto;
    /* Leaves clearance on the right for the progress rail's country
       labels, and on the left for the map, which now sits in the first
       third of the stage. */
    right: clamp(6rem, 15vw, 15rem);
    width: min(66rem, 48vw);
    translate: 0 -50%;
    text-align: center;
  }
}
/* Key words (civilizations, symbols) highlighted in warm gold */
.journey__chapter strong {
  font-weight: 500;
  color: var(--gold-light);
}
.cta-final strong,
.band strong {
  font-weight: 500;
  color: var(--gold-light);
}
@media (max-width: 999px) {
  .journey__map { opacity: 0.3; left: 50%; margin-left: -200px; }
}
@media (max-height: 720px) {
  .journey__chapter p:not(.eyebrow) { font-size: 1rem; line-height: 1.48; margin-bottom: var(--space-1); }
}

/* Country totems — real gold artifact photos beside the map.
   `screen` blending drops their dark background onto the page; the radial
   mask feathers the edges. */
.journey__totems { position: absolute; inset: 0; pointer-events: none; }
.journey__totem {
  position: absolute;
  top: 50%;
  left: clamp(3rem, 9vw, 12rem);
  translate: 0 -50%;
  width: clamp(165px, 18.5vw, 250px);
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 0 24px rgba(198, 161, 91, 0.25));
  will-change: transform, opacity;
}
@media (max-width: 999px) {
  /* On mobile the chapter text is centered on top of this same spot —
     the floating totem behind it just fights the text for attention. */
  .journey__totem { display: none; }
}
html.no-js .journey__totems, .journey--static .journey__totems { display: none; }

/* Progress rail */
.journey__rail {
  position: absolute;
  right: clamp(0.9rem, 2vw, 2rem);
  top: 50%;
  translate: 0 -50%;
  display: grid;
  gap: var(--space-4);
}
.journey__rail li { display: flex; align-items: center; gap: 0.6rem; justify-content: flex-end; }
.rail-label {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory-50);
  opacity: 0;
  translate: 6px 0;
  transition: opacity 0.4s ease, translate 0.4s var(--ease-out), color 0.4s ease;
  display: none;
}
.rail-dot {
  width: 9px; height: 9px;
  border: 1px solid var(--gold);
  rotate: 45deg;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.journey__rail li.is-active .rail-dot { background: var(--gold); box-shadow: 0 0 12px rgba(198, 161, 91, 0.7); }
.journey__rail li.is-active .rail-label { opacity: 1; translate: 0 0; color: var(--gold-light); }
@media (min-width: 1000px) {
  .rail-label { display: inline; order: -1; }
}

/* Scroll hint */
.journey__hint {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ivory-50);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: opacity 0.6s ease;
}
.journey__hint svg { width: 16px; height: 27px; }
.journey__hint .wheel { animation: scroll-hint 2.2s ease-in-out infinite; }

/* Static fallback — reduced motion or no JS: chapters stack normally */
html.no-js .journey, .journey--static.journey { height: auto; }
html.no-js .journey__stage, .journey--static .journey__stage {
  position: static; height: auto; overflow: visible; perspective: none;
}
html.no-js .journey__chapters, .journey--static .journey__chapters { position: static; }
html.no-js .journey__chapter, .journey--static .journey__chapter {
  position: static;
  translate: 0 0;
  opacity: 1;
  margin: var(--space-6) auto;
  text-align: center;
  pointer-events: auto;
}
html.no-js .journey__map, .journey--static .journey__map,
html.no-js .journey__rail, .journey--static .journey__rail,
html.no-js .journey__hint, .journey--static .journey__hint,
html.no-js .journey__glow, .journey--static .journey__glow { display: none; }

/* --------------------------------------------------------------------------
   13c. Lightbox — collections zoom with the symbol's meaning
   -------------------------------------------------------------------------- */
.gallery figure { cursor: zoom-in; }
.gallery figure:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
.lightbox[hidden] { display: none; } /* the class display must not defeat [hidden] */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  cursor: zoom-out;
}
/* The frosted ground is its own layer so the photo can stay fully opaque
   while the backdrop fades — during the open flight and while dragging. */
.lightbox::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 11, 0.92);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.lightbox.is-visible::before { opacity: var(--lb-fade, 1); }
.lightbox.is-dragging::before { transition: none; }
.lightbox__inner {
  position: relative;
  z-index: 1;
  max-width: min(62rem, 100%);
  margin: 0;
  text-align: center;
}
.lightbox__img {
  max-width: 100%;
  max-height: min(70svh, 860px);
  width: auto;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  display: block;
  transform-origin: center center;
  will-change: transform;
  touch-action: none;
}
.lightbox__caption {
  padding-top: var(--space-3);
  max-width: 44em;
  margin-inline: auto;
  opacity: 0;
  transition: opacity 0.3s ease 0.12s;
}
.lightbox.is-visible .lightbox__caption { opacity: var(--lb-fade, 1); }
.lightbox.is-dragging .lightbox__caption { transition: none; }
.lightbox__title { margin-bottom: 0.55rem; }
.lightbox__desc { color: var(--ivory-70); font-size: var(--text-sm); line-height: 1.6; }
.lightbox__close {
  position: absolute;
  z-index: 2;
  top: max(1.1rem, env(safe-area-inset-top));
  right: max(1.1rem, env(safe-area-inset-right));
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease 0.12s, color 0.3s ease, border-color 0.3s ease;
}
.lightbox.is-visible .lightbox__close { opacity: var(--lb-fade, 1); }
.lightbox.is-dragging .lightbox__close { transition: none; }
.lightbox__close:hover { color: var(--gold-light); border-color: var(--gold); }
.lightbox__hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  translate: -50% 0;
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory-50);
  opacity: 0;
  transition: opacity 0.3s ease 0.25s;
  pointer-events: none;
}
.lightbox.is-visible .lightbox__hint { opacity: var(--lb-fade, 1); }
.lightbox.is-dragging .lightbox__hint { opacity: 0; transition: none; }

/* --------------------------------------------------------------------------
   14. About page details
   -------------------------------------------------------------------------- */
.values {
  display: grid;
  gap: var(--space-4);
  text-align: center;
}
.value .value__mark {
  width: 44px; height: 44px;
  margin-inline: auto;
  margin-bottom: var(--space-2);
  color: var(--gold);
}
.value h3 { margin-bottom: var(--space-1); font-size: 1.35rem; }
.value p { color: var(--ivory-70); max-width: 26em; margin-inline: auto; }
@media (min-width: 900px) { .values { grid-template-columns: repeat(3, 1fr); } }

blockquote.pull {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw + 1rem, 2.4rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--gold-light);
  max-width: 26em;
  margin-inline: auto;
  text-align: center;
}
blockquote.pull footer {
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivory-50);
}

/* --------------------------------------------------------------------------
   15. Contact page
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: 5fr 6fr; gap: var(--space-6); }
}

.contact-item {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line-soft);
}
.contact-item svg { width: 22px; height: 22px; flex: none; color: var(--gold); margin-top: 0.2rem; }
.contact-item h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivory-50);
  margin-bottom: 0.35rem;
}
.contact-item a { color: var(--ivory); transition: color 0.3s; }
.contact-item a:hover { color: var(--gold-light); }
.contact-item p { color: var(--ivory-70); }

/* Form */
.form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: 0.5rem; }
.field label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ivory-50);
}
.field input, .field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 0.1rem;
  min-height: 48px;
  color: var(--ivory);
  transition: border-color 0.3s ease;
  border-radius: 0;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(245,241,232,0.35); }
.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.form__note { font-size: var(--text-sm); color: var(--ivory-50); }

/* Shop photos on the contact page */
.contact-photos { margin-top: var(--space-5); text-align: center; }
.contact-photos .eyebrow { margin-bottom: var(--space-3); }
.contact-photos__grid {
  display: grid;
  gap: var(--space-2);
  text-align: left;
}
.contact-photos__grid figure { margin: 0; overflow: hidden; }
.contact-photos__grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.contact-photos__grid figure:hover img { transform: scale(1.04); }
@media (min-width: 700px) {
  .contact-photos__grid { grid-template-columns: 1fr 1fr; }
}

/* Map facade — loads Google iframe only on demand */
.map {
  position: relative;
  margin-top: var(--space-5);
  aspect-ratio: 16 / 8;
  min-height: 320px;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(198,161,91,0.08), transparent 55%),
    var(--ink-card);
  border: 1px solid var(--line-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.4) contrast(1.05); }
.map__cta { text-align: center; display: grid; gap: var(--space-2); justify-items: center; padding: var(--space-3); }
.map__cta p { color: var(--ivory-50); font-size: var(--text-sm); max-width: 30em; }

/* Below 640px the fixed 320px min-height fought the 16:8 ratio and forced
   an oddly tall, near-square box. A shorter mobile-friendly ratio with no
   min-height override keeps the map correctly proportioned on phones. */
@media (max-width: 640px) {
  .map { aspect-ratio: 4 / 3; min-height: 0; margin-top: var(--space-4); }
}

/* --------------------------------------------------------------------------
   16. CTA final + footer
   -------------------------------------------------------------------------- */
.cta-final { text-align: center; }
.cta-final h2 { max-width: 18em; margin-inline: auto; margin-bottom: var(--space-2); }
.cta-final p { max-width: 32em; margin-inline: auto; margin-bottom: var(--space-4); color: var(--ivory-70); }
.cta-final .hero__actions { justify-content: center; }

.footer {
  border-top: 1px solid var(--line-soft);
  background: var(--ink-soft);
  padding: var(--space-5) 0 var(--space-3);
  font-size: var(--text-sm);
}
.footer__grid {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.footer__brand { display: grid; gap: var(--space-2); justify-items: start; }
.footer__brand p { color: var(--ivory-50); max-width: 24em; }
.footer h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.footer ul { display: grid; gap: 0.6rem; }
.footer a { color: var(--ivory-70); transition: color 0.3s; }
.footer a:hover { color: var(--gold-light); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  color: var(--ivory-50);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}
.footer__ai-note { flex-basis: 100%; opacity: 0.65; }
@media (min-width: 800px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   17. WhatsApp floating button
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: max(1.1rem, env(safe-area-inset-right));
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: var(--z-header);
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.3s var(--ease-out), background 0.3s;
}
.wa-float:hover { background: var(--gold-light); transform: translateY(-3px); }
.wa-float svg { width: 26px; height: 26px; }
.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--gold);
  animation: wa-pulse 3s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: 0.8; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   18. Preloader
   -------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__logo {
  width: 108px;
  height: 108px;
  opacity: 0;
  transform: scale(0.9);
  animation: fade-word 0.8s var(--ease-out) 0.2s forwards;
}
@keyframes fade-word { to { opacity: 1; transform: scale(1); } }
html.no-js .preloader { display: none; }

/* --------------------------------------------------------------------------
   19. Custom cursor (fine pointers only)
   -------------------------------------------------------------------------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  border-radius: 50%;
  translate: -50% -50%;
  opacity: 0;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--gold-light);
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid var(--gold);
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out),
              border-color 0.3s, background-color 0.3s;
}
body.cursor-on .cursor-dot, body.cursor-on .cursor-ring { opacity: 1; }
body.cursor-hover .cursor-ring {
  width: 64px; height: 64px;
  border-color: var(--gold-light);
  background: rgba(198, 161, 91, 0.08);
}
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* --------------------------------------------------------------------------
   19b. Blog — indice e articolo
   Griglia sobria di schede sull'indice; sull'articolo una colonna stretta,
   perché oltre i ~70 caratteri per riga la lettura si fa faticosa.
   -------------------------------------------------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5) var(--space-3);
}
@media (min-width: 720px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card { display: flex; flex-direction: column; }
.post-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: var(--ink-card);
  margin-bottom: var(--space-3);
}
.post-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__meta {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.post-card__meta time { color: var(--ivory-50); letter-spacing: inherit; }
/* h3 = stessa scheda, usata in fondo all'articolo fra i correlati: lì il
   titolo della sezione è già un h2, quindi la gerarchia scende di un livello
   senza che l'aspetto cambi. */
.post-card h2,
.post-card h3 {
  font-size: var(--text-lg);
  line-height: 1.25;
  margin-bottom: 0.6rem;
}
/* parola chiave in oro dentro il titolo, sia sulle schede che sull'articolo */
.hl { color: var(--gold); }
.post-card:hover h2 a .hl,
.post-card:hover h3 a .hl { color: var(--gold-light); }

.post-card h2 a,
.post-card h3 a { color: var(--ivory); transition: color 0.3s ease; }
.post-card:hover h2 a,
.post-card:hover h3 a { color: var(--gold-light); }
.post-card p { color: var(--ivory-70); font-size: var(--text-sm); line-height: 1.65; }

/* --- correlati, in fondo all'articolo ------------------------------------ */
.article__related {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
}
.article__related-h {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: var(--space-4);
}
.related-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .related-grid { grid-template-columns: 1fr 1fr; }
}
/* Le copertine dei correlati sono secondarie: più basse di quelle
   dell'indice, così non competono con l'articolo appena letto. */
.related-grid .post-card__media { aspect-ratio: 3 / 2; }
.related-grid .post-card h3 { font-size: var(--text-base); }

/* --- articolo ------------------------------------------------------------ */
.article { max-width: 58rem; margin-inline: auto; }
.article__head { text-align: center; margin-bottom: var(--space-5); }
.article__meta {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.article__meta time { color: var(--ivory-50); letter-spacing: inherit; }
.article__cover {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  margin-bottom: var(--space-5);
}
.article__cover img { width: 100%; height: auto; display: block; }

/* La colonna di lettura cresce con lo schermo invece di restare fissa: su
   desktop il testo era largo 576px in una pagina da 1440 e sembrava perso,
   su telefono resta comodo perché ci pensa il gutter del container. */
.article__body {
  max-width: 42rem;
  margin-inline: auto;
  font-size: clamp(1rem, 0.25vw + 0.95rem, 1.15rem);
}
.article__body p {
  color: var(--ivory-70);
  line-height: 1.8;
  margin-bottom: var(--space-3);
}
.article__body h2 {
  font-size: var(--h3);
  color: var(--ivory);
  margin: var(--space-5) 0 var(--space-2);
}
.article__body strong { color: var(--ivory); font-weight: 500; }
.article__body em { color: var(--gold-light); font-style: italic; }
.article__body blockquote {
  border-left: 2px solid var(--gold);
  padding-left: var(--space-3);
  margin: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--ivory);
}
.article__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color 0.3s ease;
}
.article__back:hover { color: var(--gold-light); }

/* --- capolettera: apre l'articolo come una pagina stampata --------------- */
.article__body > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.2rem;
  line-height: 0.82;
  padding: 0.3rem 0.7rem 0 0;
  color: var(--gold);
}
/* sulle pagine legali no: un capolettera su una privacy policy stona */
.article__body--legal > p:first-of-type::first-letter {
  float: none; font-family: inherit; font-size: inherit;
  line-height: inherit; padding: 0; color: inherit;
}
.article__body--legal { max-width: 40rem; }
.article__body--legal h2 { font-size: var(--text-lg); margin-top: var(--space-4); }

/* collegamenti dentro il testo */
.article__body a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line);
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.article__body a:hover { color: var(--gold-light); text-decoration-color: var(--gold); }

/* --- immagini dentro l'articolo ----------------------------------------- */
.a-fig { margin: var(--space-5) 0; }
.a-fig img {
  width: 100%; height: auto; display: block;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
}
.a-fig figcaption {
  margin-top: 0.75rem;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--ivory-50);
  text-align: center;
}
/* esce dalla colonna di lettura per dare respiro */
.a-fig--wide { width: min(58rem, 92vw); margin-inline: calc(50% - min(29rem, 46vw)); }
/* due immagini affiancate, per confrontare due varianti dello stesso simbolo */
.a-fig--duo { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .a-fig--duo { grid-template-columns: 1fr 1fr; } }
.a-fig--duo figcaption { grid-column: 1 / -1; }

/* --- citazione in evidenza ---------------------------------------------- */
.a-quote {
  margin: var(--space-5) 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1vw + 1.1rem, 1.75rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--ivory);
}

/* --- separatore mola tra i capitoli dell'articolo ----------------------- */
.a-div { display: flex; justify-content: center; padding-block: var(--space-4); color: var(--gold); }
.a-div svg { width: min(220px, 60vw); height: auto; opacity: 0.75; }

/* --- rimando al pezzo reale, in fondo all'articolo ---------------------- */
.a-piece {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-5);
  padding: var(--space-3);
  background: var(--ink-card);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  transition: border-color 0.3s ease;
}
.a-piece:hover { border-color: var(--line); }
.a-piece img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: block; }
.a-piece__label {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}
.a-piece__name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ivory); line-height: 1.25; }
.a-piece__go { margin-top: 0.4rem; font-size: var(--text-sm); color: var(--ivory-50); }
.a-piece:hover .a-piece__go { color: var(--gold-light); }

/* --------------------------------------------------------------------------
   20. Reveal animations
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }

/* Parallax targets get transform from JS (translate3d) */
[data-parallax] { will-change: transform; }

/* --------------------------------------------------------------------------
   21. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__media img { transform: none; }
  .cursor-dot, .cursor-ring { display: none; }
}