/* American Wetware — Events site brand stylesheet
   Palette + typography per aww-style-guide-v2 (vintage biological, high contrast).
   Fonts self-hosted under /assets/fonts (Barlow display, Inter body). */

/* ---------- Fonts ---------- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/inter/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/barlow/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/barlow/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/barlow/barlow-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/barlow/barlow-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../fonts/barlow/barlow-latin-900-normal.woff2') format('woff2'); }

/* ---------- Palette ---------- */
:root{
  --core-red:#CA1E08; --core-white:#FBFFF6; --core-midnight:#1C1E35;
  --core-green:#2FBF39; --core-yellow:#FFFF77; --core-periwinkle:#D1DCFF;
  --forest-deep:#1A5C1E; --fern-shade:#248A28; --spring-light:#6FD877;
  --mint-tint:#B8EDB9; --pale-mint:#E3F7E3;
  --navy-vintage:#2D3E6B; --slate-blue:#5B6FA8; --periwinkle-mid:#8BA0D6;
  --powder-blue:#E8EEFF; --charcoal:#3D3D52; --slate-gray:#6B6B7C;
  --silver-mid:#A8A8B5; --dove-gray:#D4D4DC; --whisper-gray:#EFEFF3;
  --parchment:#E5D4D1; --soil-brown:#6B4423; --cream-light:#FFFFBB;

  --bg:var(--core-white); --ink:var(--core-midnight); --ink-2:var(--charcoal);
  --accent:var(--core-green); --link:var(--periwinkle-mid);
  --border:var(--dove-gray); --border-strong:var(--charcoal);
  --radius:14px; --maxw:720px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.6;
  /* subtle vintage-biological green wash */
  background-image:linear-gradient(180deg, rgba(227,247,227,.55) 0%, rgba(251,255,246,0) 420px);
  background-repeat:no-repeat;
}
h1,h2,h3,.wordmark,.eyebrow,.btn,.label{font-family:'Barlow',system-ui,sans-serif}
h1{font-weight:900; font-size:clamp(2.1rem,6vw,3.2rem); line-height:1.05; letter-spacing:-.01em; margin:.2em 0 .3em}
h2{font-weight:800; font-size:1.5rem; margin:2rem 0 .6rem}
h3{font-weight:700; font-size:1.15rem; margin:1.4rem 0 .4rem}
p{margin:.6em 0}
a{color:var(--navy-vintage); text-decoration-color:var(--periwinkle-mid); text-underline-offset:2px}
a:hover{color:var(--fern-shade)}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Header / wordmark ---------- */
.site-header{padding:22px 0 6px}
.wordmark{font-weight:900; font-size:1.15rem; letter-spacing:.02em; color:var(--core-midnight);
  text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; gap:.5ch}
.wordmark .dot{color:var(--core-green)}

/* ---------- Hero ---------- */
.hero{padding:18px 0 8px}
.eyebrow{display:inline-block; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  font-size:.8rem; color:var(--fern-shade); background:var(--pale-mint);
  padding:5px 12px; border-radius:999px; border:1px solid var(--mint-tint)}
.hero .subtitle{font-size:1.15rem; color:var(--ink-2); margin-top:.2em}

/* ---------- Event facts card ---------- */
.facts{display:grid; grid-template-columns:auto 1fr; gap:10px 16px; align-items:baseline;
  background:var(--whisper-gray); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; margin:22px 0}
.facts dt{font-family:'Barlow',sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:.78rem; color:var(--slate-gray); white-space:nowrap}
.facts dd{margin:0; font-weight:500}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5ch;
  font-weight:800; font-size:1rem; text-transform:uppercase; letter-spacing:.03em;
  padding:13px 22px; border-radius:12px; border:2px solid transparent; cursor:pointer;
  text-decoration:none; transition:transform .05s ease, background .15s ease, box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--core-green); color:var(--core-midnight); border-color:var(--forest-deep)}
.btn-primary:hover{background:var(--spring-light); color:var(--core-midnight)}
.btn-secondary{background:transparent; color:var(--navy-vintage); border-color:var(--navy-vintage)}
.btn-secondary:hover{background:var(--powder-blue)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin:14px 0}

/* ---------- Calendar links ---------- */
.cal-links{display:flex; flex-wrap:wrap; gap:14px; font-size:.92rem; margin:8px 0 4px}
.cal-links a{font-family:'Barlow',sans-serif; font-weight:700; color:var(--navy-vintage)}

/* ---------- RSVP form ---------- */
.rsvp{background:var(--core-white); border:2px solid var(--border-strong); border-radius:var(--radius);
  padding:24px; margin:26px 0}
.rsvp h2{margin-top:0}
.field{margin:14px 0}
.field label{display:block; font-family:'Barlow',sans-serif; font-weight:700; font-size:.9rem;
  text-transform:uppercase; letter-spacing:.05em; color:var(--charcoal); margin-bottom:5px}
.field input, .field textarea, .field select{
  width:100%; font-family:'Inter',sans-serif; font-size:1rem; color:var(--ink);
  padding:11px 13px; border:1.5px solid var(--silver-mid); border-radius:10px; background:var(--core-white)}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--core-green); box-shadow:0 0 0 3px rgba(47,191,57,.18)}
.field textarea{min-height:80px; resize:vertical}
.choice-row{display:flex; gap:10px; flex-wrap:wrap}
.choice{flex:1 1 90px}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice span{display:block; text-align:center; font-family:'Barlow',sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; padding:12px; border:2px solid var(--silver-mid);
  border-radius:10px; cursor:pointer; transition:all .12s}
.choice input:checked + span{border-color:var(--forest-deep); background:var(--pale-mint); color:var(--forest-deep)}
.choice input:focus-visible + span{box-shadow:0 0 0 3px rgba(47,191,57,.25)}
.form-status{margin-top:12px; font-weight:500; min-height:1.4em}
.form-status.ok{color:var(--fern-shade)}
.form-status.err{color:var(--core-red)}

/* ---------- Placeholder marker (visible during build) ---------- */
.ph{background:var(--core-yellow); color:var(--core-midnight); padding:0 4px; border-radius:3px;
  font-weight:600; box-decoration-break:clone; -webkit-box-decoration-break:clone}

/* ---------- Pre-launch gate ---------- */
/* Hide page content until unlocked (set on <html> inline in <head> to avoid flash). */
html.gated body > *:not(#gate){ display:none !important; }
#gate{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--core-white);
  background-image:linear-gradient(180deg, rgba(227,247,227,.55) 0%, rgba(251,255,246,0) 420px);
}
.gate-card{
  width:100%; max-width:420px; background:var(--core-white);
  border:2px solid var(--border-strong); border-radius:var(--radius); padding:28px 26px;
}
.gate-card h1{font-size:clamp(1.8rem,7vw,2.4rem); margin:.3em 0 .2em}
.gate-card p{color:var(--ink-2)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border); margin-top:48px; padding:24px 0 40px;
  color:var(--slate-gray); font-size:.88rem}
.site-footer a{color:var(--slate-gray)}

/* ---------- Responsive ---------- */
@media (max-width:520px){
  .facts{grid-template-columns:1fr; gap:2px 0}
  .facts dd{margin-bottom:10px}
  body{font-size:16px}
}