/* Outrider — the house style, taken from V3.
   Dark ground, full-bleed photography, type over image.
   Loaded AFTER style.css. Marketing pages use this; the invite page (r.html)
   deliberately stays light — it's a utility read in daylight, not a pitch. */

:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --ink-0        : #F1EDE5;      /* page ground */
  --ink-1        : #E9E3D8;      /* deeper, for footers */
  --sand         : #EFC391;       /* the one warm accent */
  --sand-hi:#F8DCB6;
  --fg           : #17150F;
  --fg-2         : #5F584E;
  --fg-3         : #6F6A5E;
  --hair-w       : rgba(0,0,0,.10);

  /* Re-point the shared tokens from style.css at dark values. This is what makes
     a page go dark wholesale: every rule already written as var(--surface),
     var(--ink-2) and so on follows automatically, with no per-page edits. */
  --ground       : #F1EDE5;
  --surface      : #FAF8F4;
  --sunk         : #E9E3D8;
  --ink          : #17150F;
  --ink-2        : #5F584E;
  --ink-3        : #6F6A5E;
  --line         : #E0D9CD;
  --hair         : #EAE4D9;
  --blue-soft    : #F3E9DC;
  --blue         : #8A5A2B;
  --on-blue      : #FFFFFF;
  --tan          : #8A5A2B;
  --navy         : #17150F;
  --good         : #376E48;
  --warn         : #875D13;
  --crit         : #A04338;
  --lift         : 0 1px 2px rgba(30,26,20,.05), 0 16px 40px rgba(30,26,20,.10);
}

/* section grounds, so pages that use plain <section> go dark too */
section { background:var(--ground); }
section.alt { background:var(--surface); }

body { background:var(--ink-0); color:var(--fg); overflow-x:hidden; }

.wrap { max-width:1000px; margin:0 auto; padding:0 26px; }
.narrow { max-width:660px; }


/* ---------- full-bleed photo panel ---------- */
.panel { position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; }
.panel.short { min-height:min(660px,84vh); }
.panel > img, .panel > .bg { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background-size:cover; background-position:center 46%; }
.panel::after { content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(8,11,16,.5) 0%, rgba(8,11,16,.05) 30%,
    rgba(8,11,16,.38) 60%, rgba(6,9,13,.92) 100%); }
.panel .in { position:relative; z-index:2; padding:0 0 92px; width:100%; }

/* ---------- type ---------- */
.kick { font-family:ui-monospace,Consolas,monospace; font-size:11px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--sand); margin:0 0 20px; }
h1 { font-size:clamp(40px,8.6vw,88px); line-height:.92; letter-spacing:-.048em;
  font-weight:760; margin:0 0 22px; max-width:15ch; text-wrap:balance;
  text-shadow:0 4px 46px rgba(4,7,12,.55); }
h2 { font-size:clamp(30px,6vw,58px); line-height:.99; letter-spacing:-.04em;
  font-weight:740; margin:0 0 18px; max-width:17ch; text-wrap:balance; }
.panel h2 { text-shadow:0 3px 34px rgba(4,7,12,.5); }
h3 { font-size:20px; font-weight:710; letter-spacing:-.026em; margin:0 0 8px; }
.lede { font-size:clamp(17px,2.5vw,21px); line-height:1.5; max-width:40ch;
  color:rgba(255,255,255,.9); margin:0 0 30px; }
p.body { font-size:17.5px; line-height:1.62; color:var(--fg-2); margin:0 0 16px;
  max-width:52ch; }
p.body strong, .body strong { color:var(--fg); font-weight:640; }
p.body em, .body em { font-style:italic; color:var(--fg); }

/* ---------- dark content section ---------- */
.dark { background:var(--ink-0); padding:104px 0; }
.dark.tight { padding:80px 0; }
.rail { border-top:2px solid var(--sand); padding-top:15px; margin:0 0 20px;
  font-family:ui-monospace,Consolas,monospace; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sand); display:inline-block; }

/* ---------- buttons ---------- */
.btns { display:flex; flex-wrap:wrap; gap:12px; }
.cta { display:inline-block; background:var(--sand); color:#1A1004; font-weight:700;
  font-size:16.5px; padding:17px 34px; border-radius:99px; text-decoration:none; }
.cta:hover { background:var(--sand-hi); }
.cta:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.cta.ghost { background:transparent; color:var(--fg);
  border:1.5px solid var(--line); }
.cta.ghost:hover { border-color:var(--ink); background:rgba(0,0,0,.05); }

/* ---------- glassy fact pills ---------- */
.facts { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; }
.facts span { font-family:ui-monospace,Consolas,monospace; font-size:12px;
  letter-spacing:.06em; padding:9px 15px; border-radius:99px;
  background:rgba(255,255,255,.13); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.17); }
