/* ============================================================================
   BRACE — The Modern Shooting Log
   Built to the brand bible. Every value below comes from it; nothing is
   invented. One accent (clay), one family (Inter), charcoal ramp for
   elevation, hairlines instead of shadows, no cards by reflex.
   ========================================================================== */
:root{
  --bg-sunken:#1F2120; --bg:#2A2C29; --bg-raised:#33352F; --bg-raised2:#3C3E37;
  --clay:#F05A28; --clay-dim:#C24A22; --ink-on-clay:#1A1109;
  --text-1:rgba(255,255,255,.95); --text-2:rgba(255,255,255,.64); --text-3:rgba(255,255,255,.40);
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --tiffany:#4ECDC4; --ink-on-tiffany:#08201E;
  --champagne:#CBBE93; --ink-on-champagne:#241E10;
  --panel:#FFFFFF; --panel-ink:#141614; --panel-ink-soft:rgba(20,22,20,.64);
  --destructive:#E0705F; --hit:#6FBE72; --chart-miss:#E0705F;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  /* Where the clay sits inside the wordmark artwork, as a % of its box.
     The splash smokes it out from exactly here — see assets/brand/README.md. */
  --dot-x:48.7%; --dot-y:64.3%;

  --spring:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html,body{height:100%}
html{background:var(--bg)}
body{
  color:var(--text-1);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;                       /* one viewport — nothing scrolls */
}
img,svg{display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input{font:inherit}
:focus-visible{outline:2px solid var(--clay); outline-offset:3px}

.num{font-variant-numeric:tabular-nums}
.label,.chip{
  font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}
/* Actions are imperative caps (bible §8), at Small — not at Label size. */
.btn-primary,.btn-ghost,.link{
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================================
   SPLASH
   The bible's reference: the wordmark lands, the clay holds, then smokes to
   powder. Opacity and transform only, spring curves, nothing over ~700ms.
   ========================================================================== */
.splash{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:grid; place-items:center;
  animation:splashOut .5s var(--spring) 2.02s forwards;
}
.splash-lockup{ position:relative; width:min(74vw,520px) }
.splash-wm{
  width:100%; height:auto;
  opacity:0; animation:land .62s var(--spring) .12s forwards;
}
@keyframes land{
  from{ opacity:0; transform:translateY(14px) scale(.985) }
  to  { opacity:1; transform:none }
}

/* the clay goes to powder — cover erases it from the artwork as it disperses */
.dot-cover{
  position:absolute; left:var(--dot-x); top:var(--dot-y);
  width:4.9%; aspect-ratio:1; margin:-2.45% 0 0 -2.45%;
  border-radius:50%; background:var(--bg); opacity:0;
  animation:cover .18s linear 1.3s forwards;
}
@keyframes cover{ to{ opacity:1 } }

.powder{ position:absolute; left:var(--dot-x); top:var(--dot-y) }
.grain{
  position:absolute; left:0; top:0;
  width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius:50%; opacity:0;
  animation:smoke var(--gt) var(--spring) calc(1.28s + var(--gd)) forwards;
}
@keyframes smoke{
  0%  { opacity:.72; transform:translate(0,0) scale(1) }
  55% { opacity:.42 }
  100%{ opacity:0;   transform:translate(var(--tx),var(--ty)) scale(.42) }
}
@keyframes splashOut{ to{ opacity:0; visibility:hidden } }
body.splash-done .splash{ display:none }

/* ============================================================================
   PAGE
   ========================================================================== */
.page{
  height:100dvh; min-height:100dvh;
  display:flex; flex-direction:column; background:var(--bg);
  opacity:0; animation:pageIn .5s var(--spring) 2.1s forwards;
}
body.splash-done .page{ opacity:1; animation:none }
@keyframes pageIn{ from{opacity:0} to{opacity:1} }

.bar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:20px clamp(20px,3.5vw,48px);
}
/* clear space around the mark is at least the diameter of the clay */
.brand{ display:flex; align-items:center; padding:6px }
.brand-mark{ width:auto; height:clamp(26px,3.2vh,34px) }

.bar-actions{ display:flex; align-items:center; gap:12px; flex:0 0 auto }
.link{ color:var(--text-2); padding:8px 4px; transition:color .18s var(--spring) }
.link:hover{ color:var(--text-1) }

.bar-foot{ border-top:1px solid var(--line) }
.legal,.foot-links{ font-size:13px; color:var(--text-3) }
.foot-links{ display:flex; gap:20px; flex:0 0 auto }
.foot-links a{ transition:color .18s var(--spring) }
.foot-links a:hover{ color:var(--text-2) }

/* -- buttons -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap; border-radius:var(--r-lg); padding:14px 22px;
  transition:background .18s var(--spring), border-color .18s var(--spring), opacity .18s;
}
.btn-primary{ background:var(--clay); color:var(--ink-on-clay) }
.btn-primary:hover{ background:var(--clay-dim) }
.btn-ghost{
  border:1px solid var(--line-strong); color:var(--text-1); padding:10px 16px;
}
.btn-ghost:hover{ border-color:var(--text-3) }
.btn[disabled]{ opacity:.55; cursor:default }

/* -- hero: the mark, the line, the invitation -- */
.hero{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 20px; gap:28px;
}
/* The hero line sits at the bible's Hero-figure step (64/67) rather than
   Display, since it is the only large element on the page. Inter Medium. */
.strap{
  font-size:clamp(30px, 7vh, 64px); line-height:1.05; font-weight:500;
  letter-spacing:-.024em; color:var(--text-1);
}

.capture{ display:flex; gap:12px; width:100%; max-width:440px }
.capture input{
  flex:1 1 auto; min-width:0; padding:14px 18px;
  border-radius:var(--r-lg); background:var(--bg-raised);
  border:1px solid var(--line-strong); color:var(--text-1);
}
.capture input::placeholder{ color:var(--text-3) }
.capture-note{ font-size:13px; color:var(--destructive) }
.capture-ok{ display:none; font-size:13px; color:var(--text-2) }
.capture-ok.show{ display:block }

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line); color:var(--text-3);
}
.pip{ width:6px; height:6px; border-radius:50%; background:var(--clay) }

/* -- narrow / short viewports -- */
@media (max-width:620px){
  .bar{ padding:16px 20px }
  .capture{ flex-direction:column }
  .capture .btn{ width:100% }
  .hero{ gap:24px }
  .foot-links{ gap:16px }
  .legal,.foot-links{ font-size:13px }
}
@media (max-height:560px){ .chip{ display:none } .hero{ gap:20px } }

/* -- reduced motion: a composed static frame, never a half-played animation -- */
@media (prefers-reduced-motion:reduce){
  .splash{ display:none }
  .page{ opacity:1; animation:none }
  .splash-wm,.dot-cover,.grain{ animation:none }
  .splash-wm{ opacity:1 }
}