/* Pura Vida Ranch — brand design system.
   Palette + type from the official Brand Kit (BRAND.md). Fonts self-hosted
   in /fonts. Used by the public site and the admin dashboard. */

/* ---- Fonts (self-hosted, no external requests) ---- */
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/cormorant-garamond-400.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/cormorant-garamond-500.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/cormorant-garamond-600.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/jost-300.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/jost-400.woff2') format('woff2'); }
@font-face { font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/jost-500.woff2') format('woff2'); }

:root {
  --espresso:#221D17;
  --espresso-90:#2c261f;
  --bone:#F4EEE2;
  --paper:#FBF9F3;
  --brass:#A8823C;
  --brass-soft:#c2a874;
  --taupe:#8A8474;
  --line:rgba(34,29,23,0.14);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --maxw:1140px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bone); color:var(--espresso);
  font-family:var(--sans); font-weight:400; line-height:1.65;
  font-size:17px; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

/* ---- Type ---- */
h1,h2,h3 { font-family:var(--serif); font-weight:500; line-height:1.08; margin:0; letter-spacing:.005em; }
h1 { font-size:clamp(2.6rem,7vw,5rem); font-weight:400; }
h2 { font-size:clamp(2rem,4.4vw,3.1rem); font-weight:400; }
h3 { font-size:1.5rem; }
p { margin:0 0 1rem; }
.lead { font-size:1.15rem; color:var(--taupe); }
.kicker { font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.34em; font-size:.72rem; color:var(--brass); margin:0 0 1.1rem; }
.serif { font-family:var(--serif); }
.muted { color:var(--taupe); }

/* ---- Layout ---- */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 1.6rem; }
section { padding:clamp(4rem,9vw,8rem) 0; position:relative; }
.center { text-align:center; }
.rule { width:64px; height:1px; background:var(--brass); border:0; margin:1.4rem auto; }
.rule.left { margin-left:0; }

/* ---- Decorative X motif (NOT the trademark mark) ---- */
.xmotif { display:inline-block; width:22px; height:22px; position:relative; opacity:.5; }
.xmotif::before,.xmotif::after { content:''; position:absolute; left:50%; top:0; width:1px; height:100%; background:var(--brass); }
.xmotif::before { transform:rotate(45deg); } .xmotif::after { transform:rotate(-45deg); }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--sans); font-weight:400;
  text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; padding:1rem 1.8rem; cursor:pointer;
  background:var(--espresso); color:var(--bone); border:1px solid var(--espresso); border-radius:2px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn:hover { background:var(--brass); border-color:var(--brass); color:var(--espresso); }
.btn.outline { background:transparent; color:currentColor; border-color:currentColor; }
.btn.outline:hover { background:var(--espresso); color:var(--bone); border-color:var(--espresso); }
.btn.on-dark.outline:hover { background:var(--bone); color:var(--espresso); border-color:var(--bone); }
.btn[disabled] { opacity:.45; cursor:not-allowed; }

/* ---- Nav ---- */
.nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.6rem; transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease); }
.nav.solid { background:rgba(251,249,243,.92); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); padding:.7rem 1.6rem; }
.nav .brand { display:flex; align-items:center; gap:.7rem; font-family:var(--serif); font-size:1.15rem; letter-spacing:.02em; }
.nav .brand img { width:34px; height:34px; }
.nav .links { display:flex; gap:2rem; align-items:center; }
.nav .links a { font-family:var(--sans); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:inherit; opacity:.85; transition:opacity .2s, color .2s; }
.nav .links a:hover { opacity:1; color:var(--brass); }
.nav.on-dark { color:var(--bone); }
.nav.on-dark.solid { color:var(--espresso); }
@media (max-width:760px){ .nav .links { display:none; } }

/* ---- Scroll reveal ---- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); will-change:opacity,transform; }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; } .reveal.d4 { transition-delay:.32s; }

/* ---- Event cards ---- */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.ecard { position:relative; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:1.7rem 1.6rem 1.5rem;
  display:flex; flex-direction:column; transform-style:preserve-3d; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  will-change:transform; }
.ecard:hover { box-shadow:0 24px 50px -28px rgba(34,29,23,.5); }
.ecard .type { font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; font-size:.66rem; color:var(--brass); }
.ecard h3 { margin:.5rem 0 .1rem; font-size:1.7rem; }
.ecard .when { font-family:var(--sans); font-size:.86rem; color:var(--taupe); }
.ecard .desc { margin:.9rem 0 1.2rem; font-size:.95rem; color:var(--espresso); opacity:.82; flex:1; }
.ecard .foot { display:flex; align-items:center; justify-content:space-between; padding-top:1rem; border-top:1px solid var(--line); }
.ecard .price { font-family:var(--serif); font-size:1.35rem; }
.ecard .left { font-family:var(--sans); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--brass); }
.ecard .left.out { color:#a85050; }

/* ---- Pills ---- */
.pill { display:inline-block; padding:.16rem .6rem; border-radius:999px; font-family:var(--sans); font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; }
.pill.sold_out { background:#f0e4c9; color:#8a6d1c; }

/* ---- Footer ---- */
.foot-wrap { background:var(--espresso); color:var(--bone); text-align:center; padding:4.5rem 1.6rem 3rem; }
.foot-wrap img { width:96px; margin:0 auto 1.4rem; }
.foot-wrap .wm { font-family:var(--serif); font-size:1.8rem; letter-spacing:.12em; }
.foot-wrap .meta { font-family:var(--sans); text-transform:uppercase; letter-spacing:.28em; font-size:.68rem; color:var(--brass-soft); margin-top:.8rem; }
.foot-wrap .fine { color:rgba(244,238,226,.5); font-size:.78rem; margin-top:2rem; }

/* ---- Forms ---- */
.field { margin:0 0 1rem; }
.field label { display:block; font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; color:var(--taupe); margin:0 0 .4rem; }
.field input, .field select, .field textarea { width:100%; font-family:var(--sans); font-size:1rem; padding:.8rem .9rem;
  border:1px solid var(--line); border-radius:3px; background:var(--paper); color:var(--espresso); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--brass); }
.msg { font-family:var(--sans); font-size:.9rem; color:var(--taupe); }
.msg.error { color:#a85050; } .msg.ok { color:#5a7d5a; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
}