@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;800&display=swap');

/* ThinPins HTML logo — replaces /images/no-bg.png (1572×568).
   Everything is in em, so the whole logo scales from one font-size.
   26px base → 64px tall box (matches the old h-16 image);
   21.125px → 52px tall box (matches the old max-[460px]:h-13). */

.tp-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  height: 2.4615em;   /* 64px */
  width: 6.8125em;    /* 177px, same aspect as the PNG */
  font-family: 'Montserrat', Helvetica, sans-serif;
  transition: all 0.3s;
}

/* 48px tall variant (mobile menu, old h-12 image); beats the 460px media query */
.tp-logo.tp-logo--sm { font-size: 19.5px; }

@media (max-width: 460px) {
  .tp-logo { font-size: 21.125px; } /* 52px tall */
}

.tp-logo__mark {
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  /* scrolled / cream header: one soft shadow, no sub-pixel hairlines (they alias at this size) */
  filter:
    drop-shadow(0 1px 1px rgba(255,251,242,0.6));
  background-image:
    repeating-linear-gradient(0deg, rgba(90,58,18,0.14) 0, rgba(90,58,18,0) 0.07em, rgba(255,248,222,0.2) 0.14em, rgba(255,248,222,0) 0.21em, rgba(90,58,18,0.10) 0.28em, rgba(90,58,18,0) 0.35em),
    linear-gradient(90deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 70%, rgba(60,38,10,0.20) 100%),
    linear-gradient(10deg, #845c24 0%, #b08a48 26%, #97703a 52%, #bb9a5a 74%, #7d5720 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tp-logo__mark span { font-size: 0.965em; }

.tp-logo__tag {
  display: flex;
  align-items: center;
  gap: 0.27em;        /* 7px */
  margin-top: 0.27em; /* 7px */
}

.tp-logo__line {
  display: block;
  width: 0.385em;     /* 10px */
  height: 1px;
  background: linear-gradient(90deg, rgba(111,77,29,0) 0%, rgba(111,77,29,0.6) 100%);
}

.tp-logo__line:last-child { transform: scaleX(-1); }

.tp-logo__text {
  font-size: 0.31em;  /* 8px */
  font-weight: 500;
  letter-spacing: 0.17em;
  line-height: 1;
  color: #6f4d1d;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

.tp-logo__mark, .tp-logo__text, .tp-logo__line { transition: color 0.4s, filter 0.4s, font-size 0.3s, opacity 0.4s; }

/* ---------------------------------------------------------------
   Over the hero video (header not scrolled → no .tp-logo--plain):
   light champagne logo + a soft dark shade across the top edge.
   Scrolled / mobile menu (.tp-logo--plain) keeps the dark-gold look above.
   --------------------------------------------------------------- */

.tp-logo:not(.tp-logo--plain) .tp-logo__mark,
.tp-logo__mark.tp-logo__mark--light {
  filter:
    drop-shadow(0 0.04em 0.04em rgba(0,0,0,0.45))
    drop-shadow(0 0.1em 0.45em rgba(0,0,0,0.35));
  background-image:
    repeating-linear-gradient(0deg, rgba(120,84,36,0.16) 0, rgba(120,84,36,0) 0.036em, rgba(255,250,232,0.30) 0.089em, rgba(255,250,232,0) 0.143em, rgba(120,84,36,0.12) 0.196em, rgba(120,84,36,0) 0.25em),
    linear-gradient(90deg, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(90,60,20,0.18) 100%),
    linear-gradient(10deg, #c9a468 0%, #ecd5a2 28%, #d4b077 52%, #f2e2b9 74%, #c29a5e 100%);
}

.tp-logo:not(.tp-logo--plain) .tp-logo__text {
  font-size: 0.31em;  /* 8px */
  font-weight: 500;
  letter-spacing: 0.17em;
  color: rgba(244,236,224,0.9);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

.tp-logo:not(.tp-logo--plain) .tp-logo__line {
  background: linear-gradient(90deg, rgba(244,236,224,0) 0%, rgba(244,236,224,0.7) 100%);
}

/* top shade behind the whole header, only while the light logo is shown */
header:has(.tp-logo)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 170px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(12,8,4,0.55) 0%, rgba(12,8,4,0.32) 45%, rgba(12,8,4,0) 100%);
  opacity: 0;
  transition: opacity 0.5s;
}

header:has(.tp-logo:not(.tp-logo--plain))::before { opacity: 1; }

/* footer wordmark (replaces /images/nobg-logo.png on the dark footer) */
.tp-footer-logo {
  display: inline-block;
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-size: 44px;   /* same visual size as the old 52px-tall PNG */
}

@media (max-width: 460px) {
  .tp-footer-logo { font-size: 34px; } /* old max-[460px]:h-10 */
}