/* LAKRAZ × PANTALLERO — Venezuela Relief Drop / 001
 * Time-limited campaign skin. Loads on every page alongside relief.js.
 *
 * Kill switch: every relief surface is hidden by default. relief.js adds
 * `html.relief-on` only when DROP_LIVE is true AND now < DROP_END. If the
 * drop is off, expired, or JS fails, nothing relief-related renders and the
 * site sits in its normal state — no layout breakage.
 *
 * Monochrome only — black surface, bone/white ink, hairlines. The bar and the
 * homepage hero bits use literal brand values (the homepage doesn't load the
 * design-system tokens); the /shop pin and /relief page use the design tokens.
 */

/* ─── Reveal model ─────────────────────────────────────────── */
/* Hidden until relief.js confirms the drop is live. */
.relief-only { display: none !important; }
html.relief-on .relief-only { display: revert !important; }
/* Elements that should disappear while the drop is live (e.g. "Buy Now"). */
html.relief-on .relief-hide { display: none !important; }

:root { --relief-bar-h: 0px; }

/* ─── Announcement bar ─────────────────────────────────────── */
/* Fixed above everything; relief.js measures its height into --relief-bar-h
   and the offset rules below push the page/nav clear of it. */
.relief-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60; /* above .lk-nav (20) and the homepage corner chrome (5) */
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  color: #ece9e2;
  font-family: 'FG', 'Inter', 'Franklin Gothic Medium', 'Franklin Gothic', Arial, sans-serif;
}
.relief-bar__inner {
  max-width: 1320px;
  margin: 0 auto;
  min-height: 40px;
  padding: 9px 52px 9px 20px; /* right pad clears the close button */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.relief-bar__msg {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
  color: #ece9e2;
}
.relief-bar__cta {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  white-space: nowrap;
  transition: opacity .25s ease;
}
.relief-bar__cta:hover,
.relief-bar__cta:focus-visible { opacity: .6; }
.relief-bar__close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: #ece9e2;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
  transition: opacity .25s ease;
}
.relief-bar__close:hover,
.relief-bar__close:focus-visible { opacity: 1; }
.relief-bar :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ─── Bar offsets ──────────────────────────────────────────── */
/* Shared-system pages: shift the fixed nav + sticky filter + body down. */
html.relief-bar-shown.relief-layout-nav body { padding-top: var(--relief-bar-h); }
html.relief-bar-shown.relief-layout-nav .lk-nav { top: var(--relief-bar-h); }
html.relief-bar-shown.relief-layout-nav .shop-filter { top: var(--relief-bar-h); }

/* Homepage takeover: no nav bar, so just drop the corner logo + menu below. */
html.relief-bar-shown.relief-layout-hero .site-logo,
html.relief-bar-shown.relief-layout-hero .site-menu {
  top: calc(var(--relief-bar-h) + clamp(14px, 2.4vh, 24px));
}

@media (max-width: 560px) {
  .relief-bar__msg { font-size: 9px; letter-spacing: .16em; }
}

/* ─── Homepage hero relief (over the PANTALLERO video) ─────── */
/* These reuse the homepage's inline aesthetic (Bebas/Inter, bone ink). */
.relief-eyebrow {
  font-family: 'Inter', 'FG', Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #ece9e2;
  margin-bottom: clamp(14px, 2.5vh, 26px);
  text-decoration: none;
  opacity: .9;
  transition: opacity .25s ease;
}
a.relief-eyebrow:hover,
a.relief-eyebrow:focus-visible { opacity: .6; outline: none; }

/* Dominant filled CTA used on the homepage hero (matches that page's .btn box). */
.btn--support {
  background: #ece9e2;
  color: #060606 !important;
  border-color: #ece9e2 !important;
  font-weight: 400;
}
.btn--support:hover,
.btn--support:focus-visible {
  background: transparent;
  color: #ece9e2 !important;
  border-color: #ece9e2 !important;
}

.relief-subline {
  margin-top: clamp(18px, 3vh, 30px);
  max-width: 46ch;
  font-family: 'Inter', 'FG', Arial, sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: .02em;
  color: rgba(236, 233, 226, .82);
}

