/* ============================================================
   VITTORIA FORNARI — Layout Globale  (mobile-first)
   layout.css
   Navbar (2 varianti), Drawer mobile, Footer
   ============================================================ */

/* ════════════════════════════════════════
   SITE HEADER (sticky: lang-bar + navbar + barretta tema)
   Mobile/tablet: top negativo = la barra lingua scorre via
   e resta incollata solo la navbar (comportamento storico).
   Desktop (≥1024px): tutto l'header resta fisso; allo scroll
   il JS aggiunge body.nav-compact e l'header si compatta.
════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: calc(-1 * var(--langbar-h));
  z-index: 200;
  /* l'ombra vive qui (non sulla navbar): il fondo dell'header su
     desktop è la barra temi / barretta tradizione */
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
}
@media (min-width: 1024px) {
  .site-header { top: 0; }
}

/* ════════════════════════════════════════
   BARRA LINGUA (Riga1)
════════════════════════════════════════ */
.lang-bar {
  background: var(--color-text-dark);
  height: var(--langbar-h);
  padding: 0 var(--space-sm);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm);
  /* àncora del brand centrato in absolute */
  position: relative;
}

/* Brand contratto: invisibile a riposo, appare in nav-compact (desktop).
   In absolute e SEMPRE centrato: fuori dal flusso, il cambio di layout
   della riga non lo sposta mai — uscendo dal compact svaniva ancora
   visibile mentre il flex lo rimandava a sinistra (flash segnalato da
   Davide il 31/07). visibility lo toglie anche dal giro di Tab. */
.lang-bar__brand {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: 13px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  /* le variabili --fly-* sono il canale del "volo" FLIP scritto da
     main.js: il brand parte dalla posizione/scala del logo grande
     (Riga2) e plana al centro della riga nera. A riposo valgono 0/0/1
     e l'espressione si riduce al puro centraggio. */
  transform: translate(calc(-50% + var(--fly-x, 0px)),
                       calc(-50% + var(--fly-y, 0px)))
             scale(var(--fly-s, 1));
  transform-origin: center;
  transition: opacity .25s ease,
              transform .25s ease,
              visibility 0s linear .25s;
}
/* stato di volo: visibile subito e sopra la navbar (il tragitto
   attraversa la riga bianca); la transition la governa il JS inline */
.lang-bar__brand.is-flying {
  visibility: visible;
  opacity: 1;
  z-index: 300;
}
.lang-bar__brand:hover { color: var(--color-gold); }

.lang-bar__langs {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
}
.lang-bar__label {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-right: 4px;
  /* nascosta su mobile piccolo */
  display: none;
}
@media (min-width: 480px) {
  .lang-bar__label { display: inline; }
}
/* 14/09/2026, go-live: le voci lingua (IT/EN/FR/ES) sono nascoste finché
   non esistono le traduzioni (previste entro dicembre 2026). Il markup
   resta in tutte le pagine e nel drawer; la riga scura resta perché ha
   altezza fissa (--langbar-h) e ospita il brand contratto allo scroll.
   Per riaccenderle: togliere queste due regole. */
.lang-bar__langs { display: none !important; }
.drawer__lang    { display: none !important; }
.lang-bar__link {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  padding: 2px 5px;
  transition: color var(--transition-fast);
}
.lang-bar__link:hover,
.lang-bar__link.active { color: var(--color-gold); }


/* ════════════════════════════════════════
   NAVBAR BASE (comune a entrambe le varianti)
════════════════════════════════════════ */
.navbar {
  background: var(--color-white);
  border-bottom: var(--border);
  /* sticky e ombra ora vivono sul .site-header;
     relative = àncora della barra temi centrata in nav-compact */
  position: relative;
}

/* ── MOBILE: barra unica logo + hamburger ── */
.navbar__mobile-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-sm);  /* padding verticale esplicito */
  min-height: var(--navbar-height);
}

