/* Gate to Gate, by Online Rowing Games. One identity for every page.
   Cream paper, navy ink, coral pink for the thing you act on, green for "best" and "official", gold for the leader, rust for slipping. Wide heavy grotesk for the big numbers.
   The variable names are historical: --orange is the accent (now coral pink), --orange2 its darker text/hover shade. */
:root{
  --bg:#f8f3e8; --bg2:#fffdf7; --bg3:#ffffff; --line:#e2dac8; --fg:#13213f; --fg2:#3b4a6b; --mute:#7b87a2;
  --orange:#ff3f7a; --orange2:#d81b60; --green:#1f8a4c; --amber:#b8860b; --red:#c2410c;
  --pink:#ff3f7a; --navy:#13213f; --cream:#f8f3e8;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif; --body:"Source Sans 3","Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--orange2)}
.wrap{max-width:1120px;margin:0 auto;padding-block:28px 80px;padding-inline:20px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0 26px}
.wordmark{font-family:var(--display);font-weight:800;font-stretch:125%;letter-spacing:.02em;text-transform:uppercase;font-size:15px;color:var(--fg);text-decoration:none;display:flex;align-items:center;gap:10px}
.wordmark i{width:10px;height:10px;border-radius:50%;background:var(--orange);display:inline-block}
.topbar nav{display:flex;gap:18px;font-size:15px}
.topbar nav a{color:var(--mute);text-decoration:none}
.topbar nav a:hover{color:var(--fg)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.01em;line-height:1;margin:0;text-wrap:balance}
h1{font-size:clamp(44px,8vw,96px);font-stretch:110%}
h2{font-size:clamp(26px,3.4vw,38px)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.lede{color:var(--fg2);font-size:19px;max-width:38em;margin:0}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.01em;padding:12px 18px;border-radius:10px;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:var(--orange2);color:#fff}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--mute)}
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 1px 0 rgba(19,33,63,.04)}
.num{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
label,.k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
select,input[type=text]{width:100%;background:var(--bg3);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:500 16px var(--body)}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--orange2);outline-offset:2px}
footer{margin-top:60px;border-top:1px solid var(--line);padding-top:22px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;color:var(--mute);font-size:14px}
footer a{color:var(--mute)}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
