/* ══════════ cream: the paper look, shared by pages that have moved to it ══════════
   The home page carries the same rules inline; pages that move to cream after
   it link this file instead. Accent text is a dark rust that reads at more
   than 5 to 1 on the paper. Figures sit on a dark stage, where orange means
   yours and blue means hired, and every such pair also differs in line
   pattern or shape, never in colour alone. */
:root{
  --ink:#F3EFE6; --panel:#FBF8F2; --line:#D9D1C3; --line-2:#CFC6B6;
  --paper:#15171C; --dim:#50555D; --faint:#6A6E75; --rust:#B53A15;
  --st-bg:#14161B; --st-fg:#ECE8E0; --st-dim:#9AA0AA; --st-line:#252932;
  --yours:#FF6B3D; --hired:#7C93FF; --st-label:#FFA177;
  --disp:'Fraunces', Georgia, serif;
  --body:'Geist', system-ui, sans-serif;
  --wire:'Geist Mono', ui-monospace, monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--ink); color:var(--paper); font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration-color:var(--line-2); }
a:hover{ text-decoration-color:var(--paper); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--rust); outline-offset:3px; border-radius:4px; }
h1,h2,h3{ font-family:var(--disp); font-weight:400; letter-spacing:-.02em; line-height:1.06; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 40px; }
.kicker{ font-family:var(--wire); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--rust); margin:0 0 18px; }

/* top bar */
.topbar{ position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line);
  background:rgba(243,239,230,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.topbar .bar{ max-width:1200px; margin:0 auto; padding:0 40px; height:64px; display:flex; align-items:center; gap:26px; }
.brand{ display:flex; align-items:center; gap:9px; color:var(--paper); text-decoration:none; }
.brand .mark{ flex:none; }
.brand span.wm{ font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:1.02rem; letter-spacing:-.01em; }
.brand span.wm b{ font-weight:700; }
.brand:hover span.wm b{ color:var(--rust); }
.beta{ font-family:var(--wire); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:var(--rust); border-radius:999px; padding:1px 9px; }
.topnav{ display:flex; gap:24px; margin-left:auto; }
.topnav a{ font-size:.92rem; color:var(--dim); text-decoration:none; }
.topnav a:hover{ color:var(--paper); }
.signin{ font-size:.92rem; color:var(--paper); text-decoration:none; border:1px solid var(--line-2);
  border-radius:8px; padding:8px 15px; white-space:nowrap; }
.signin:hover{ background:#E8E1D4; border-color:var(--paper); }
.topbar .wl{ font-size:.92rem; font-weight:500; text-decoration:none; white-space:nowrap; padding:8px 15px;
  border-radius:8px; background:#15171C; color:#F3EFE6; }
.topbar .wl:hover{ background:#2A2D35; }
@media (max-width:440px){
  .topbar .wl, .signin{ padding:7px 9px; font-size:.8rem; }
  .topbar .bar{ gap:8px; column-gap:8px; }
  .brand span.wm{ font-size:.95rem; }
  .beta{ font-size:9px; padding:0 6px; }
}
@media (max-width:420px){ .topbar .beta{ display:none; } }

/* buttons */
.btn{ display:inline-flex; align-items:center; min-height:52px; padding:0 24px; border-radius:14px;
  font-family:var(--body); font-size:1rem; font-weight:500; text-decoration:none; transition:background .2s ease; }
.btn-primary{ background:#15171C; color:#F3EFE6; }
.btn-primary:hover{ background:#2A2D35; }
.btn-ghost{ color:var(--paper); border:1px solid var(--line-2); }
.btn-ghost:hover{ background:#E8E1D4; }

/* footer */
footer.sitefoot{ padding:54px 0 48px; border-top:1px solid var(--line); }
.sitefoot .cols{ display:grid; grid-template-columns:repeat(5,1fr); gap:30px 24px; }
.sitefoot .grp{ font-family:var(--wire); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:0 0 11px; }
.sitefoot .cols a{ display:block; font-size:.9rem; color:var(--dim); text-decoration:none; padding:5px 0; }
.sitefoot .cols a:hover, .sitefoot .base a:hover{ color:var(--paper); }
.sitefoot .base{ margin-top:42px; padding-top:22px; border-top:1px solid var(--line); display:flex; align-items:center;
  gap:16px; flex-wrap:wrap; font-family:var(--wire); font-size:.76rem; color:var(--faint); }
.sitefoot .base .sep{ margin-left:auto; }

@media (max-width:900px){ .sitefoot .cols{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){
  .topbar .bar{ height:auto; padding:12px 16px; flex-wrap:wrap; row-gap:10px; gap:14px; }
  .topnav{ order:3; width:100%; margin-left:0; gap:18px; overflow-x:auto; scrollbar-width:none; }
  .topnav::-webkit-scrollbar{ display:none; }
  .topnav a{ white-space:nowrap; }
  .signin{ margin-left:auto; }
}
@media (max-width:620px){
  .wrap{ padding:0 16px; }
  .sitefoot .cols{ grid-template-columns:1fr; }
  .sitefoot .base .sep{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }
.sitefoot .copy{ margin:18px 0 0; font-family:var(--wire); font-size:.74rem; color:var(--dim); }