/* ══════════════════════════════════════════════
   PAIRS N HONEY — SHARED STYLES
   pairsnhoney.com
══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter:wght@300;400;500;600&family=Dancing+Script:wght@400;600&display=swap');

:root {
  --ivory:    #FFFDF7;
  --cream:    #F5F1E8;
  --taupe:    #C9B8A8;
  --cocoa:    #8B7355;
  --choc:     #4A3C32;
  --espresso: #2C2419;
  --bg:       #1A1208;
  --gold:     #C9A961;
  --gold-lt:  #E8D5A3;
  --plum:     #5C3D4E;
  --hc-url:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104'%3E%3Cpath d='M30 68L0 52V20L30 4l30 16v32L30 68zm0 0v36m30-52L30 68M0 52l30 16' fill='none' stroke='rgba(201,169,97,0.10)' stroke-width='1.2'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--cream); -webkit-font-smoothing: antialiased; }

/* HONEYCOMB */
.hc { background-color: var(--bg); background-image: var(--hc-url); }

/* LOGO */
.logo { display: inline-flex; align-items: baseline; gap: 1px; text-decoration: none; }
.logo-pairs { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 400; color: var(--ivory); letter-spacing: -.01em; }
.logo-n { font-family: 'Dancing Script', cursive; font-size: 19px; color: var(--gold); position: relative; top: 4px; margin: 0 1px; }
.logo-honey { font-family: 'Cormorant Garamond', serif; font-size: 21px; font-weight: 400; color: var(--ivory); letter-spacing: -.01em; }

/* SITE NAV */
.snav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(26,18,8,0.96); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(201,169,97,0.12);
  padding: 0 36px; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.snav-links { display: flex; gap: 26px; align-items: center; }
.snav-links a { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--taupe); text-decoration: none; transition: color .2s; }
.snav-links a:hover { color: var(--gold); }

/* MOBILE NAV TOGGLE (CSS-only, no JS required) */
.nav-toggle-input { display: none; }
.nav-toggle {
  display: none; cursor: pointer; width: 22px; height: 16px; position: relative;
  flex-direction: column; justify-content: space-between; flex-shrink: 0;
}
.nav-toggle span { display: block; height: 1.5px; width: 100%; background: var(--gold); transition: transform .2s, opacity .2s; }

/* BUTTONS */
.btn { display: inline-block; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 13px 28px; text-decoration: none; cursor: pointer; border: none; transition: all .2s; }
.btn-g { background: var(--gold); color: var(--espresso); }
.btn-g:hover { background: var(--gold-lt); }
.btn-o { background: none; color: var(--taupe); border: 1px solid rgba(201,169,97,0.35); margin-left: 10px; }
.btn-o:hover { border-color: var(--gold); color: var(--gold); }

/* EYEBROW */
.ey { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; justify-content: center; }
.ey::before, .ey::after { content: ''; width: 32px; height: 1px; background: var(--gold); opacity: .35; }
.ey.left { justify-content: flex-start; }
.ey.left::before { display: none; }

/* HEADLINES */
.h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(52px,8.5vw,94px); font-weight: 300; line-height: 1.0; color: var(--ivory); }
.h1 em { font-style: italic; color: var(--gold); }
.h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px,4.5vw,52px); font-weight: 300; color: var(--ivory); line-height: 1.2; }
.h2 em { font-style: italic; color: var(--gold); }
.body-t { font-size: 15px; line-height: 1.8; color: var(--taupe); }
.body-sm { font-size: 13px; line-height: 1.75; color: var(--taupe); }