/* Logo */
.navbar__logo {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* preparato al collasso in nav-compact (desktop) */
  overflow: hidden;
  max-height: 60px;
  transition: max-height var(--transition-base),
              opacity var(--transition-fast);
}
.navbar__logo-name {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: clamp(14px, 3vw, 18px);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--color-text-dark);
  line-height: 1;
}
.navbar__logo-sub {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: 8px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-top: 3px;
}

/* Hamburger button */
.navbar__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  padding: 4px;
  cursor: pointer;
  background: none;
  border: none;
  flex-shrink: 0;
}
.navbar__hamburger span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--color-text-dark);
  transition: all var(--transition-base);
  transform-origin: center;
}
/* Hamburger → X quando aperto */
.navbar__hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.navbar__hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar__hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── DESKTOP: nasconde hamburger, mostra nav ── */
.navbar__desktop {
  display: none; /* nascosto su mobile */
}

@media (min-width: 1024px) {
  .navbar__hamburger { display: none; }

  .navbar__mobile-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: var(--space-md) var(--space-lg);  /* padding verticale anche su desktop */
  }

  /* Logo centrato su desktop */
  .navbar__logo {
    align-items: center;
    text-align: center;
    grid-column: 2;
  }
  .navbar__logo-name { font-size: 17px; letter-spacing: .3em; }

  .navbar__desktop { display: flex; }

  /* Voci sinistra */
  .navbar__links-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    grid-column: 1;
  }
  /* Voci destra */
  .navbar__links-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    justify-content: flex-end;
    grid-column: 3;
  }

  .navbar__link {
    font-family: var(--font-sans);
    font-weight: var(--fw-thin);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-text-mid);
    transition: color var(--transition-fast);
    position: relative;
    padding-bottom: 2px;
  }
  .navbar__link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 1px;
    background: var(--color-gold);
    transition: width var(--transition-base);
  }
  .navbar__link:hover,
  .navbar__link.active { color: var(--color-text-dark); }
  .navbar__link:hover::after,
  .navbar__link.active::after { width: 100%; }

  .navbar__sep {
    width: 1px; height: 10px;
    background: var(--color-greige);
    opacity: .6;
  }

  .navbar__cta {
    font-family: var(--font-sans);
    font-weight: var(--fw-light);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
    padding: 7px 18px;
    border-radius: var(--radius);
    transition: all var(--transition-base);
    margin-left: 8px;
  }
  .navbar__cta:hover {
    background: var(--color-gold);
    color: var(--color-white);
  }
}


/* ════════════════════════════════════════
   NAV COMPACT (solo desktop ≥1024px)
   Classe body.nav-compact aggiunta da main.js allo scroll.
   Riga1: resta la sola lingua attiva + sale il brand contratto.
   Riga2: il logo grande collassa → menu e barra temi risalgono.
════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* la riga menu si prepara ad animare il proprio compattamento */
  .navbar__mobile-bar {
    transition: padding var(--transition-base),
                min-height var(--transition-base);
  }

  /* Riga1: niente selettore lingua in compact — la scelta è già fatta,
     per cambiarla si torna a inizio pagina. Resta solo il brand, centrato. */
  .nav-compact .lang-bar__langs { display: none; }

  /* brand contratto: entra in Riga1 (già centrato dall'absolute;
     il movimento lo fa il volo FLIP, qui solo lo stato finale) */
  .nav-compact .lang-bar__brand {
    visibility: visible;
    opacity: 1;
    transition: opacity .25s ease, transform .25s ease, visibility 0s;
  }

  /* Riga2+Riga4 → un'unica riga a griglia: menu | tradizioni | contatti.
     display:contents sulla mobile-bar promuove le sue colonne a figli
     diretti della griglia del .navbar, dove entra anche la barra temi:
     essendo tutto in flusso, la griglia garantisce che le tre zone non
     si sovrappongano mai (a differenza del centraggio assoluto).
     Specificità .nav-compact.nav-subbar per vincere sulle regole della
     Variante B definite più sotto nel file. */
  .nav-compact .navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: var(--space-md);
    align-items: center;
    padding: 12px var(--space-lg);
  }
  .nav-compact .navbar__mobile-bar { display: contents; }
  .nav-compact .navbar__logo { display: none; }
  .nav-compact .navbar__links-left  { grid-row: 1; grid-column: 1; }
  .nav-compact .navbar__links-right { grid-row: 1; grid-column: 3; }

  .nav-compact.nav-subbar .themes-bar {
    grid-row: 1;
    grid-column: 2;
    background: transparent;
    border-bottom: none;
    /* piccolo ritardo (backwards = invisibile durante l'attesa): entra
       quando il collasso dell'altezza è quasi assestato */
    animation: themes-rise .4s ease .15s backwards;
  }
  /* voci più asciutte: niente righelli verticali, padding ridotto */
  .nav-compact.nav-subbar .themes-bar__item,
  .nav-compact.nav-subbar .themes-bar__item:first-child {
    border-color: transparent;
    padding: 6px 10px;
  }
}