.facts b { color:#8FD8A0; font-weight:700; }
.facts b.w { color:#F2C860; }
.facts b.c { color:#F0937A; }

/* ---------- cards ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(214px,1fr));
  gap:1px; background:var(--hair-w); border-radius:18px; overflow:hidden;
  margin-top:12px; }
.cards > div { background:var(--ink-0); padding:26px 22px; }
.cards .n { font-family:ui-monospace,Consolas,monospace; font-size:21px; font-weight:700;
  color:var(--sand); line-height:1; }
.cards h3 { font-size:17.5px; font-weight:700; margin:13px 0 8px; }
.cards p { margin:0; font-size:15px; color:var(--fg-2); }

/* ---------- pull quote ---------- */
.pull { border-left:3px solid var(--sand); padding:6px 0 6px 24px; margin-top:32px; }
.pull p { margin:0; font-size:clamp(20px,2.7vw,26px); line-height:1.3; font-weight:680;
  letter-spacing:-.026em; max-width:26ch; }
.pull p + p { margin-top:14px; font-size:16.5px; font-weight:400; letter-spacing:0;
  color:var(--fg-2); max-width:52ch; }

/* ---------- photo groups ---------- */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:40px 0; }
.trio { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px;
  margin:36px 0; }
@media (max-width:700px) { .duo { grid-template-columns:1fr; } }
.duo img, .trio img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:18px;
  display:block; }
.trio figure { margin:0; }
.trio figcaption { margin-top:11px; font-size:14px; color:var(--fg-3); }

/* ---------- forms on dark ---------- */
form.dk { background:var(--surface); border:1px solid var(--hair-w);
  border-radius:20px; padding:30px 28px; }
form.dk .grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
@media (max-width:560px) { form.dk .grid { grid-template-columns:1fr; } }
form.dk .f { display:flex; flex-direction:column; gap:6px; }
form.dk .f.full { grid-column:1 / -1; }
form.dk label { font-size:12.5px; font-weight:650; color:var(--fg-2); }
form.dk label span { font-weight:400; color:var(--fg-3); }
form.dk input, form.dk select, form.dk textarea {
  font:inherit; font-size:16px; padding:13px 15px; border-radius:12px;
  border:1.5px solid var(--hair-w); background:rgba(0,0,0,.28); color:var(--fg);
  width:100%; }
form.dk textarea { resize:vertical; min-height:80px; }
form.dk input::placeholder, form.dk textarea::placeholder { color:var(--fg-3); }
form.dk option { background:#16130F; color:var(--fg); }
form.dk input:focus-visible, form.dk select:focus-visible, form.dk textarea:focus-visible {
  outline:2px solid var(--sand); outline-offset:1px; border-color:var(--sand); }
form.dk .checks { display:flex; flex-wrap:wrap; gap:8px; }
form.dk .chk { font:inherit; font-size:14px; font-weight:540; padding:10px 15px;
  border-radius:99px; border:1.5px solid var(--hair-w); background:transparent;
  color:var(--fg-2); cursor:pointer; }
form.dk .chk:hover { border-color:var(--sand); color:var(--fg); }
form.dk .chk[aria-pressed="true"] { background:var(--sand); border-color:var(--sand);
  color:#1A1004; font-weight:700; }
form.dk .chk:focus-visible { outline:2px solid #fff; outline-offset:2px; }
form.dk .submit { font:inherit; font-size:17px; font-weight:700; min-height:56px;
  width:100%; border:none; border-radius:99px; background:var(--sand); color:#1A1004;
  cursor:pointer; margin-top:14px; }
form.dk .submit:hover { background:var(--sand-hi); }
form.dk .submit[disabled] { opacity:.5; cursor:default; }
form.dk .fine { font-size:13px; color:var(--fg-3); margin:15px 0 0; text-align:center; }
form.dk .err { color:#F0937A; font-weight:600; }

/* ---------- caution note ---------- */
.caution { border-left:3px solid #F2C860; padding:4px 0 4px 22px; margin-top:28px;
  font-size:16px; color:var(--fg-2); max-width:54ch; }
.caution b { color:var(--fg); }

/* ---------- footer ---------- */
footer { background:var(--ink-1); padding:52px 0 76px; color:var(--fg-3);
  font-size:14.5px; }
footer a { color:var(--fg-2); }
footer a:hover { color:var(--fg); }
footer p { margin:0 0 7px; font-size:14.5px; }
footer b { color:var(--fg); }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* ------------------------------------------------------------------
   PHOTOGRAPH-BACKED BLOCKS

   Panels and heroes sit on a photograph with a dark veil over it, so
   their text is white no matter what the rest of the site is doing.

   This used to come free: the whole site was dark, body was
   color:var(--fg), and --fg was white. When the site went light, --fg
   became near-black and every hero headline went with it - black type
   on a dark photo. Nothing here is decorative; it is the rule that was
   previously implicit.
   ------------------------------------------------------------------ */
.panel, .panel h1, .panel h2, .panel h3, .panel p, .panel li, .panel b,
.hero,  .hero h1,  .hero h2,  .hero h3,  .hero p,  .hero li,  .hero b {
  color:#fff;
}
.panel .lede, .hero .lede { color:rgba(255,255,255,.93); }
.panel .fine, .hero .fine,
.panel .sub,  .hero .sub  { color:rgba(255,255,255,.74); }

/* the sand reads beautifully on a photograph, which is where it belongs */
.panel .kick, .hero .kick,
.panel .rail, .hero .rail { color:#EFC391; }

.panel a:not(.cta), .hero a:not(.cta) { color:#EFC391; }

/* the ghost button was re-tuned for a light page; inside a panel it is
   back on dark ground and needs its light edge again */
.panel .cta.ghost, .hero .cta.ghost {
  color:#fff; border-color:rgba(255,255,255,.44); background:transparent;
}
.panel .cta.ghost:hover, .hero .cta.ghost:hover {
  border-color:#fff; background:rgba(255,255,255,.10);
}