/* =========================================================
   Colt 1911 USA 250th Benefit Drawing
   Heritage-military commemorative. Mobile-first (390px base).
   ========================================================= */

:root{
  --ink:#0e1013; --ink-2:#14171c; --panel:#1a1e24; --panel-2:#22272f;
  --hair:rgba(200,162,74,.18); --bone:#ece6d8; --muted:#9aa1ab;
  --gold:#c8a24a; --gold-bright:#e2c06a; --oxblood:#7c1a24; --steel-blue:#2b3a5a;

  --plate-cream:#efe9dc;      /* museum plate that swallows white photo bg */
  --plate-cream-2:#e5ddcb;
  --shadow: 0 24px 60px -24px rgba(0,0,0,.85);
  --font-display:"Saira Condensed", sans-serif;
  --font-body:"Plus Jakarta Sans", sans-serif;
  --font-mono:"IBM Plex Mono", monospace;
  --maxw:560px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:
    radial-gradient(120% 80% at 50% -10%, #171b21 0%, var(--ink) 55%, #090a0c 100%);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:16px; line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--gold-bright); text-decoration:none; }
a:hover{ color:var(--gold); }

/* ---------- atmosphere: film grain + vignette ---------- */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 30%, transparent 55%, rgba(0,0,0,.55) 100%);
}
main, .topbar, .foot{ position:relative; z-index:2; }

/* ---------- shared type / helpers ---------- */
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.gold{ color:var(--gold-bright); }
.eyebrow, .section-eyebrow, .brandmark__eyebrow, .foot__eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.68rem;
  color:var(--gold);
}
.section-title{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.01em;
  font-size:clamp(1.9rem, 8vw, 2.6rem);
  line-height:.98;
  margin:.35rem 0 .9rem;
  color:var(--bone);
}
.section-eyebrow{
  display:flex; align-items:center; gap:.6rem; margin:0;
}
.tick{
  width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--gold));
  display:inline-block;
}
.star{ color:var(--gold); font-size:.7em; vertical-align:.15em; }

/* ---------- layout wrappers ---------- */
main > section{
  padding:2.6rem 1.25rem;
  max-width:var(--maxw);
  margin:0 auto;
}

/* gold hairline divider */
.rule{ max-width:var(--maxw); margin:0 auto; padding:0 1.25rem; }
.rule span{
  display:block; height:1px;
  background:linear-gradient(90deg,transparent, var(--hair) 12%, var(--gold) 50%, var(--hair) 88%, transparent);
  opacity:.7;
}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.9rem 1.25rem;
  max-width:var(--maxw); margin:0 auto;
  border-bottom:1px solid var(--hair);
}
.brandmark{ display:flex; flex-direction:column; line-height:1.1; }
.brandmark__eyebrow{ font-size:.55rem; letter-spacing:.24em; }
.brandmark__name{
  font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; font-size:.95rem;
  color:var(--bone);
}
.topbar__loc{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); text-align:right;
}

/* ================= HERO ================= */
.hero{ padding-top:2.2rem !important; padding-bottom:1.4rem !important; text-align:center; }
.hero__inner{ display:flex; flex-direction:column; align-items:center; }
.hero .eyebrow{ letter-spacing:.24em; }
.hero__title{
  font-family:var(--font-display); font-weight:800;
  text-transform:uppercase; letter-spacing:.005em;
  font-size:clamp(2.7rem, 15vw, 4.4rem);
  line-height:.9; margin:.6rem 0 .5rem;
  text-shadow:0 2px 30px rgba(0,0,0,.6);
}
.hero__title-sm{
  display:block;
  font-family:var(--font-body); font-weight:600;
  text-transform:uppercase; letter-spacing:.22em;
  font-size:.66rem; color:var(--muted);
  margin-bottom:.7rem;
}
.hero__sub{
  color:var(--muted); max-width:34ch; margin:.2rem auto 1.4rem;
  font-size:1rem;
}

