/* Outrider — shared styles
   Dusk over open country: cool sky, warm ground, saddle-tan accent.
   Brand is blue so green/amber/rust mean condition state and nothing else. */

:root {
  --ground:#ECEBE6; --surface:#FBFAF7; --sunk:#F3F2ED;
  --ink:#16181B; --ink-2:#524C44; --ink-3:#6F6A5E;
  --line:#DCDAD3; --hair:#E7E5DE;
  --navy : #1B1712; --blue : #8A5A2B; --sky : #B07A3E;
  --blue-soft : #F3E9DC; --on-blue:#FFFFFF;
  --tan : #8A5A2B; --sand:#DDA05A;
  --good : #376E48; --warn : #875D13; --crit : #A04338;
  --lift:0 1px 2px rgba(30,26,20,.05), 0 14px 36px rgba(30,26,20,.09);
  --r:13px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground : #131110; --surface:#1C1C19; --sunk:#181815;
    --ink:#EDEBE4; --ink-2:#ABA9A0; --ink-3:#7A786F;
    --line:#2D2C26; --hair:#242320;
    --navy : #17150F; --blue : #EFC391; --sky : #F8DCB6;
    --blue-soft : #241E16; --on-blue : #17150F;
    --tan : #EFC391; --sand:#E2A961;
    --good:#6BA574; --warn:#C99B3E; --crit:#C36F58;
    --lift:0 1px 2px rgba(0,0,0,.5), 0 14px 36px rgba(0,0,0,.4);
  }
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}

/* ---------- site nav ----------
   Wordmark left, links right. Sits over the photo hero and stays put.
   Two tiers on purpose: the wordmark is branding, the links are navigation. */
.nav { position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:17px 24px;
  background:linear-gradient(to bottom, rgba(8,11,16,.72), rgba(8,11,16,0)); }

