/* ===========================================
   INKVITE.APP — Shared Stylesheet
   =========================================== */

:root{
  --cream:      #f7f1e3;
  --cream-soft: #fbf6eb;
  --cream-deep: #ebe3d1;
  --ink:        #1d1816;
  --ink-soft:   #4a3f3a;
  --ink-muted:  #7a6f6a;
  --clay:       #b4533a;
  --clay-deep:  #8a3a26;
  --clay-soft:  #d68669;
  --gold:       #b9923c;
  --gold-light: #d9b35e;
  --line:       rgba(29,24,22,.12);
  --line-dark:  rgba(29,24,22,.22);

  --serif:      'Fraunces', 'Times New Roman', serif;
  --sans:       'DM Sans', system-ui, -apple-system, sans-serif;
  --mono:       'JetBrains Mono', ui-monospace, monospace;

  --maxw:       1280px;
  --gutter:     6vw;
  --r-sm:       8px;
  --r-md:       14px;
  --r-lg:       22px;
  --shadow:     0 26px 50px -22px rgba(29,24,22,.25);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{max-width:100%; display:block;}
a{color: inherit; text-decoration: none;}
button{font: inherit; cursor: pointer;}

/* ===== Grain overlay ===== */
body::before{
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(29,24,22,.03) 1px, transparent 1px);
  background-size: 3px 3px;
  z-index: 1;
  opacity: .5;
}

/* ===========================================
   NAV
   =========================================== */
nav.site-nav{
  position: sticky; top: 0;
  padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(247,241,227,.92);
  backdrop-filter: blur(12px);
  z-index: 100;
  border-bottom: 1px solid var(--line);
}
nav.site-nav .brand{
  font-family: var(--serif);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
nav.site-nav .brand .dot{
  width: 6px; height: 6px;
  background: var(--clay);
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 2px;
}
nav.site-nav .brand em{
  font-style: italic;
  font-weight: 600;
  color: var(--clay);
}
nav.site-nav .links{
  display: flex; gap: 28px;
  font-size: 14px;
  font-weight: 500;
}
nav.site-nav .links a{ transition: color .2s; position: relative; }
nav.site-nav .links a:hover, nav.site-nav .links a.active{ color: var(--clay); }
nav.site-nav .links a.active::after{
  content: "";
  position: absolute;
  bottom: -22px; left: 0; right: 0;
  height: 2px;
  background: var(--clay);
}
nav.site-nav .cta{
  background: var(--ink);
  color: var(--cream);
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background .2s;
}
nav.site-nav .cta:hover{ background: var(--clay); }

/* Mobile menu toggle */
.menu-toggle{
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--ink);
  padding: 4px 8px;
}
@media (max-width: 880px){
  nav.site-nav .links{ display: none; }
  nav.site-nav .cta{ display: none; }
  .menu-toggle{ display: block; }
  nav.site-nav.open .links{
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--cream);
    flex-direction: column;
    padding: 20px var(--gutter);
    gap: 16px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 30px -10px rgba(29,24,22,.15);
  }
  nav.site-nav.open .cta{ display: inline-block; align-self: flex-start; margin-top: 6px; }
  nav.site-nav.open .links{ display: flex; }
}

/* ===========================================
   PAGE HEADER (used on category pages)
   =========================================== */
.page-header{
  padding: 90px var(--gutter) 70px;
  text-align: center;
  position: relative;
  background: var(--cream);
}
.page-header .eyebrow{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 22px;
}
.page-header .eyebrow::before, .page-header .eyebrow::after{
  content: "";
  width: 40px; height: 1px;
  background: var(--clay);
}
.page-header h1{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 7vw, 84px);
  line-height: 1;
  letter-spacing: -.025em;
  max-width: 880px;
  margin: 0 auto 24px;
}
.page-header h1 em{
  font-style: italic;
  font-weight: 600;
  color: var(--clay);
}
.page-header p{
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ===========================================
   DEMO CARDS GRID (themed CSS posters)
   =========================================== */
.demo-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px var(--gutter) 100px;
}
@media (max-width: 980px){ .demo-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .demo-grid{ grid-template-columns: 1fr; } }