/* PHOTO FRAME */
.photo-frame { background: linear-gradient(135deg,rgba(201,169,97,0.06),rgba(92,61,78,0.06)); border: 1px dashed rgba(201,169,97,0.25); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame-label { position: absolute; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(201,169,97,0.35); text-align: center; padding: 12px; }
.photo-frame-label span { display: block; font-size: 20px; margin-bottom: 6px; opacity: .35; }

/* QUOTE BREAK */
.qbreak { padding: 88px 24px; text-align: center; position: relative; overflow: hidden; }
.qbreak-bg { position: absolute; inset: 0; background-color: #3A2A1C; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104'%3E%3Cpath d='M30 68L0 52V20L30 4l30 16v32L30 68zm0 0v36m30-52L30 68M0 52l30 16' fill='none' stroke='rgba(201,169,97,0.22)' stroke-width='1.2'/%3E%3C/svg%3E"); }
.qbreak-inner { position: relative; z-index: 1; max-width: 740px; margin: 0 auto; }
.qt { font-family: 'Cormorant Garamond', serif; font-size: clamp(26px,4vw,48px); font-weight: 300; font-style: italic; color: var(--ivory); line-height: 1.3; }
.qa { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-top: 22px; }

/* FOOTER */
.ft { background: #0A0704; border-top: 1px solid rgba(201,169,97,0.1); padding: 56px 36px 0; }
.ft-inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.ft-tagline { font-size: 12px; color: var(--cocoa); margin-top: 8px; line-height: 1.65; }
.ft-col-title { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.ft-links { list-style: none; }
.ft-links li { margin-bottom: 8px; }
.ft-links a { font-size: 12px; color: var(--taupe); text-decoration: none; }
.ft-nl { margin-top: 18px; }
.ft-nl form { display: flex; margin-top: 8px; }
.ft-nl input { flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(201,169,97,0.18); border-right: none; color: var(--cream); font-family: 'Inter', sans-serif; font-size: 11px; padding: 9px 12px; outline: none; }
.ft-nl input::placeholder { color: var(--cocoa); }
.ft-nl button { background: var(--gold); color: var(--espresso); border: none; cursor: pointer; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 9px 14px; }
.ft-bottom { max-width: 960px; margin: 40px auto 0; padding: 18px 0; border-top: 1px solid rgba(201,169,97,0.06); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.ft-copy { font-size: 10px; color: var(--cocoa); }
.ft-soc { display: flex; gap: 14px; }
.ft-soc a { font-size: 10px; color: var(--taupe); text-decoration: none; }

@media (max-width: 768px) {
  .snav { padding: 0 20px; }
  .nav-toggle { display: flex; }
  .nav-cta-inline { display: none !important; }

  .snav-links {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(10,7,4,0.98); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(201,169,97,0.14);
    max-height: 0; overflow: hidden;
    transition: max-height .28s ease;
  }
  .snav-links a, .snav-links .btn {
    padding: 16px 24px; margin: 0; width: 100%;
    border-top: 1px solid rgba(201,169,97,0.07);
    text-align: left; box-sizing: border-box;
  }
  .snav-links .btn { color: var(--espresso); }
  .nav-toggle-input:checked ~ .snav-links { max-height: 480px; }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .ft-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ══════════════════════════════════════════════
   MOTION & POLISH LAYER
══════════════════════════════════════════════ */
::selection { background: rgba(201,169,97,0.3); color: var(--ivory); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.h1, .h2 { text-wrap: balance; }
.body-t, .body-sm { text-wrap: pretty; }
img { -webkit-user-drag: none; }

/* Buttons — lift + glow */
.btn { transition: background .3s cubic-bezier(.22,1,.36,1), color .3s cubic-bezier(.22,1,.36,1), border-color .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1); }
.btn-g:hover { background: var(--gold-lt); transform: translateY(-2px); box-shadow: 0 6px 18px -8px rgba(201,169,97,0.55); }
.btn-g:active { transform: translateY(0); transition-duration: .1s; }
.btn-o:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn-o:active { transform: translateY(0); transition-duration: .1s; }

/* Nav — animated underline + scrolled state */
.snav { transition: background .35s ease, box-shadow .35s ease; }
.snav.scrolled { background: rgba(15,10,4,0.94); box-shadow: 0 14px 34px -22px rgba(0,0,0,0.9); }
@media (min-width: 769px) {
  .snav-links a:not(.btn) { position: relative; padding-bottom: 2px; }
  .snav-links a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px; background: var(--gold); transition: right .35s cubic-bezier(.22,1,.36,1); }
  .snav-links a:not(.btn):hover::after { right: 0; }
}

/* Footer + form micro-states */
.ft-links a { transition: color .25s ease; }
.ft-links a:hover { color: var(--gold-lt); }
.ft-nl input { transition: border-color .25s ease, background .25s ease; }
.ft-nl input:focus { border-color: rgba(201,169,97,0.55); background: rgba(255,255,255,0.07); }
.ft-nl button { transition: background .25s ease; }
.ft-nl button:hover { background: var(--gold-lt); }
.back-link { transition: color .25s ease; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* ── Scroll reveals (JS adds .in; without JS everything stays visible) ── */
  html.js [data-reveal] {
    opacity: 0; transform: translateY(26px);
    transition: opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1), filter 1s cubic-bezier(.22,1,.36,1), clip-path 1.1s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--rd, 0s);
  }
  html.js [data-reveal="fade"]  { transform: none; }
  html.js [data-reveal="blur"]  { transform: translateY(18px); filter: blur(9px); }
  html.js [data-reveal="left"]  { transform: translateX(-30px); }
  html.js [data-reveal="right"] { transform: translateX(30px); }
  html.js [data-reveal="mask"]  { transform: none; clip-path: inset(10% 7%); }
  html.js [data-reveal="mask"] img { transform: scale(1.1); transition: transform 1.5s cubic-bezier(.22,1,.36,1); transition-delay: var(--rd, 0s); }
  html.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
  html.js [data-reveal="mask"].in { clip-path: inset(0); }
  html.js [data-reveal="mask"].in img { transform: scale(1); }

  /* ── Hero entrance choreography ── */
  .anim-hero > * { animation: heroRise 1.05s cubic-bezier(.22,1,.36,1) both; }
  .anim-hero > *:nth-child(1) { animation-delay: .05s; }
  .anim-hero > *:nth-child(2) { animation-delay: .16s; }
  .anim-hero > *:nth-child(3) { animation-delay: .3s; }
  .anim-hero > *:nth-child(4) { animation-delay: .44s; }
  .anim-hero > *:nth-child(5) { animation-delay: .52s; }
  .anim-hero > *:nth-child(6) { animation-delay: .66s; }
  .anim-hero > *:nth-child(7) { animation-delay: .78s; }
  @keyframes heroRise {
    from { opacity: 0; transform: translateY(30px); filter: blur(7px); }
    to   { opacity: 1; transform: none; filter: none; }
  }

  /* ── Ambient life: honeycomb drift + hero glow breathing ── */
  .home-hero::before, .ev-hero::before, .story-hero::before { animation: hcDrift 70s linear infinite; }
  @keyframes hcDrift { to { background-position: 0 -208px; } }
  .home-hero::after { animation: glowBreathe 9s ease-in-out infinite; }
  @keyframes glowBreathe { 50% { opacity: .6; } }

  /* ── Parallax hosts (JS drives transform) ── */
  html.js [data-parallax] { will-change: transform; }
  html.js .qbreak-bg { top: -14%; bottom: -14%; }

  /* ── Card hover lift ── */
  .tip-card { transition: border-color .35s ease, background .35s ease, transform .35s cubic-bezier(.22,1,.36,1); }
  .tip-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.035); }
  .gp-card { transition: border-color .35s ease, background .35s ease; }
  .gp-card:hover { border-color: rgba(201,169,97,0.28); }
}