.nav .home { color:#fff; text-decoration:none; font-size:14px; font-weight:750;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
.nav .home:hover { color:var(--sand, #EFC391); }

.nav .links { display:flex; gap:22px; flex-wrap:wrap; justify-content:flex-end; }
.nav .links a { color:rgba(255,255,255,.72); text-decoration:none; font-size:15px;
  font-weight:520; letter-spacing:0; white-space:nowrap; }
.nav .links a:hover { color:#fff; }
.nav .links a.here { color:var(--tan); font-weight:640; }

@media (max-width:620px) {
  .nav { padding:13px 16px; gap:12px; }
  .nav .home { font-size:12.5px; letter-spacing:.16em; }
  .nav .links { gap:15px; }
  .nav .links a { font-size:14px; }
}

/* pages that don't open with a photo */
.nav.solid { position:sticky; background:var(--navy); }

.page { max-width:560px; margin:0 auto; background:var(--surface); min-height:100vh; }
@media (min-width:600px) {
  .page { margin:28px auto; min-height:0; border-radius:20px; overflow:hidden;
          box-shadow:var(--lift); }
}

/* The invite card's body, and ONLY the invite card's body. Left unscoped this
   collided with p.body - the copy class used on every marketing page - which does
   not declare display, so this flex-column won. Every strong, em, link and image
   inside those paragraphs was being put on its own line with an 18px gap. Scoped
   to .page, which is the invite shell in r.html and nothing else - no marketing
   page carries that class, so there is nothing else this can reach. Descendant
   rather than child, because the invite card is built by innerHTML and a wrapper
   getting added in there should not silently unstyle it. */
.page .body { padding:20px; display:flex; flex-direction:column; gap:18px; }

/* ---------- hero ---------- */
/* An invite is the first thing most people ever see of Outrider - it arrives as
   a link in a Facebook group from someone they trust. It gets a trail photo
   every time. If the trail has its own it wins; otherwise this one stands in,
   because a flat gradient makes a real ride look like a system notification. */
.hero { padding:130px 20px 20px; color:#fff; position:relative;
  background-color:#1B1712;
  background-image:url('/assets/img/meadow-creek.jpg');
  background-size:cover; background-position:center; }
.hero.has-photo { padding-top:130px; background-size:cover; background-position:center; }
.hero::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(18,28,40,.12) 30%, rgba(12,18,28,.84) 100%); }
.hero > * { position:relative; z-index:1; }
.hero .kick { font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:10px; letter-spacing:.2em; opacity:.72; margin:0; }
.hero h1 { font-size:26px; font-weight:700; letter-spacing:-.028em; line-height:1.1;
  margin:9px 0 5px; text-wrap:balance; }
.hero .when { font-size:14px; opacity:.9; margin:0; }

.byline { display:flex; align-items:center; gap:11px; padding:15px 20px;
  border-bottom:1px solid var(--hair); }
.byline p { margin:0; font-size:14px; color:var(--ink-2); }
.byline b { color:var(--ink); font-weight:640; }

.av { width:34px; height:34px; border-radius:99px; flex:none; display:grid;
  place-items:center; font-size:12px; font-weight:700; color:#fff;
  background:var(--blue); }

/* ---------- rsvp ---------- */
.rsvp { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.rsvp button { font:inherit; font-size:14.5px; font-weight:630; min-height:50px;
  border-radius:12px; border:none; background:var(--sunk); color:var(--ink-2);
  cursor:pointer; transition:background .12s, color .12s; }
.rsvp button:hover { background:var(--blue-soft); color:var(--ink); }
.rsvp button[aria-pressed="true"] { background:var(--blue); color:var(--on-blue); }
.rsvp button:focus-visible { outline:2px solid var(--tan); outline-offset:2px; }

.field { display:flex; flex-direction:column; gap:6px; }
.field label { font-size:12.5px; font-weight:640; color:var(--ink-2); }
.field input { font:inherit; font-size:16px; padding:13px 14px; border-radius:12px;
  border:1.5px solid var(--line); background:var(--sunk); color:var(--ink); width:100%; }
.field input:focus-visible { outline:2px solid var(--blue); outline-offset:1px;
  border-color:var(--blue); }

.field .opt { font-weight:500; color:var(--ink-3); }
.micro { margin:2px 0 0; font-size:12px; line-height:1.45; color:var(--ink-3); }

/* How many of you. Asking this in one tap is the difference between a headcount
   and a guess - party_size used to be hard-coded to 1. */
.party { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.party button { font:inherit; font-size:15px; font-weight:640; min-height:46px;
  border-radius:12px; border:1.5px solid var(--line); background:var(--sunk);
  color:var(--ink-2); cursor:pointer; font-variant-numeric:tabular-nums; }
.party button:hover { border-color:var(--blue); color:var(--ink); }
.party button[aria-pressed="true"] { background:var(--blue); border-color:var(--blue);
  color:var(--on-blue); }
.party button:focus-visible { outline:2px solid var(--tan); outline-offset:2px; }

/* Reads as a link, behaves as a button. Used for "change your answer", which
   replaced telling people to go and text the organizer. */
.linkish { font:inherit; font-size:14px; font-weight:620; padding:6px 0; margin-top:4px;
  background:none; border:none; color:var(--blue); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; }
.linkish:hover { color:var(--ink); }
.linkish:focus-visible { outline:2px solid var(--tan); outline-offset:2px; }

.going { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-3);
  flex-wrap:wrap; }
.going b { color:var(--ink-2); font-weight:640; }

/* ---------- stats ---------- */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--hair); border-radius:12px; overflow:hidden; }
.stat { background:var(--surface); padding:12px 8px; text-align:center; }
.stat .k { font-size:10px; color:var(--ink-3); font-weight:640; letter-spacing:.04em; }
.stat .v { font-size:17px; font-weight:670; margin-top:3px; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.stat .v small { font-size:11.5px; color:var(--ink-3); font-weight:500; }

.desc { margin:0; font-size:15px; line-height:1.6; color:var(--ink-2);
  white-space:pre-wrap; }

/* ---------- blocks ---------- */
.blk { }
.blk h2 { font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); font-weight:650; margin:0 0 10px; }
.kv { display:flex; gap:12px; padding:7px 0; font-size:15px; }
.kv .k { color:var(--ink-3); width:88px; flex:none; }
.kv .v { flex:1; }
.kv .v em { font-style:normal; font-weight:640; color:var(--good); }
.kv .v em.w { color:var(--warn); }
.kv .v em.c { color:var(--crit); }

.callout { background:var(--blue-soft); border-radius:12px; padding:13px 15px;
  font-size:14.5px; color:var(--ink-2); }
.callout b { color:var(--ink); font-weight:650; display:block; margin-bottom:4px; }

.locked { background:var(--sunk); border-radius:12px; padding:13px 15px;
  font-size:13.5px; color:var(--ink-3); }
.locked b { color:var(--ink-2); font-weight:640; }

.btn { font:inherit; font-size:15.5px; font-weight:650; min-height:52px; width:100%;
  border:none; border-radius:13px; background:var(--blue); color:var(--on-blue);
  cursor:pointer; display:grid; place-items:center; text-decoration:none; }
.btn:hover { filter:brightness(1.09); }
.btn:focus-visible { outline:2px solid var(--tan); outline-offset:2px; }
.btn.ghost { background:var(--sunk); color:var(--ink-2); }
.btn.ghost:hover { background:var(--blue-soft); color:var(--ink); filter:none; }
.btn[disabled] { opacity:.5; cursor:default; filter:none; }

.foot { padding:22px 20px 28px; border-top:1px solid var(--hair);
  font-size:12.5px; color:var(--ink-3); text-align:center; }
.foot a { color:var(--ink-2); }

/* ---------- states ---------- */
.state { padding:64px 26px; text-align:center; }
.state h2 { font-size:20px; font-weight:680; margin:0 0 8px; letter-spacing:-.02em; }
.state p { margin:0; color:var(--ink-3); font-size:15px; }
.spinner { width:26px; height:26px; margin:0 auto 18px; border-radius:99px;
  border:3px solid var(--line); border-top-color:var(--blue);
  animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; }
  .spinner { border-top-color:var(--line); }
}

/* ---------------------------------------------------------------- Nuggs
   The pile shows up wherever the copy reminds somebody to pick up after their
   horse, and nowhere else - he is a reminder, not a decoration. Sized in em so
   he tracks the text he sits in, whether that is 10.5px inside a phone mockup
   or 17px in body copy. aria-hidden because the sentence already says it.

   display:inline-block is not redundant. An img is inline by default, but several
   page-level rules on this site set images to block, and a block image dropped
   into a sentence puts itself on its own line - which is exactly what happened
   the first time. Stating it here keeps him in the run of text wherever he goes. */
.nuggs { display:inline-block; height:1.15em; width:auto; vertical-align:-.2em;
  margin:0 .1em; }