:root{
    --bg:#0d0b08; --bg2:#15110b; --panel:#1b160e; --panel2:#221a10;
    --ink:#e9dcc0; --muted:#9c8c6d; --faint:#6b5e46;
    --gold:#d8a94a; --gold2:#f0c76b; --line:#3a2f1d;
    --red:#a4442e; --green:#4e7c3a;
    --maxw:1080px; --maxw-text:760px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
    line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  a{color:var(--gold2); text-decoration:none}
  a:hover{color:#fff}
  h1,h2,h3{font-weight:700; line-height:1.15; margin:0}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
  .eyebrow{
    font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    text-transform:uppercase; letter-spacing:.28em; font-size:.72rem;
    color:var(--gold); margin:0 0 14px;
  }

  /* ---- top bar ---- */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:rgba(13,11,8,.82); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav .wrap{display:flex; align-items:center; gap:20px; height:60px}
  .brand{font-weight:700; letter-spacing:.04em; color:#fff; font-size:1.05rem}
  .brand b{color:var(--gold)}
  .nav nav{margin-left:auto; display:flex; gap:22px; font-size:.92rem}
  .nav nav a{color:var(--muted)}
  .nav nav a:hover{color:var(--gold2)}
  /* The online route is the one thing people cannot guess is here, so it reads as a button. */
  .nav nav a.pill{
    color:var(--gold2); border:1px solid var(--line); border-radius:999px;
    padding:5px 14px; line-height:1;
  }
  .nav nav a.pill:hover{border-color:var(--gold); color:#fff}
  .nav nav a.here{color:var(--ink)}

  /* Below 680px the row does not fit, so it folds into a disclosure. <details> rather than a
     script: the menu is the only interactive thing on most of these pages, and it should not
     depend on JavaScript having loaded. */
  .navmenu{margin-left:auto; position:relative}
  .navmenu > summary{
    list-style:none; cursor:pointer; color:var(--gold2); font-size:.92rem;
    border:1px solid var(--line); border-radius:6px; padding:6px 12px;
  }
  .navmenu > summary::-webkit-details-marker{display:none}
  .navmenu[open] > summary{border-color:var(--gold)}
  .navmenu nav{
    position:absolute; right:0; top:calc(100% + 10px); z-index:60;
    display:flex; flex-direction:column; gap:0; min-width:210px;
    background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px;
  }
  .navmenu nav a{padding:9px 12px; border-radius:5px}
  .navmenu nav a:hover{background:var(--panel2)}
  .navmenu nav a.pill{border:0; padding:9px 12px; border-radius:5px}
  @media(min-width:681px){ .navmenu{display:none} }
  @media(max-width:680px){ .nav > .wrap > nav{display:none} }

  /* ---- hero ---- */
  .hero{
    position:relative; overflow:hidden;
    border-bottom:1px solid var(--line);
    background:
      linear-gradient(180deg, rgba(13,11,8,.35) 0%, rgba(13,11,8,.78) 55%, var(--bg) 100%),
      url(/assets/hero.jpeg) center 30% / cover no-repeat;
  }
  .hero .wrap{padding:96px 22px 88px}
  .hero h1{font-size:clamp(2.4rem,6vw,4rem); color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.7)}
  .hero h1 span{color:var(--gold2)}
  .hero p.lead{
    max-width:600px; margin:20px 0 0; font-size:1.18rem; color:#e9dcc0;
    text-shadow:0 1px 12px rgba(0,0,0,.8);
  }
  .cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}
  .btn{
    display:inline-flex; align-items:center; gap:9px;
    padding:13px 24px; border-radius:6px; font-weight:700; font-size:1rem;
    border:1px solid transparent; cursor:pointer; font-family:inherit;
  }
  .btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold)); color:#241a08; border-color:#7a5a1c}
  .btn.primary:hover{filter:brightness(1.08); color:#241a08}
  .btn.ghost{background:rgba(20,16,10,.6); border-color:var(--line); color:var(--ink)}
  .btn.ghost:hover{border-color:var(--gold); color:#fff}
  .hero .note{margin-top:16px; font-size:.82rem; color:var(--muted)}

  /* ---- sections ---- */
  section{padding:82px 0; border-bottom:1px solid var(--line)}
  section h2{font-size:clamp(1.7rem,3.6vw,2.4rem); color:#fff}
  section .intro{color:var(--muted); max-width:640px; margin:14px 0 0; font-size:1.08rem}

  /* ---- feature grid ---- */
  .grid{display:grid; gap:20px; margin-top:44px}
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(3,1fr)}
  @media(max-width:820px){ .cols-2,.cols-3{grid-template-columns:1fr} }
  .card{
    background:linear-gradient(180deg,var(--panel),var(--bg2));
    border:1px solid var(--line); border-radius:10px; padding:26px;
    transition:border-color .15s, transform .15s;
  }
  .card:hover{border-color:var(--gold); transform:translateY(-2px)}
  .card.accent{border-color:var(--gold)}
  .card .ic{font-size:1.6rem; line-height:1; margin-bottom:14px}
  .card h3{font-size:1.22rem; color:var(--gold2); margin-bottom:8px}
  .card p{margin:0; color:var(--muted); font-size:.98rem}
  .card ul{margin:12px 0 0; padding-left:18px; color:var(--muted); font-size:.94rem}
  .card ul li{margin:4px 0}

  /* ---- factions ---- */
  .factions{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px}
  @media(max-width:820px){ .factions{grid-template-columns:1fr 1fr} }
  @media(max-width:520px){ .factions{grid-template-columns:1fr} }
  .fac{
    background:var(--panel); border:1px solid var(--line); border-radius:9px;
    padding:20px; position:relative;
  }
  .fac .tag{font-family:ui-monospace,monospace; font-size:.68rem; letter-spacing:.15em;
    text-transform:uppercase; color:var(--faint)}
  .fac h3{font-size:1.12rem; color:#fff; margin:6px 0 4px}
  .fac .sub{color:var(--gold); font-style:italic; font-size:.92rem}
  .fac p{margin:10px 0 0; color:var(--muted); font-size:.9rem}
  .fac .army{margin-top:12px; font-size:.8rem; color:var(--faint); border-top:1px solid var(--line); padding-top:10px}

  /* ---- screenshots ---- */
  figure.shot{margin:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#000}
  figure.shot img{display:block; width:100%; height:auto}
  figure.shot figcaption{
    padding:12px 16px; background:var(--panel); color:var(--muted); font-size:.9rem;
    border-top:1px solid var(--line);
  }
  figure.shot figcaption b{color:var(--gold2)}
  .shot-wide{margin-top:44px; max-width:820px}
  .shot-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; align-items:start}
  @media(max-width:820px){ .shot-row{grid-template-columns:1fr} }
  .feature-shot{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; margin-top:44px}
  @media(max-width:820px){ .feature-shot{grid-template-columns:1fr} }
  .feature-shot h3{color:var(--gold2); font-size:1.3rem; margin-bottom:10px}
  .feature-shot p{color:var(--muted); margin:0 0 10px}

  /* ---- numbered steps ---- */
  .steps{counter-reset:s; list-style:none; padding:0; margin:26px 0 0}
  .steps li{position:relative; padding:0 0 20px 46px; color:var(--muted)}
  .steps li::before{
    counter-increment:s; content:counter(s);
    position:absolute; left:0; top:-2px; width:30px; height:30px; border-radius:50%;
    display:grid; place-items:center; font-weight:700;
    background:var(--panel2); border:1px solid var(--gold); color:var(--gold2); font-size:.9rem;
  }
  .steps li b{color:var(--ink)}

  /* ---- download ---- */
  .dl{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px}
  @media(max-width:820px){ .dl{grid-template-columns:1fr} }
  .dl a{
    display:block; background:var(--panel); border:1px solid var(--line);
    border-radius:10px; padding:24px; color:var(--ink); transition:border-color .15s,transform .15s;
  }
  .dl a:hover{border-color:var(--gold); transform:translateY(-2px); color:var(--ink)}
  .dl .os{font-size:1.15rem; font-weight:700; color:#fff; display:flex; align-items:center; gap:10px}
  .dl .meta{color:var(--muted); font-size:.88rem; margin-top:8px}
  .dl .pending{display:inline-block; margin-top:12px; font-family:ui-monospace,monospace;
    font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
    border:1px solid var(--line); border-radius:20px; padding:3px 12px}

  .callout{
    margin-top:40px; background:var(--panel2); border:1px solid var(--line);
    border-left:3px solid var(--gold); border-radius:8px; padding:20px 24px;
    color:var(--muted); font-size:.95rem;
  }
  .callout b{color:var(--gold2)}
  .callout p{margin:10px 0 0}
  .callout ol{margin:12px 0 0; padding-left:20px}
  .callout ol li{margin:6px 0}
  .callout kbd{
    font-family:ui-monospace,monospace; font-size:.82rem; color:var(--ink);
    background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:1px 6px;
  }

  /* collapsible "why the warning" / checksums */
  details.more{
    margin-top:18px; background:var(--panel2); border:1px solid var(--line);
    border-radius:8px; padding:0 20px;
  }
  details.more > summary{
    cursor:pointer; list-style:none; padding:14px 0; color:var(--gold2);
    font-size:.92rem; font-weight:700;
  }
  details.more > summary::-webkit-details-marker{display:none}
  details.more > summary::before{content:"▸ "; color:var(--gold)}
  details.more[open] > summary::before{content:"▾ "}
  details.more > :not(summary):last-child{padding-bottom:18px}
  .sums{margin:0; font-size:.82rem; color:var(--muted)}
  .sums dt{font-family:ui-monospace,monospace; color:var(--ink); margin-top:12px}
  .sums dt:first-child{margin-top:0}
  .sums dd{
    margin:4px 0 0; font-family:ui-monospace,monospace; font-size:.74rem;
    color:var(--faint); word-break:break-all;
  }

  /* ---- footer ---- */
  footer{padding:56px 0 70px; color:var(--faint); font-size:.86rem}
  footer .wrap{display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between}
  footer a{color:var(--muted)}
  footer h4{color:var(--ink); font-size:.95rem; margin:0 0 10px}
  .disclaimer{margin-top:34px; max-width:640px; line-height:1.7}

    .wip-badge {
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
      padding: 3px 10px;
      border-radius: 999px;
      background: #7a3d12;
      color: #ffd9a8;
      font-size: 0.5em;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .wip-note {
      margin: 14px 0 0;
      padding: 12px 16px;
      border-left: 3px solid #7a3d12;
      background: rgba(122, 61, 18, 0.12);
      border-radius: 4px;
      font-size: 0.95rem;
      line-height: 1.6;
    }

  /* ======== added for the multi-page layout ======== */

  /* ---- route cards: the three ways to play ---- */
  .routes{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:52px}
  @media(max-width:900px){ .routes{grid-template-columns:1fr} }
  .route{
    display:flex; flex-direction:column;
    background:linear-gradient(180deg,var(--panel),var(--bg2));
    border:1px solid var(--line); border-radius:12px; overflow:hidden;
    transition:border-color .15s, transform .15s;
  }
  .route:hover{border-color:var(--gold); transform:translateY(-2px)}
  /* The online route is the one most people do not know exists, so it is the one wearing gold. */
  .route.accent{border-color:var(--gold)}
  .route .shotwrap{
    display:block; aspect-ratio:16/10; background:#000; border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .route .shotwrap img{display:block; width:100%; height:100%; object-fit:cover}
  .route .body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1}
  .route h3{font-size:1.35rem; color:#fff; margin:2px 0 10px}
  .route p{margin:0; color:var(--muted); font-size:1rem}
  .route .route-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:20px}
  .route .route-actions .btn{padding:11px 20px; font-size:.95rem}
  .route .route-links{margin-top:14px; font-size:.9rem; color:var(--faint)}
  .route .route-links a{color:var(--gold2)}
  /* The honest caveat. Pinned to the bottom so the cards line up however long the copy runs. */
  .route .route-meta{
    margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line);
    font-size:.85rem; color:var(--faint); line-height:1.55;
  }
  .route.wide{grid-column:1 / -1; background:var(--panel2)}
  .route.wide .body{flex-direction:row; gap:34px; align-items:center; padding:26px}
  .route.wide .body > div:first-child{flex:1}
  @media(max-width:720px){ .route.wide .body{flex-direction:column; align-items:flex-start} }

  /* ---- subpage header ---- */
  .pagehead{
    position:relative; border-bottom:1px solid var(--line);
    background:
      linear-gradient(180deg, rgba(13,11,8,.86) 0%, rgba(13,11,8,.94) 60%, var(--bg) 100%),
      url(/assets/hero.jpeg) center 28% / cover no-repeat;
  }
  .pagehead .wrap{padding:46px 22px 44px}
  .pagehead .crumbs{font-size:.85rem; color:var(--faint); margin:0 0 18px}
  .pagehead .crumbs a{color:var(--muted)}
  .pagehead h1{font-size:clamp(1.9rem,4.2vw,2.7rem); color:#fff}
  .pagehead .lead{max-width:var(--maxw-text); margin:16px 0 0; color:var(--ink); font-size:1.1rem}

  /* ---- requirements strip ---- */
  .reqs{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px}
  @media(max-width:820px){ .reqs{grid-template-columns:1fr; gap:22px} }
  .reqs h3{
    font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    text-transform:uppercase; letter-spacing:.2em; font-size:.7rem;
    color:var(--gold); margin:0 0 10px; font-weight:400;
  }
  .reqs p{margin:0; color:var(--muted); font-size:.96rem}

  /* ---- sticky call to action, mobile only ---- */
  .stickycta{display:none}
  @media(max-width:680px){
    .stickycta{
      display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:70;
      padding:10px 14px calc(10px + env(safe-area-inset-bottom));
      background:rgba(13,11,8,.94); border-top:1px solid var(--line); backdrop-filter:blur(8px);
    }
    .stickycta .btn{flex:1; justify-content:center; padding:12px 10px; font-size:.92rem}
    body{padding-bottom:74px}
  }

  /* ---- prose-width pages ---- */
  .narrow{max-width:var(--maxw-text)}
  section .intro.narrow{max-width:var(--maxw-text)}

  /* ---- footer columns ---- */
  .footer-cols{display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between}
  .footer-cols p{margin:0 0 5px}