@keyframes themes-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Durante la transizione di altezza (classe .nav-anim messa dal JS per
   ~340ms) gli elementi che ricompaiono nello stato esteso rientrano in
   dissolvenza invece di scattare. Scoped a .nav-anim: niente animazioni
   al caricamento pagina. */
@media (min-width: 1024px) {
  /* il logo aspetta che il brand in volo stia arrivando (crossfade) */
  .nav-anim:not(.nav-compact) .navbar__logo   { animation: nav-fade-in .35s ease .3s backwards; }
  .nav-anim:not(.nav-compact) .themes-bar     { animation: nav-fade-in .45s ease; }
  .nav-anim:not(.nav-compact) .lang-bar__langs { animation: nav-fade-in .4s ease; }
}
@keyframes nav-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-compact.nav-subbar .themes-bar { animation: none; }
  .nav-anim:not(.nav-compact) .navbar__logo,
  .nav-anim:not(.nav-compact) .themes-bar,
  .nav-anim:not(.nav-compact) .lang-bar__langs { animation: none; }
}

/* ════════════════════════════════════════
   BARRA DI PROGRESSO LETTURA — color tradizione (oro dove non c'è)
   Elemento autonomo subito DOPO il .site-header: sticky per conto suo,
   così sulle pagine col breadcrumb (articolo) il breadcrumb può
   bloccarsi tra header e barra. Appare allo scroll (nav-compact) su
   tutte le pagine e si riempie da sinistra (--scroll-p da main.js);
   il colore arriva da --tema-color (body.tema--X), fallback oro.
   Le pagine col breadcrumb spingono la barra più in basso via --bc-h.
════════════════════════════════════════ */
.nav-tema-bar {
  height: 0;
  /* binario neutro sotto il riempimento colorato */
  background: var(--color-cream);
  opacity: 0;
  position: sticky;
  /* --header-live-h: altezza reale dell'header scritta da main.js frame
     per frame — la barra segue l'header anche a metà animazione.
     Mobile/tablet: l'header incollato mostra solo la navbar (la riga
     lingua scorre via di --langbar-h), quindi l'aggancio scala di
     altrettanto; da 1024px l'header resta intero (override sotto). */
  top: calc(var(--header-live-h, var(--header-compact-h))
       - var(--langbar-h) + var(--bc-h, 0px));
  z-index: 140;
  overflow: hidden;
  transition: height var(--transition-base), opacity var(--transition-base);
}
@media (min-width: 1024px) {
  .nav-tema-bar {
    top: calc(var(--header-live-h, var(--header-compact-h)) + var(--bc-h, 0px));
  }
}
.nav-tema-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tema-color, var(--color-gold));
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll-p, 0));
}
/* appare allo scroll a TUTTE le larghezze (mobile compreso, 31/07) */
.nav-compact .nav-tema-bar {
  height: 4px;
  opacity: 1;
}


/* ════════════════════════════════════════
   VARIANTE A — DROPDOWN "Tradizioni"
   Classe aggiunta su <body>: .nav-dropdown
════════════════════════════════════════ */

