/* ============================================================
   SANDRA — Components: type, CTA, scroll-cue, labels
   ============================================================ */

/* ---- Shared type baseline ---- */
.cast__title, .group__title, .contact__title, .moment__line {
  font-family: var(--serif); font-weight: 400; line-height: 1.02;
  /* Galerie vivante: tighter tracking, near-white */
  letter-spacing: -.02em; text-wrap: balance;
  color: var(--c-text);
}

/* ---- Kicker (chapter labels) ---- */
.kicker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 22px;
}

/* ---- HERO text ---- */
.hero__eyebrow {
  font-family: var(--mono); font-size: 18px;
  letter-spacing: .34em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-text) 60%, transparent); margin: 0 0 clamp(22px, 4vh, 34px);
}
.hero__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.7rem, 7.4vw, 6.1rem);
  line-height: 1.0; letter-spacing: -.02em;
  margin: 0; color: var(--c-text);
  text-shadow: 0 2px 40px rgba(20, 17, 16, .7);
}
/* Galerie vivante: amber warmth on the subtitle, non-italic catalogue style */
.hero__sub {
  margin: 0; font-size: clamp(1.55rem, 2.6vw, 2.7rem);
  font-family: var(--serif); font-style: normal;
  color: var(--c-accent);
  letter-spacing: .01em;
  text-shadow: 0 2px 30px rgba(20, 17, 16, .8);
}

/* ---- GROUP text ---- */
.group__title {
  font-size: clamp(2.4rem, 6vw, 5rem);
  margin: 0 0 24px;
}
.lede {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  line-height: 1.35; color: var(--c-text);
  margin: 0; max-width: 30ch;
}

/* ---- CHARACTER text ---- */
.char-num {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 22px;
}
.char-line {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.9rem);
  line-height: 1.12; letter-spacing: -.02em;
  color: var(--c-text); margin: 0 0 22px;
}
/* Galerie vivante: italic second line in accent, smaller, catalogue register */
.char-line em {
  color: var(--c-accent);
  font-style: italic; display: block;
  margin-top: .3em; font-size: .62em;
}
.char-note {
  font-size: .92rem; /* galerie: slightly smaller */
  color: color-mix(in srgb, var(--c-text) 60%, transparent); margin: 0; max-width: 30ch;
}

/* ---- CONTEMPLATE text ---- */
.cast__title { font-size: clamp(2.2rem, 5vw, 4.2rem); }
.moment__line {
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  line-height: 1.1; margin: 0 0 20px;
}
/* Galerie vivante: accent glow subtitle */
.moment__sub {
  font-family: var(--serif); font-style: normal;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  color: var(--c-accent);
  margin: 0; max-width: 26ch;
}

/* ---- CONTACT text ---- */
.contact__title {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  margin: 0 0 18px;
}
/* Galerie vivante: "Un par un" in accent */
.contact__title em { color: var(--c-accent); }
/* Galerie vivante: accent lede, non-italic */
.contact__lede {
  font-family: var(--serif); font-style: normal;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  color: var(--c-accent);
  margin: 0 0 44px;
}
.contact__k {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-ink-faint);
}
.contact__v { font-size: .98rem; color: var(--c-text); }
a.contact__v {
  border-bottom: 1px solid var(--c-rule); padding-bottom: 2px;
  transition: border-color .3s;
}
a.contact__v:hover { border-color: var(--c-accent); }

/* ---- Footer dot ---- */
.foot__dot { color: var(--c-accent); }

/* ---- Scroll cue ---- */
.scroll-cue {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  opacity: 0;
}
.scroll-cue__word {
  font-family: var(--mono); font-size: 21px;
  letter-spacing: .28em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c-text) 60%, transparent);
}
/* Galerie vivante: accent warmth on the descending line */
.scroll-cue__line {
  width: 1px; height: 54px;
  background: linear-gradient(to bottom, var(--c-accent), transparent);
  animation: cue 2.4s var(--ease) infinite;
  transform-origin: top;
}

/* ---- CTA — galerie vivante: outlined red, fills on hover ---- */
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
  box-shadow: none;
  font-family: var(--sans); font-weight: 500; font-size: 1.02rem;
  letter-spacing: .02em;
  padding: 18px 38px; border-radius: 999px;
  position: relative; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              background .35s var(--ease), color .35s var(--ease);
}
.cta::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, .2), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.cta:hover {
  background: var(--red);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -16px rgba(194, 59, 34, .55), 0 0 40px -8px rgba(194, 59, 34, .4);
}
.cta:hover::after { opacity: 1; }

/* ── Loader ── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.loader__panel {
  position: absolute;
  width: 100%;
  height: 50%;
}

.loader__panel--top { top: 0; }
.loader__panel--bottom { bottom: 0; }

.loader__text {
  position: relative;
  z-index: 10000;
  font-family: var(--serif);
  font-size: clamp(3rem, 12vw, 10rem);
  color: var(--c-bg);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  font-style: italic;
}

/* ---- Theme picker ---- */
.theme-picker {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0;
  margin: 0;
}

.theme-picker__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  border: 2px solid transparent;
  outline: none;
  transition: transform 0.2s;
}

.theme-picker__dot:hover { transform: scale(1.2); }

.theme-picker__dot[data-theme-set="four"]       { background: #d4a853; border-color: #d4a853; }
.theme-picker__dot[data-theme-set="basalte"]    { background: #7eb8a8; border-color: #7eb8a8; }
.theme-picker__dot[data-theme-set="raku"]       { background: #a83240; border-color: #a83240; }
.theme-picker__dot[data-theme-set="gres"]       { background: #c0653a; border-color: #c0653a; }
.theme-picker__dot[data-theme-set="porcelaine"] { background: #3b5ea6; border-color: #3b5ea6; }
.theme-picker__dot[data-theme-set="engobe"]     { background: #8b2942; border-color: #8b2942; }

/* Active state: white ring */
html[data-theme="four"]       .theme-picker__dot[data-theme-set="four"],
html[data-theme="basalte"]    .theme-picker__dot[data-theme-set="basalte"],
html[data-theme="raku"]       .theme-picker__dot[data-theme-set="raku"],
html[data-theme="gres"]       .theme-picker__dot[data-theme-set="gres"],
html[data-theme="porcelaine"] .theme-picker__dot[data-theme-set="porcelaine"],
html[data-theme="engobe"]     .theme-picker__dot[data-theme-set="engobe"] {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---- Character image hover scale (desktop) ---- */
@media (min-width: 861px) {
  .char-media img {
    transition: scale 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .char-media:hover img {
    scale: 1.03;
  }
}