/* House of Honoré — type + header lockup overlay
   Script/serif system from Keirstin’s mark. Existing layout untouched. */

:root {
  --hoh-ink: #3c2f22;
  --hoh-paper: #e8dcc8;
  --hoh-cream: #f3eadc;
  --hoh-script: "Allura", "Great Vibes", cursive;
  --hoh-serif: "Playfair Display", "Times New Roman", serif;
  --hoh-caps: "Cinzel", "Playfair Display", serif;
  --hoh-body: "Cormorant Garamond", Georgia, serif;
}

body,
.uk-font-default,
.uk-text-large,
.uk-text-lead,
.uk-button,
.uk-nav,
.uk-navbar-item,
p, li, a {
  font-family: var(--hoh-body);
}

h1, h2, h3, h4, h5,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5,
.uk-heading-2xlarge,
.uk-heading-xlarge,
.uk-heading-large,
.uk-heading-small,
.uk-heading-medium,
.uk-modal-title,
.el-title {
  font-family: var(--hoh-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em;
}

.uk-heading-2xlarge,
.uk-heading-xlarge,
.uk-heading-large {
  font-style: italic;
}

/* Homepage type sits lower in the photo — 15% / 25% of the viewport */
#tm-main h1.uk-heading-2xlarge {
  font-size: 76.8px !important; /* 20% smaller than 96px */
  letter-spacing: -0.04em;
}

@media (min-width: 960px) {
  #tm-main [uk-height-viewport] {
    align-items: flex-end;
    padding: 15vh 0 max(12rem, 18vh);
    box-sizing: border-box;
  }

  #tm-main h1.uk-heading-2xlarge {
    font-size: 107px !important; /* 20% smaller than 134px */
  }
}

@media (min-width: 1200px) {
  #tm-main h1.uk-heading-2xlarge {
    font-size: 8.8rem !important; /* 20% smaller than 11rem */
  }
}

#tm-main h1.uk-heading-xlarge {
  margin-top: 15vh;
}

#tm-main .uk-h2.uk-margin-xlarge {
  margin-top: 25vh !important;
  margin-bottom: 8vh !important;
}