/* Voce con dropdown */
.nav-dropdown .dropdown {
  position: relative;
}
.nav-dropdown .dropdown__toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.nav-dropdown .dropdown__arrow {
  font-size: 8px;
  transition: transform var(--transition-base);
  color: var(--color-text-light);
}
.nav-dropdown .dropdown:hover .dropdown__arrow,
.nav-dropdown .dropdown.is-open .dropdown__arrow {
  transform: rotate(180deg);
}

/* Pannello dropdown */
.nav-dropdown .dropdown__panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  border: var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
  padding: var(--space-sm);
  min-width: 200px;
  z-index: 300;
}
.nav-dropdown .dropdown:hover .dropdown__panel,
.nav-dropdown .dropdown.is-open .dropdown__panel {
  display: block;
  animation: dropFade .2s ease;
}
@keyframes dropFade {
  from { opacity:0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0); }
}

.nav-dropdown .dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 9px 12px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-mid);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-dropdown .dropdown__item:hover { background: var(--color-greige-lt); }

.nav-dropdown .dropdown__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-yoga   { background: var(--color-yoga); }
.dot-tao    { background: var(--color-tao); }
.dot-tibet  { background: var(--color-tibet); }
.dot-cabala { background: var(--color-cabala); }
.dot-celtica { background: var(--color-celtica); }
.dot-olis   { background: var(--color-olis); }


/* ════════════════════════════════════════
   VARIANTE B — BARRA SECONDARIA Tradizioni
   Classe aggiunta su <body>: .nav-subbar
════════════════════════════════════════ */
.nav-subbar .themes-bar {
  background: var(--color-cream);
  border-bottom: var(--border);
  display: none; /* nascosta su mobile */
}
@media (min-width: 1024px) {
  .nav-subbar .themes-bar {
    display: flex;
    justify-content: center;
    gap: 0;
  }
}

.themes-bar__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 24px;
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-mid);
  border-right: 1px solid var(--color-greige-lt);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.themes-bar__item:first-child { border-left: 1px solid var(--color-greige-lt); }
.themes-bar__item:hover { background: var(--color-greige-lt); }

/* Target touch ≥44px (Regola §6): la barra compare solo dai 1024px,
   ma su iPad landscape è comunque touch — si allarga solo lì
   (pointer coarse), il desktop col mouse resta a 36px */
@media (pointer: coarse) {
  .themes-bar__item { min-height: 44px; }
}

.themes-bar__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ════════════════════════════════════════
   TOGGLE VARIANTE (pannello fisso — demo only)
════════════════════════════════════════ */
.nav-toggle-panel {
  position: fixed;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  z-index: 500;
  background: var(--color-white);
  border: var(--border);
  box-shadow: var(--shadow-md);
  border-radius: 4px;
  padding: 14px 16px;
  min-width: 180px;
}
.nav-toggle-panel__label {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: 10px;
}
.nav-toggle-btn {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-base);
  text-transform: uppercase;
  color: var(--color-text-mid);
  border: 1px solid var(--color-greige-lt);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 6px;
  text-align: left;
}
.nav-toggle-btn:hover { background: var(--color-greige-lt); }
.nav-toggle-btn.active {
  background: var(--color-gold);
  color: var(--color-white);
  border-color: var(--color-gold);
}
.nav-toggle-panel__hint {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: 8px;
  color: var(--color-text-light);
  letter-spacing: var(--ls-base);
  margin-top: 8px;
  display: block;
  line-height: 1.5;
}


/* ════════════════════════════════════════
   DRAWER MOBILE (comune a entrambe varianti)
════════════════════════════════════════ */

/* Overlay scuro */
.drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 290;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.drawer-overlay.is-open {
  display: block;
  opacity: 1;
}

/* Pannello laterale */
.drawer {
  position: fixed;
  top: 0; right: 0;
  width: var(--drawer-width);
  height: 100vh;
  background: var(--color-white);
  z-index: 300;
  transform: translateX(100%);
  transition: transform var(--transition-base);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.drawer.is-open {
  transform: translateX(0);
}

/* Header drawer */
.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--space-sm);
  border-bottom: var(--border);
  flex-shrink: 0;
}
.drawer__logo {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-dark);
}
.drawer__close {
  font-size: 20px;
  color: var(--color-text-light);
  line-height: 1;
  padding: 4px;
  transition: color var(--transition-fast);
}
.drawer__close:hover { color: var(--color-text-dark); }