.demo-card{
  background: var(--cream-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 18px 22px;
  display: flex; flex-direction: column;
  transition: transform .35s ease, box-shadow .35s ease;
}
.demo-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.demo-card .preview{
  position: relative;
  aspect-ratio: 9/16;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.demo-card .preview img{ width: 100%; height: 100%; object-fit: cover; }
.demo-card .preview .tag{
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(255,255,255,.95);
  padding: 5px 12px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .25em;
  color: var(--ink);
  z-index: 5;
}
.demo-card h3{
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.demo-card .meta{
  font-size: 12px;
  color: var(--ink-muted);
  font-family: var(--mono);
  letter-spacing: .05em;
  margin-bottom: 12px;
}
.demo-card .features{
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 14px;
}
.demo-card .feat{
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 100px;
  background: rgba(180,83,58,.1);
  color: var(--clay-deep);
  font-weight: 600;
}
.demo-card .view-btn{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  justify-content: center;
  transition: background .2s;
}
.demo-card .view-btn:hover{ background: var(--clay); }
.demo-card .view-btn .arrow{ transition: transform .2s; }
.demo-card:hover .view-btn .arrow{ transform: translateX(4px); }

/* ===== CSS-GENERATED PREVIEWS (for demos without poster images) =====
   Each is a unique themed mini-poster
   ===== */

.css-preview{
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 30px 20px;
  overflow: hidden;
}
.css-preview .title{
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  position: relative; z-index: 2;
}
.css-preview .sub{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .35em;
  margin-top: 8px;
  position: relative; z-index: 2;
  opacity: .85;
}
.css-preview .icon{
  font-size: 50px;
  margin-bottom: 12px;
  position: relative; z-index: 2;
}

/* Theme: Indian Wedding (burgundy + gold) */
.preview-indian-wedding{
  background:
    radial-gradient(ellipse at 50% 100%, #7a1a1a 0%, #4a0f0f 100%);
  color: #f7eed8;
  border: 2px solid #c9a55c;
}
.preview-indian-wedding::before{
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid #c9a55c;
}

/* Theme: Naming Ceremony (peacock) */
.preview-naming{
  background:
    radial-gradient(ellipse at 50% 30%, #1a6b85 0%, #062f3d 100%);
  color: #d4a637;
}
.preview-naming::before{
  content: "॥";
  position: absolute;
  font-size: 120px;
  opacity: .15;
  top: 40px;
  font-family: var(--serif);
}

/* Theme: Baby Shower (mint) */
.preview-baby-shower{
  background: linear-gradient(180deg, #fdf9f0 0%, #d4e8de 100%);
  color: #5a7a6e;
}

/* Theme: Modern Wedding (black + cream) */
.preview-modern-wedding{
  background: #0a0a0a;
  color: #fafaf7;
}
.preview-modern-wedding .title{
  font-family: 'Italiana', var(--serif);
  font-weight: 400;
  letter-spacing: .04em;
}

/* Theme: Boho Garden (terracotta) */
.preview-boho{
  background:
    radial-gradient(ellipse at 50% 100%, #d4c4a0 0%, #f4ecd8 100%);
  color: #8a5a3b;
}

/* Theme: Halloween (purple + orange) */
.preview-halloween{
  background:
    radial-gradient(circle at 50% 30%, #4a1f6e 0%, #1a0a2e 80%);
  color: #ff7818;
}
.preview-halloween .title{
  font-family: 'Creepster', cursive;
  font-weight: 400;
  letter-spacing: .04em;
  text-shadow: 0 0 12px rgba(255,120,24,.5);
}

/* Theme: Disco Bachelorette (hot pink) */
.preview-disco{
  background:
    radial-gradient(circle at 50% 30%, #ff3a8a 0%, #b80b6f 60%, #1a0010 100%);
  color: #ffd700;
}
.preview-disco .title{
  font-family: 'Honk', sans-serif;
  font-weight: 400;
  text-shadow: 2px 2px 0 #b80b6f, 0 0 20px #ffd700;
}

/* Theme: Holiday (forest green + cranberry) */
.preview-holiday{
  background:
    radial-gradient(ellipse at 50% 30%, #2d6e44 0%, #0d2e1a 100%);
  color: #faf3df;
}
.preview-holiday::after{
  content: "❄ ❄ ❄";
  position: absolute;
  font-size: 18px;
  color: rgba(255,255,255,.5);
  letter-spacing: .3em;
  top: 20px;
}

/* Theme: Cinema (red + gold) */
.preview-cinema{
  background: #1a0f08;
  color: #d4a437;
  border-top: 4px solid #d4a437;
  border-bottom: 4px solid #d4a437;
}
.preview-cinema .title{
  font-family: 'Limelight', cursive;
  font-weight: 400;
  text-shadow: 2px 2px 0 #6e0e0e;
}

/* Theme: Retro Diner (neon pink) */
.preview-diner{
  background: #0f0f0f;
  color: #ff006e;
}
.preview-diner .title{
  font-family: 'Monoton', cursive;
  font-weight: 400;
  text-shadow: 0 0 8px #ff006e, 0 0 20px #ff006e;
  letter-spacing: .1em;
}

/* Theme: Watercolor (peach + rose) */
.preview-watercolor{
  background:
    radial-gradient(circle at 30% 30%, #f2c4a3 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, #e8b8c4 0%, transparent 50%),
    #fef8f0;
  color: #4a3a2a;
}
.preview-watercolor .title{
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 38px;
}

/* Theme: Black Tie (champagne) */
.preview-blacktie{
  background:
    linear-gradient(180deg, #0a0a0a 0%, #0a0a0a 50%, #f4ead5 50%, #f4ead5 100%);
  color: #f4ead5;
}
.preview-blacktie .title-top{
  font-family: 'Italiana', serif;
  font-size: 80px;
  line-height: .8;
  color: #d4b876;
  position: absolute;
  top: 22%;
}
.preview-blacktie .title-bot{
  font-family: 'Italiana', serif;
  font-size: 18px;
  color: #1a1612;
  position: absolute;
  bottom: 28%;
  letter-spacing: .04em;
}

/* Theme: Y2K Sweet 16 (chaos) */
.preview-y2k{
  background:
    linear-gradient(135deg, #ff1493 0%, #ff66cc 50%, #b15dff 100%);
  color: #ffffff;
}
.preview-y2k .title{
  font-family: 'Bungee Shade', cursive;
  font-weight: 400;
  text-shadow: -3px 3px 0 #1a1a1a;
  transform: rotate(-3deg);
  letter-spacing: .02em;
}

/* ===========================================
   BUTTONS
   =========================================== */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  transition: transform .15s, box-shadow .2s, background .2s;
  cursor: pointer;
  border: 1.5px solid transparent;
}
.btn-primary{
  background: var(--ink);
  color: var(--cream);
}
.btn-primary:hover{
  background: var(--clay);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(180,83,58,.4);
}
.btn-secondary{
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-secondary:hover{
  background: var(--ink);
  color: var(--cream);
}
.btn .arrow{ transition: transform .2s; }
.btn:hover .arrow{ transform: translateX(4px); }

/* ===========================================
   FOOTER
   =========================================== */
footer.site-footer{
  background: var(--ink);
  color: var(--cream);
  padding: 70px var(--gutter) 30px;
  margin-top: 0;
}
footer.site-footer .grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 50px;
  max-width: var(--maxw);
  margin: 0 auto 40px;
}
@media (max-width: 880px){
  footer.site-footer .grid{
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}
@media (max-width: 560px){
  footer.site-footer .grid{ grid-template-columns: 1fr; }
}

footer.site-footer .brand-block .brand{
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--cream);
}
footer.site-footer .brand-block .brand em{ font-style: italic; color: var(--gold); }
footer.site-footer .brand-block .tagline{
  font-size: 14px;
  color: rgba(247,241,227,.65);
  max-width: 380px;
  line-height: 1.65;
  margin-bottom: 18px;
}
footer.site-footer h5{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
footer.site-footer ul{ list-style: none; }
footer.site-footer li{ margin-bottom: 10px; font-size: 14px; color: rgba(247,241,227,.7); }
footer.site-footer li a:hover{ color: var(--gold); }

footer.site-footer .legal{
  border-top: 1px solid rgba(247,241,227,.12);
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
  color: rgba(247,241,227,.5);
  font-family: var(--mono);
}
@media (max-width: 600px){
  footer.site-footer .legal{ flex-direction: column; gap: 8px; text-align: center; }
}

/* ===========================================
   SCROLL REVEAL
   =========================================== */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s; }
.reveal.in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .01ms!important; transition: none!important; }
}