/* ============================================================
   Rituale — the Humidor sub-page
   ============================================================
   Loads on top of /assets/site.css. The ground, the fonts, the
   grain and the card geometry all stay exactly as the Palazzo
   sets them; this file only adds what the brand page needs.

   Rituale's own brand doc asks for a charcoal/terracotta system.
   We deliberately keep the house midnight + gold instead, and
   express Rituale through a single ember accent token — the same
   way Torn and Yoink are expressed. Per-series accents:

     Regioni   terracotta      (geography, earth)
     del Tempo house gold      (the doc's "soft gold", literally ours)
     Elementi  ember red / ash (the loudest of the three)
   ============================================================ */

:root {
  --ember: var(--rituale-accent);       /* #c2653c */
  --ember-light: #e0894f;
  --ash: #8a8378;

  --regioni: #b06152;
  --tempo: var(--gold);
  --elementi: #b8503a;
}

/* ============ HERO ============
   No photograph — the ground, an ember, and smoke, built in CSS.
   Keeps the page weightless and matches the brand's "atmospheric
   rather than literal" direction. */
.rituale-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 82svh;
  padding: 7rem 2rem 5rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 50% 78%, rgba(194,101,60,0.26) 0%, rgba(194,101,60,0.07) 45%, transparent 72%),
    radial-gradient(ellipse 90% 70% at 50% 100%, #1d1410 0%, transparent 65%),
    linear-gradient(180deg, var(--midnight) 0%, #12111a 55%, #0b0d14 100%);
}

/* Smoke drifting up through the headline */
.rituale-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("/assets/smoke.svg") center bottom / cover no-repeat;
  opacity: 0.85;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* The ember itself, resting at the foot of the page */
.rituale-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3.5rem;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe0b4 0%, #f08a3e 35%, #c2653c 65%, transparent 100%);
  box-shadow: 0 0 24px 10px rgba(194,101,60,0.35), 0 0 60px 26px rgba(194,101,60,0.14);
  animation: emberBreathe 5.5s ease-in-out infinite;
}

@keyframes emberBreathe {
  0%, 100% { opacity: 0.72; transform: scale(0.94); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

.rituale-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.rituale-wordmark {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(3rem, 11vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.06em;
  color: var(--cream);
  text-shadow: 0 4px 40px rgba(0,0,0,0.7), 0 0 90px rgba(194,101,60,0.22);
  margin-bottom: 1.4rem;
  animation: fadeUp 1.1s 0.3s ease both;
}

.rituale-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  color: var(--gold-light);
  letter-spacing: 0.02em;
  margin-bottom: 2rem;
  animation: fadeUp 1.1s 0.55s ease both;
}

.rituale-hero .hero-divider {
  margin: 0 auto 2rem;
  background: linear-gradient(to right, transparent, var(--ember), transparent);
  width: 120px;
  animation: fadeUp 1.1s 0.7s ease both;
}

.rituale-intro {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.75;
  color: var(--muted);
  animation: fadeUp 1.1s 0.85s ease both;
}

/* ============ SECTION NAV ============ */
.rituale-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1.9rem;
  padding: 1rem 1.5rem;
  background: rgba(11, 13, 20, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.rituale-nav a {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s ease;
}
.rituale-nav a:hover { color: var(--gold); }

.rituale-nav .nav-home {
  color: var(--ember);
  opacity: 0.85;
}
.rituale-nav .nav-home:hover { color: var(--ember-light); opacity: 1; }

/* ============ MANIFESTO ============ */
.manifesto {
  max-width: 720px;
}

.manifesto p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.85;
  color: rgba(240, 232, 213, 0.78);
  margin-bottom: 1.5rem;
}

.manifesto .lede {
  font-style: italic;
  color: var(--cream);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.7;
}

.manifesto .close {
  color: var(--gold-light);
  font-style: italic;
}

.manifesto-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-strong), transparent);
  margin: 3rem 0;
}

/* ============ THE PRACTICE ============ */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

.principle {
  position: relative;
  background: linear-gradient(180deg, var(--panel-warm) 0%, var(--panel) 100%);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.9rem 1.75rem;
}

.principle::before {
  content: '';
  position: absolute;
  top: 0; left: 1.75rem;
  width: 34px;
  height: 2px;
  background: var(--ember);
  opacity: 0.7;
}

.principle h3 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--cream);
  margin-bottom: 0.8rem;
}

.principle p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--muted);
}

/* ============ SERIES ============ */
/* Every anchor target clears the sticky nav */
.section[id] {
  scroll-margin-top: 4.5rem;
}

.series-regioni  { --series: var(--regioni); }
.series-tempo    { --series: var(--tempo); }
.series-elementi { --series: var(--elementi); }

.series .section-eyebrow { color: var(--series); opacity: 0.8; }