/* ─── /shop pinned relief card ─────────────────────────────── */
.relief-pin {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 40px 0;
}
.relief-pin__card {
  display: grid;
  grid-template-columns: 240px 1fr;
  border: 1px solid var(--rule-hi);
  background: var(--bg-elev);
  text-decoration: none;
  color: #fff;
  transition: border-color .3s ease, background .3s ease;
}
.relief-pin__card:hover { border-color: #fff; background: var(--bg-charcoal); }
.relief-pin__card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.relief-pin__media {
  aspect-ratio: 1 / 1;
  background: var(--bg-charcoal);
  overflow: hidden;
}
.relief-pin__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .5s ease, transform .7s ease;
  display: block;
}
.relief-pin__card:hover .relief-pin__media img { filter: grayscale(0); transform: scale(1.03); }
.relief-pin__body {
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.relief-pin__tagrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.relief-pin__tag {
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--off);
}
.relief-pin__badge {
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #000;
  background: #fff;
  padding: 4px 9px;
}
.relief-pin__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.relief-pin__desc { margin: 0; font-size: 12px; line-height: 1.6; color: var(--off); max-width: 52ch; }
.relief-pin__row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.relief-pin__price { font-size: 18px; font-weight: 700; letter-spacing: .04em; }
.relief-pin__cta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.relief-pin__links { margin-top: 10px; }
.relief-pin__links a {
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--off);
  border-bottom: 1px solid var(--rule-hi);
  padding-bottom: 1px;
}
.relief-pin__links a:hover { color: #fff; }

@media (max-width: 640px) {
  .relief-pin { padding: 28px 20px 0; }
  .relief-pin__card { grid-template-columns: 1fr; }
  .relief-pin__media { aspect-ratio: 16 / 10; }
}

/* ─── /relief landing page ─────────────────────────────────── */
.relief-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 150px 40px 40px;
}
.relief-page__head { display: flex; flex-direction: column; gap: 16px; }
.relief-page__kicker {
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--off);
}
.relief-page__head hr {
  border: 0;
  border-top: 1px solid var(--rule-hi);
  margin: 6px 0;
}
.relief-page__sub {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Language toggle */
.relief-lang {
  display: inline-flex;
  gap: 4px;
  margin: 28px 0 0;
}
.relief-lang button {
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--off);
  background: transparent;
  border: 1px solid var(--rule-hi);
  padding: 8px 14px;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}
.relief-lang button:hover { color: #fff; border-color: #fff; }
.relief-lang button[aria-pressed="true"] { color: #000; background: #fff; border-color: #fff; }
.relief-lang button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Statement */
.relief-statement { margin: 64px 0; }
.relief-statement h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(48px, 11vw, 150px);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
}
.relief-statement .sub {
  display: block;
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--off);
}

/* Spec sheet */
.relief-spec { border-top: 1px solid var(--rule-hi); margin: 40px 0; }
.relief-spec__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.relief-spec__label {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 2px;
}
.relief-spec__value {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--fg-soft);
  line-height: 1.6;
}
.relief-spec__value a {
  color: #fff;
  border-bottom: 1px solid var(--rule-hi);
  padding-bottom: 1px;
}
.relief-spec__value a:hover { border-color: #fff; }

/* Why */
.relief-why { margin: 56px 0; max-width: 60ch; }
.relief-why .label {
  display: block;
  margin-bottom: 16px;
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--dim);
}
.relief-why p {
  margin: 0;
  font-size: var(--text-lead);
  line-height: 1.75;
  color: var(--fg-soft);
}

/* CTA + transparency */
.relief-cta-row { margin: 48px 0 16px; }
.relief-transparency {
  margin: 24px 0 0;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--dim);
  line-height: 1.7;
}
.relief-transparency a { color: #fff; border-bottom: 1px solid var(--rule-hi); }

/* EN/ES paragraph swap on the landing page */
[data-relief-es] { display: none; }
html.relief-lang-es [data-relief-es] { display: revert; }
html.relief-lang-es [data-relief-en] { display: none; }

/* Ended state */
#relief-ended { display: none; }
html.relief-off #relief-ended { display: block; }
html.relief-off #relief-live { display: none; }

@media (max-width: 720px) {
  .relief-page { padding: 120px 20px 40px; }
  .relief-spec__row { grid-template-columns: 1fr; gap: 6px; }
}