/* Loop Rally site - the livery palette from brand/ui-palette.md, one stylesheet, no framework. */
:root {
  --navy: #0A0E1C;
  --navy-2: #121a33;
  --ink: #F4F6FA;
  --ink-2: #aeb6cc;
  --blue: #1B4FD8;
  --red: #E0312B;
  --max: 1080px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--navy);
  color: var(--ink);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--ink); }
a:hover { color: #fff; }
h1, h2, h3 {
  font-family: "Saira Extra Condensed", "Saira", Impact, "Arial Narrow", sans-serif;
  font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 1; margin: 0 0 0.4em;
}
h1 { font-size: clamp(40px, 7vw, 72px); }
h2 { font-size: clamp(28px, 4vw, 40px); margin-top: 1.6em; }
h3 { font-size: 24px; margin-top: 1.2em; }
p { margin: 0 0 1em; max-width: 68ch; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.top img { height: 34px; display: block; }
.top nav a { margin-left: 22px; text-decoration: none; color: var(--ink-2); font-weight: 600; }
.top nav a[aria-current] , .top nav a:hover { color: var(--ink); }

/* hero */
.hero {
  position: relative; min-height: 62vh; display: grid; place-items: center;
  background: var(--navy) url(hero.jpg) center / cover no-repeat;
}
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,28,.25), rgba(10,14,28,.85)); }
.hero > * { position: relative; z-index: 1; }
.hero .lockup { width: min(720px, 80vw); display: block; margin: 0 auto 24px; }
.hero p { text-align: center; font-size: 20px; max-width: 46ch; margin: 0 auto 28px; color: var(--ink); }
.cta { display: inline-block; background: var(--blue); color: #fff; text-decoration: none; font-weight: 700;
       padding: 14px 26px; border-radius: 4px; }
.cta:hover { background: #2a5fe8; color: #fff; }
.cta.ghost { background: transparent; border: 2px solid var(--ink-2); }
.center { text-align: center; }

/* stripe under section titles - the C1 stripe proportions 300/60/140 */
.stripe { height: 6px; width: 250px; margin: 0 0 24px;
  background: linear-gradient(90deg, var(--red) 0 60%, var(--ink) 60% 72%, var(--blue) 72% 100%);
  transform: skewX(-30deg); }

/* content blocks */
section { padding: 8px 0 24px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.card { background: var(--navy-2); padding: 22px; border-radius: 6px; }
.card h3 { margin-top: 0; }
ul { padding-left: 1.2em; } li { margin-bottom: .4em; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; }
dt { color: var(--ink-2); } dd { margin: 0; }
code { background: var(--navy-2); padding: 2px 6px; border-radius: 3px; font-size: .92em; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.gallery a img { width: 100%; display: block; border-radius: 4px; background: var(--navy-2); }
.gallery figcaption { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.files a { display: block; padding: 6px 0; }

footer { border-top: 1px solid #1c2440; margin-top: 40px; padding: 22px 0 40px; color: var(--ink-2); font-size: 15px; }
footer a { color: var(--ink-2); }