/* museum plate that dissolves the white product-photo background */
.plate{
  position:relative;
  background:linear-gradient(160deg, var(--plate-cream), var(--plate-cream-2));
  border:1px solid var(--gold);
  border-radius:3px;
  padding:1.1rem 1rem;
  box-shadow:var(--shadow), inset 0 0 0 4px rgba(255,255,255,.35);
  width:100%;
}
.plate::after{ /* thin inner gold keyline */
  content:""; position:absolute; inset:6px; border:1px solid rgba(124,26,36,.28);
  border-radius:2px; pointer-events:none;
}
.plate img{ mix-blend-mode:multiply; width:100%; height:auto; }
.plate--hero{ margin:.2rem 0 1.2rem; }
.plate--detail{ max-width:280px; margin:1.4rem auto .4rem; padding:1rem .9rem 1.4rem; }
.plate--detail img{ max-height:60vh; width:auto; margin:0 auto; }
.plate figcaption{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.18em;
  font-size:.58rem; color:var(--oxblood); text-align:center;
  margin-top:.7rem; opacity:.85;
}
/* engraved corner brackets */
.plate__corner{ position:absolute; width:14px; height:14px; z-index:2; }
.plate__corner--tl{ top:3px; left:3px; border-top:2px solid var(--gold); border-left:2px solid var(--gold); }
.plate__corner--tr{ top:3px; right:3px; border-top:2px solid var(--gold); border-right:2px solid var(--gold); }
.plate__corner--bl{ bottom:3px; left:3px; border-bottom:2px solid var(--gold); border-left:2px solid var(--gold); }
.plate__corner--br{ bottom:3px; right:3px; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold); }

.hero__meta{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:1.4rem; }
.pill{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; padding:.42rem .7rem; border-radius:2px;
  border:1px solid var(--hair); color:var(--muted); background:rgba(255,255,255,.02);
}
.pill b{ color:var(--bone); font-weight:600; }
.pill--exclusive{ color:var(--gold-bright); border-color:rgba(200,162,74,.4); }

/* ================= CTA ================= */
.cta{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem; width:100%; min-height:60px;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; font-size:1.25rem;
  color:#211a08; text-align:center; cursor:pointer;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, #a9863a);
  border:1px solid var(--gold-bright);
  border-radius:4px; padding:.85rem 1.2rem;
  box-shadow:0 10px 30px -10px rgba(200,162,74,.5), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .18s ease, box-shadow .25s ease, filter .2s ease;
  position:relative; overflow:hidden;
}
.cta::before{ /* sheen swipe on hover */
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); transition:left .55s ease;
}
.cta:hover::before{ left:130%; }
.cta:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(200,162,74,.6), inset 0 1px 0 rgba(255,255,255,.6); }
.cta:active{ transform:translateY(0); }
.cta__note, .cta__label{ position:relative; z-index:1; }
.cta__note{
  font-family:var(--font-mono); font-weight:500; font-size:.6rem;
  letter-spacing:.16em; color:rgba(33,26,8,.8); text-transform:uppercase;
}
.cta--hero{ max-width:340px; }
.cta--submit{ margin-top:.4rem; }
.cta[disabled]{ filter:grayscale(.35) brightness(.85); cursor:progress; }

/* ================= GOAL / METER ================= */
.goal__lead, .pistol__lead, .enter__lead, .cause__intro{
  color:var(--muted); font-size:1.02rem; margin:.2rem 0 1.4rem; max-width:42ch;
}
.goal__lead b{ color:var(--bone); }

.meter{
  background:linear-gradient(180deg, var(--panel), var(--ink-2));
  border:1px solid var(--hair); border-radius:6px;
  padding:1.1rem 1.15rem 1.2rem; box-shadow:var(--shadow);
}
.meter__row{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin-bottom:.7rem; }
.meter__raised{
  font-family:var(--font-display); font-weight:800; font-size:2.2rem;
  color:var(--gold-bright); letter-spacing:.01em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.meter__goal{ font-family:var(--font-mono); font-size:.72rem; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.meter__goal span{ color:var(--bone); }
.meter__track{
  height:12px; border-radius:20px; overflow:hidden;
  background:#0a0c0f; border:1px solid rgba(0,0,0,.6);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7);
}
.meter__fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--oxblood), var(--gold) 55%, var(--gold-bright));
  border-radius:20px;
  transition:width 1.4s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 0 12px rgba(200,162,74,.55);
}
.meter__pct{
  margin-top:.6rem; font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:1rem; }