.series-concept {
  max-width: 620px;
  margin: 1.6rem auto 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ---- Blend list (shared by all three series) ---- */
.blends {
  list-style: none;
  position: relative;
}

.blend {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto;
  gap: 0 1.5rem;
  align-items: start;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(240, 232, 213, 0.07);
  transition: background-color 0.3s ease;
}
.blend:last-child { border-bottom: none; }

.blend:hover { background: rgba(240, 232, 213, 0.022); }

.blend-index {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--series);
  opacity: 0.65;
  padding-top: 0.35rem;
  text-align: right;
}

.blend-name {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--cream);
  line-height: 1.35;
  margin-bottom: 0.35rem;
}

.blend-name .place {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--series);
  opacity: 0.9;
  letter-spacing: 0;
}

.blend-flavor {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--muted);
}

.blend-moment {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 0.5rem;
}

.blend-meta {
  text-align: right;
  padding-top: 0.2rem;
  min-width: 8.5rem;
}

.blend-vitola {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 232, 213, 0.65);
  margin-bottom: 0.55rem;
}

.strength {
  display: flex;
  gap: 3px;
  justify-content: flex-end;
  margin-bottom: 0.4rem;
}

.strength i {
  display: block;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: rgba(240, 232, 213, 0.13);
}
.strength i.on { background: var(--series); }

.strength-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* "Core" tag on the recommended launch sets */
.blend-core {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--series);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.15rem 0.45rem;
  margin-left: 0.65rem;
  vertical-align: 0.18em;
  opacity: 0.75;
}

/* ---- Regioni: the north-to-south rail ---- */
.blends-rail { padding-left: 1.5rem; }

.blends-rail::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    rgba(196, 214, 226, 0.55) 0%,
    rgba(176, 186, 176, 0.5) 22%,
    rgba(186, 160, 116, 0.55) 48%,
    rgba(176, 97, 82, 0.75) 74%,
    #8f3222 100%
  );
}

.blends-rail .blend { position: relative; }

.blends-rail .blend::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 2rem;
  width: 7px;
  height: 7px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--midnight);
  border: 1.5px solid var(--series);
  opacity: 0.8;
}

/* Compass labels bracketing the descent */
.rail-marker {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--faint);
  padding-left: 1.5rem;
}
.rail-marker.north { margin-bottom: 0.5rem; }
.rail-marker.south { margin-top: 1.2rem; }

/* ---- del Tempo: dawn-to-night rail ---- */
.blends-tempo::before {
  background: linear-gradient(
    to bottom,
    rgba(232, 204, 130, 0.75) 0%,
    rgba(201, 168, 76, 0.6) 30%,
    rgba(120, 104, 92, 0.5) 58%,
    rgba(46, 54, 82, 0.7) 82%,
    #141828 100%
  );
}

/* ---- Elementi: the loudest of the three ---- */
.series-elementi .blend {
  border-bottom-color: rgba(184, 80, 58, 0.14);
}
.series-elementi .blend:hover {
  background: rgba(184, 80, 58, 0.045);
}
.series-elementi .blend-name {
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1rem;
}

/* ============ CLOSING NOTE ============ */
.closing {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

.closing p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.7;
  color: var(--gold-light);
}

/* ============ FOOTER ADDITIONS ============ */
.footer-back {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.7;
  text-decoration: none;
  margin-bottom: 2rem;
  transition: opacity 0.25s ease, letter-spacing 0.25s ease;
}
.footer-back:hover { opacity: 1; letter-spacing: 0.34em; }

.footer-legal {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.66rem;
  line-height: 1.7;
  color: var(--faint);
  letter-spacing: 0.06em;
  max-width: 480px;
  margin: 1.4rem auto 0;
}

.footer-age {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  color: var(--ash);
  border: 1px solid rgba(138, 131, 120, 0.4);
  border-radius: 2px;
  padding: 0.28rem 0.6rem;
  margin-bottom: 1rem;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .practice-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .blend {
    grid-template-columns: 2.5rem 1fr;
    gap: 0 1rem;
  }
  .blend-meta {
    grid-column: 2;
    text-align: left;
    padding-top: 0.85rem;
    min-width: 0;
  }
  .strength { justify-content: flex-start; }
  .blend-vitola { margin-bottom: 0.45rem; }
  .rituale-nav { gap: 0.35rem 1.1rem; padding: 0.8rem 1rem; }
  .rituale-nav a { font-size: 0.55rem; letter-spacing: 0.2em; }
}

@media (max-width: 600px) {
  .rituale-hero { min-height: 72svh; padding: 5rem 1.5rem 4rem; }
  .principle { padding: 1.5rem 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rituale-hero::after { animation: none; opacity: 0.9; transform: none; }
}