/* =============================================================
   THE LANG CO — Wedding Suite shared helpers
   Built on top of colors_and_type.css
   ============================================================= */

@import url("colors_and_type.css");

/* ---- doodle (recoloring via mask) ---- */
.doodle {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  vertical-align: middle;
}

/* common dimensions */
.doodle--xs { width: 24px;  height: 24px; }
.doodle--sm { width: 40px;  height: 40px; }
.doodle--md { width: 80px;  height: 80px; }
.doodle--lg { width: 140px; height: 140px; }
.doodle--xl { width: 220px; height: 220px; }
.doodle--xxl{ width: 320px; height: 320px; }

/* logo (mask-recolorable via use of img filter isn't great; use inline svg
   or <img> with currentColor via mask). We'll use mask too. */
.logo-mask {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* ---- thin hairline for editorial dividers ---- */
.tlc-rule {
  border: 0;
  border-top: 1px solid var(--espresso);
  margin: 0;
}
.tlc-rule--thick {
  border-top-width: 4px;
  border-color: currentColor;
}
.tlc-rule--cream {
  border-color: color-mix(in oklab, var(--cream) 35%, transparent);
}

/* ---- eyebrow / kicker ---- */
.eyebrow {
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: var(--fs-13);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm-khaki);
  display: inline-block;
}
.eyebrow--cream { color: color-mix(in oklab, var(--cream) 70%, var(--warm-khaki)); }
.eyebrow--rust { color: var(--deep-rust); }
.eyebrow--sienna { color: var(--warm-sienna); }

/* ---- script accent ---- */
.script {
  font-family: var(--font-script);
  color: var(--warm-sienna);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.9;
}
.script--rust { color: var(--deep-rust); }
.script--butter { color: var(--butter); }

/* ---- giant West West numerals ---- */
.numeral {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--deep-olive);
}

/* ---- pill tags ---- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--espresso);
}
.tag--filled {
  background: var(--espresso);
  color: var(--cream);
  border-color: var(--espresso);
}

/* ---- editorial button ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--deep-olive);
  color: var(--cream);
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--deep-rust); color: var(--cream); }
.btn--ghost {
  background: transparent;
  color: var(--espresso);
  border: 1px solid var(--espresso);
}
.btn--ghost:hover { background: var(--espresso); color: var(--cream); }
.btn--cream {
  background: var(--cream);
  color: var(--espresso);
}
.btn--cream:hover { background: var(--butter); color: var(--espresso); }
.btn--sienna {
  background: var(--warm-sienna);
}
.btn--sienna:hover { background: var(--deep-rust); }

/* ---- "kayla & mike" wordmark style ---- */
.kayla-mike {
  font-family: var(--font-script);
  font-size: 1.4em;
  color: var(--warm-sienna);
}

/* ---- Letter page frame ---- */
.letter {
  width: 8.5in;
  height: 11in;
  background: var(--cream);
  color: var(--espresso);
  position: relative;
  overflow: hidden;
  page-break-after: always;
  break-after: page;
  margin: 0 auto;
  box-shadow: 0 12px 40px -20px rgba(39,38,35,0.2), 0 2px 8px rgba(39,38,35,0.06);
}
.letter:last-child { page-break-after: auto; }

.letter--dark { background: var(--olive-black); color: var(--cream); }
.letter--sand { background: var(--sand); color: var(--espresso); }
.letter--cool { background: var(--pale-blue); color: var(--slate); }
.letter--navy { background: var(--navy-black); color: var(--cream); }

/* screen-only spacing between letter pages */
@media screen {
  .stack {
    background: linear-gradient(180deg, #29261b 0%, #1a1810 100%);
    padding: 48px 0;
    min-height: 100vh;
  }
  .stack > .letter + .letter { margin-top: 48px; }
}

/* PRINT */
@page {
  size: letter;
  margin: 0;
}
@media print {
  html, body { background: white; }
  .stack { background: white; padding: 0; }
  .letter { box-shadow: none; margin: 0; }
  .no-print { display: none !important; }
}

/* ---- magazine column ---- */
.col { max-width: 60ch; }
.col--narrow { max-width: 38ch; }
.col--wide { max-width: 76ch; }

/* ---- huge headline ---- */
.headline {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

/* ---- ULTRA condensed display (alt headline) ---- */
.ultra {
  font-family: var(--font-condensed);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.005em;
  margin: 0;
}

/* ---- body text reset for print-context ---- */
.body-prose {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13.5pt;
  line-height: 1.55;
  color: var(--espresso);
  text-wrap: pretty;
}
.body-prose p { margin: 0 0 0.85em; max-width: 60ch; }
.body-prose p:last-child { margin-bottom: 0; }
.body-prose em { font-style: italic; }
.body-prose strong { font-weight: 600; }
.body-prose a { color: var(--warm-sienna); text-decoration: underline; text-underline-offset: 2px; }

/* ---- "lang gang" link cluster style ---- */
.linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.linklist li {
  font-family: var(--font-ui);
  font-size: 11pt;
  letter-spacing: 0.01em;
}
.linklist .star {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: currentColor;
  -webkit-mask: url("assets/ink/d-1635.svg") center/contain no-repeat;
          mask: url("assets/ink/d-1635.svg") center/contain no-repeat;
  margin-right: 6px;
  vertical-align: 1px;
}

/* ---- form controls (booking page) ---- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-khaki);
}
.field input,
.field textarea,
.field select {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  color: var(--espresso);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--espresso);
  padding: 8px 0 10px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--taupe); font-style: italic; }
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--deep-rust); }
.field textarea { resize: vertical; min-height: 96px; }

/* utility */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 24px; }
.gap-6 { gap: 32px; }
.gap-7 { gap: 48px; }
.gap-8 { gap: 64px; }

.text-center { text-align: center; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }

.opacity-60 { opacity: 0.6; }
.opacity-80 { opacity: 0.8; }