.uk-button-text,
.uk-nav-primary > li > a,
.uk-navbar-toggle {
  font-family: var(--hoh-caps) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78em;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Header: HH left, wordmark centered, name leaves on scroll */
.tm-header .uk-navbar-container,
.tm-header-mobile .uk-navbar-container {
  overflow: visible;
}

.hoh-logo-link {
  align-items: center;
  text-decoration: none !important;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.hoh-word-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  margin: 0;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

html.hoh-scrolled .hoh-word-slot {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hoh-word-link {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.uk-logo.hoh-logo-link,
.uk-logo.hoh-word-link {
  font-size: inherit;
  position: relative;
}

.uk-logo .hoh-hh-img,
.uk-logo .hoh-word-img {
  width: auto !important;
  max-width: none !important;
  height: auto;
}

/* Ink on light grounds; cream on dark photos. Inverse sits in the same slot — never a second ghost. */
.uk-logo .hoh-hh-img:not(.uk-logo-inverse),
.uk-logo .hoh-word-img:not(.uk-logo-inverse) {
  display: block;
}

.uk-logo .hoh-hh-img.uk-logo-inverse,
.uk-logo .hoh-word-img.uk-logo-inverse {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.uk-light .uk-logo .hoh-hh-img:not(.uk-logo-inverse),
.uk-light .uk-logo .hoh-word-img:not(.uk-logo-inverse),
.uk-inverse .uk-logo .hoh-hh-img:not(.uk-logo-inverse),
.uk-inverse .uk-logo .hoh-word-img:not(.uk-logo-inverse) {
  display: none !important;
}

.uk-light .uk-logo .uk-logo-inverse,
.uk-inverse .uk-logo .uk-logo-inverse {
  display: block !important;
}

.uk-logo .hoh-hh-img {
  height: 56px !important;
}

.uk-logo .hoh-word-img {
  height: 92px !important;
}

.tm-header-mobile .uk-logo img {
  width: auto !important;
  max-width: none !important;
  height: auto;
}

@media (max-width: 959px) {
  .tm-header-mobile .uk-logo .hoh-hh-img { height: 44px !important; }
  .tm-header-mobile .uk-logo .hoh-word-img { height: 52px !important; }
}

@media (max-width: 639px) {
  .tm-header-mobile .uk-logo .hoh-hh-img { height: 36px !important; }
  .tm-header-mobile .uk-logo .hoh-word-img { height: 42px !important; }
}

/* ——— Mobile photography layout ——— */
@media (max-width: 959px) {
  img { max-width: 100%; height: auto; }

  .tm-header-mobile .uk-navbar-left {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
  }

  .tm-header-mobile .uk-navbar-right {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .tm-header-mobile .hoh-word-slot {
    pointer-events: none;
  }

  .tm-header-mobile .hoh-word-link {
    pointer-events: auto;
  }

  .tm-header-mobile .uk-navbar-toggle {
    border-radius: 999px;
    width: 44px;
    height: 44px;
  }

  .tm-header-mobile .uk-light .uk-navbar-toggle {
    color: #f3eadc !important;
    background: rgba(12, 10, 8, 0.35);
  }

  /* Show the couple, not the dark empty crop */
  #tm-main > .uk-section-default > .uk-background-cover {
    background-position: 78% 20% !important;
    min-height: 100svh;
  }

  #tm-main > .uk-section-default > .uk-background-cover > .uk-position-cover {
    background-color: rgba(0, 0, 0, 0.28) !important;
  }

  #tm-main .uk-section-xlarge-bottom {
    padding-bottom: 2.25rem !important;
  }

  #tm-main [uk-height-viewport] {
    min-height: 100svh !important;
    height: auto !important;
    align-items: flex-end !important;
    padding: 0 5vw max(10.5rem, calc(28vh + env(safe-area-inset-bottom)));
    box-sizing: border-box;
  }

  h1.uk-heading-xlarge {
    font-size: clamp(1.52rem, 7.04vw, 2.12rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.04em !important;
    max-width: 94vw;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  }

  #tm-main .uk-width-2xlarge,
  #tm-main .uk-width-xlarge,
  #tm-main .uk-width-large {
    width: 100% !important;
    max-width: 100% !important;
  }

  #tm-main .uk-h2.uk-margin-xlarge {
    margin-top: 25vh !important;
    margin-bottom: 8vh !important;
    font-size: 1.15rem !important;
    line-height: 1.45;
    padding: 0 1.15rem;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-wrap: break-word;
  }

  #tm-main .uk-section-large {
    padding-top: 2.25rem !important;
    padding-bottom: 2.25rem !important;
  }

  #tm-main .uk-margin-xlarge {
    margin-top: 1.75rem !important;
    margin-bottom: 1.75rem !important;
  }

  #tg-about {
    min-height: 0 !important;
    padding-top: 2.5rem;
    padding-bottom: 2rem;
  }

  #tg-about .uk-heading-xlarge {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.05 !important;
    padding: 0 1rem;
  }

  #tg-about .uk-h3 {
    font-size: 1.08rem !important;
    line-height: 1.5;
    padding: 0 1rem;
  }

  #tm-main .uk-slider-items .el-image {
    width: 100%;
    height: min(78vw, 70vh);
    object-fit: cover;
    object-position: center 18%;
  }

  /* Cookie: overlay stays, but stop eating the photo */
  .tm-consent.uk-section-xsmall {
    padding: 0.45rem 0.9rem calc(0.4rem + env(safe-area-inset-bottom)) !important;
    background: rgba(244, 241, 236, 0.96) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .tm-consent p {
    font-size: 0.72rem !important;
    line-height: 1.3;
    margin: 0 0 0.4rem !important;
  }

  .tm-consent .uk-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 0.4rem !important;
    margin: 0 !important;
  }

  .tm-consent .uk-grid > * {
    min-width: 0;
  }

  .tm-consent .uk-grid > :last-child {
    grid-column: 1 / -1;
  }

  .tm-consent .uk-button {
    min-height: 40px;
    padding: 0.3rem 0.7rem;
    font-size: 0.76rem !important;
    letter-spacing: 0.08em;
  }

  .tm-consent [data-consent-button="settings"] {
    background: transparent !important;
    color: #6b6560 !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0.1rem 0 0 !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    font-size: 0.7rem !important;
  }

  footer .uk-section-xlarge,
  footer .uk-section-large {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

@media (max-width: 639px) {
  #tm-main [uk-height-viewport] {
    padding-bottom: max(11rem, calc(30vh + env(safe-area-inset-bottom)));
  }

  .uk-offcanvas-bar {
    padding-top: max(1.5rem, env(safe-area-inset-top));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  .uk-button-large,
  .uk-button-text {
    min-height: 44px;
  }
}