/* Corpo drawer */
.drawer__body {
  flex: 1;
  padding: var(--space-sm) 0;
  overflow-y: auto;
}

/* Link principali */
.drawer__link {
  display: block;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-base);
  color: var(--color-text-dark);
  padding: 13px var(--space-sm);
  border-bottom: 1px solid var(--color-greige-lt);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.drawer__link:hover { background: var(--color-cream); }
.drawer__link.active { color: var(--color-gold); }

/* Sezione tradizioni nel drawer */
.drawer__section-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  padding: var(--space-sm) var(--space-sm) var(--space-xs);
  display: block;
}

.drawer__theme-link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-base);
  color: var(--color-text-mid);
  padding: 11px var(--space-sm);
  border-bottom: 1px solid var(--color-greige-lt);
  transition: background var(--transition-fast);
}
.drawer__theme-link:hover { background: var(--color-cream); }

.drawer__theme-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Footer drawer */
.drawer__footer {
  padding: var(--space-sm);
  border-top: var(--border);
  flex-shrink: 0;
}
.drawer__cta {
  display: block;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-khaki);
  padding: 14px;
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
  transition: background var(--transition-fast);
}
.drawer__cta:hover { background: var(--color-text-dark); }

.drawer__lang {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  padding-top: var(--space-xs);
}
.drawer__lang-link {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-light);
  padding: 3px 6px;
  transition: color var(--transition-fast);
}
.drawer__lang-link.active,
.drawer__lang-link:hover { color: var(--color-gold); }


/* ════════════════════════════════════════
   FOOTER  (mobile-first)
════════════════════════════════════════ */
.footer { background: var(--color-text-dark); }

/* Mobile: colonne impilate */
.footer__main {
  padding: var(--space-xl) var(--space-sm);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 640px) {
  .footer__main {
    grid-template-columns: 1fr 1fr;
    padding: var(--space-xl) var(--space-md);
    gap: var(--space-lg);
  }
}
@media (min-width: 1024px) {
  .footer__main {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    padding: var(--space-2xl) var(--space-lg);
    gap: var(--space-2xl);
    max-width: var(--max-width);
    margin: 0 auto;
  }
}

.footer__brand-name {
  font-family: var(--font-serif);
  font-weight: var(--fw-light);
  font-size: var(--fs-lg);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-white);
  display: block;
  margin-bottom: 4px;
}
.footer__brand-script {
  font-family: var(--font-script);
  font-size: 22px;
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-sm);
  letter-spacing: 0;
}
.footer__tagline {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.8;
}
.footer__col-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-sm);
}
.footer__link {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,.4);
  display: block;
  margin-bottom: var(--space-xs);
  transition: color var(--transition-fast);
}
.footer__link:hover { color: var(--color-white); }
.footer__link--yoga:hover   { color: var(--color-yoga); }
.footer__link--tao:hover    { color: var(--color-tao); }
.footer__link--tibet:hover  { color: var(--color-tibet); }
.footer__link--cabala:hover { color: var(--color-cabala); }
.footer__link--celtica:hover { color: var(--color-celtica); }
.footer__link--olis:hover   { color: var(--color-olis); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 16px var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
  text-align: center;
}
@media (min-width: 640px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 16px var(--space-lg);
    max-width: var(--max-width);
    margin: 0 auto;
  }
}
.footer__copy {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.2);
  letter-spacing: var(--ls-base);
}
.footer__policy-links { display:flex; gap:var(--space-md); }
.footer__policy-link {
  font-family: var(--font-sans);
  font-weight: var(--fw-thin);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.2);
  letter-spacing: var(--ls-base);
  transition: color var(--transition-fast);
}
.footer__policy-link:hover { color: rgba(255,255,255,.5); }