.stat{
  background:rgba(255,255,255,.02); border:1px solid var(--hair);
  border-radius:5px; padding:.85rem .5rem; text-align:center;
}
.stat__num{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:1.65rem; color:var(--bone); line-height:1; font-variant-numeric:tabular-nums;
}
.stat__label{
  display:block; margin-top:.35rem; font-family:var(--font-mono);
  font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

/* ================= CAUSE / MARINE ================= */
.cause__card{
  position:relative; background:linear-gradient(180deg, var(--panel), var(--ink-2));
  border:1px solid var(--hair); border-left:3px solid var(--oxblood);
  border-radius:6px; padding:1.6rem 1.25rem 1.25rem; box-shadow:var(--shadow);
}
.cause__emblem{
  position:absolute; top:-14px; left:1.15rem; width:30px; height:30px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--ink); border:1px solid var(--gold); color:var(--gold);
  font-size:.85rem;
}
.cause__intro{ margin-top:.3rem; color:var(--bone); font-style:italic; }
.marine-story{
  color:var(--muted); border-top:1px dashed var(--hair);
  padding-top:1rem; margin-top:1rem; font-size:.98rem;
}
.cause__foot{
  margin:1rem 0 0; font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}

/* ================= STEPS ================= */
.steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.step{
  display:flex; gap:1rem; align-items:flex-start;
  background:linear-gradient(180deg, var(--panel), var(--ink-2));
  border:1px solid var(--hair); border-radius:6px; padding:1rem 1.1rem;
}
.step__num{
  font-family:var(--font-display); font-weight:800; font-size:1.9rem;
  color:transparent; -webkit-text-stroke:1px var(--gold); line-height:.9;
  min-width:1.7em; text-align:center;
}
.step__body h3{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:1.15rem; margin:.1rem 0 .2rem; color:var(--bone);
}
.step__body p{ margin:0; color:var(--muted); font-size:.94rem; }
.step__body b{ color:var(--bone); }
.step__body .mono{ color:var(--gold); font-size:.85em; }

/* ================= SPEC ================= */
.spec{
  margin:1.2rem 0 0; padding:0;
  border:1px solid var(--hair); border-radius:6px; overflow:hidden;
  background:linear-gradient(180deg, var(--panel), var(--ink-2));
}
.spec__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.72rem 1.05rem; border-bottom:1px solid var(--hair);
}
.spec__row:last-child{ border-bottom:0; }
.spec__row dt{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.spec__row dd{ margin:0; font-weight:600; color:var(--bone); text-align:right; }
.spec__row--hi{ background:rgba(200,162,74,.06); }
.spec__row--hi dt{ color:var(--gold); }
.spec__row--hi dd{ color:var(--gold-bright); font-family:var(--font-display); font-size:1.2rem; font-weight:800; }

/* ================= ENTRY FORM ================= */
.formwrap{ position:relative; }
.form{
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--gold); border-radius:8px;
  padding:1.3rem 1.15rem 1.4rem;
  box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.02);
}
.field{ margin-bottom:.95rem; }
.field label{
  display:block; font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  margin-bottom:.4rem;
}
.field input{
  width:100%; min-height:52px; padding:.75rem .9rem;
  background:#0b0d10; color:var(--bone);
  border:1px solid var(--hair); border-radius:5px;
  font-family:var(--font-body); font-size:1.02rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input::placeholder{ color:#5c626c; }
.field input:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,162,74,.18);
}
.field input:invalid:not(:placeholder-shown){ border-color:rgba(124,26,36,.7); }

/* custom checkboxes with big tap targets */
.check{
  display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start;
  padding:.7rem .2rem; cursor:pointer; color:var(--muted); font-size:.86rem; line-height:1.45;
}
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  width:24px; height:24px; margin-top:1px; border:1px solid var(--gold);
  border-radius:4px; background:#0b0d10; position:relative; flex:none;
  transition:background .15s ease, box-shadow .2s ease;
}
.check__box::after{
  content:""; position:absolute; left:8px; top:3px; width:6px; height:12px;
  border:solid var(--ink); border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(0); transition:transform .15s ease;
}
.check input:checked + .check__box{ background:var(--gold-bright); }
.check input:checked + .check__box::after{ transform:rotate(45deg) scale(1); }
.check input:focus-visible + .check__box{ box-shadow:0 0 0 3px rgba(200,162,74,.3); }
.check__text a{ text-decoration:underline; }

.form__error{
  margin:.4rem 0 .2rem; padding:.7rem .85rem;
  background:rgba(124,26,36,.18); border:1px solid rgba(124,26,36,.6);
  border-radius:5px; color:#f0c9cd; font-size:.85rem;
}
.form__fineprint{
  margin:.9rem 0 0; text-align:center; color:var(--muted); font-size:.72rem;
}
.form__fineprint a{ text-decoration:underline; }

/* ---- confirmation state ---- */
.confirm{
  text-align:center; padding:2rem 1.25rem 2.2rem;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--gold); border-radius:8px; box-shadow:var(--shadow);
  animation:confirmIn .5s ease both;
}
.seal{ width:96px; height:96px; margin:0 auto 1rem; }
.seal svg{ width:100%; height:100%; }
.seal__ring{ fill:none; stroke:var(--gold); stroke-width:1.5; opacity:.5; }
.seal__ring--in{ opacity:.9; stroke-width:2; }
.seal__check{
  fill:none; stroke:var(--gold-bright); stroke-width:6;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:80; stroke-dashoffset:80;
  animation:draw .7s .2s ease forwards;
}
.confirm__title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; font-size:2rem; margin:.2rem 0 .5rem; color:var(--gold-bright);
}
.confirm__msg{ color:var(--bone); margin:0 auto; max-width:32ch; }
.confirm__foot{
  margin-top:1.1rem; font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes confirmIn{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }

/* ================= FOOTER ================= */
.foot{ max-width:var(--maxw); margin:0 auto; padding:2rem 1.25rem 3rem; text-align:center; }
.foot__rule{ height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.5; margin-bottom:1.6rem; }
.foot__brand{ display:flex; flex-direction:column; gap:.15rem; margin:0 0 1.2rem; }
.foot__eyebrow{ font-size:.55rem; }
.foot__name{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:1.1rem; color:var(--bone);
}
.foot__loc{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.fineprint{ color:#6b7079; font-size:.68rem; line-height:1.6; margin:0 auto; max-width:48ch; }
.fineprint a{ color:var(--muted); text-decoration:underline; }
.fineprint--copy{ margin-top:1rem; font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase; font-size:.58rem; }

/* ================= REVEAL ANIMATIONS ================= */
.reveal, .reveal-on-scroll{ opacity:0; transform:translateY(18px); }
.reveal.is-in, .reveal-on-scroll.is-in{
  opacity:1; transform:none;
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
/* staggered hero load */
.reveal[data-delay="0"].is-in{ transition-delay:.05s; }
.reveal[data-delay="1"].is-in{ transition-delay:.15s; }
.reveal[data-delay="2"].is-in{ transition-delay:.28s; }
.reveal[data-delay="3"].is-in{ transition-delay:.42s; }
.reveal[data-delay="4"].is-in{ transition-delay:.56s; }
.reveal[data-delay="5"].is-in{ transition-delay:.72s; }
.reveal[data-delay="6"].is-in{ transition-delay:.86s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal, .reveal-on-scroll{ opacity:1; transform:none; }
  .meter__fill{ transition:none; }
}

/* ================= DESKTOP ENHANCE ================= */
@media (min-width:720px){
  :root{ --maxw:960px; }
  body{ font-size:17px; }
  main > section{ padding:4rem 2rem; }
  .rule, .topbar, .foot{ padding-left:2rem; padding-right:2rem; }

  .hero{ padding-top:3.5rem !important; }
  .hero__inner{
    display:grid; grid-template-columns:1fr 1fr; gap:2.5rem;
    align-items:center; text-align:left;
  }
  .hero .eyebrow{ grid-column:1; }
  .hero__title{ grid-column:1; font-size:clamp(3.4rem,6vw,5rem); }
  .hero__sub{ grid-column:1; margin-left:0; }
  .hero__meta{ grid-column:1; justify-content:flex-start; }
  .cta--hero{ grid-column:1; align-self:start; }
  .plate--hero{
    grid-column:2; grid-row:1 / span 6; align-self:center; margin:0;
  }

  .stats{ gap:1rem; }
  .plate--detail{ max-width:320px; }

  /* two-column spec on desktop */
  .spec{ display:grid; grid-template-columns:1fr 1fr; }
  .spec__row:nth-last-child(2){ border-bottom:0; }
  .spec__row--hi{ grid-column:1 / -1; }

  .steps{ display:grid; grid-template-columns:1fr 1fr; }
  .formwrap{ max-width:560px; margin:0 auto; }
}