/* Everything is drawn from the design (1536 px wide) and scaled with --k, so it looks the same on every screen.
     --k follows the width, but never makes the page taller than the screen: the cards always show in the first view. */
  :root { --k: calc(min(100vw, 150vh) / 1536); --gold: #f3c36b; --cream: #fff1d6; --navy: #060b18; --panel: rgba(9, 14, 30, .94); --serif: Georgia, "Times New Roman", "Palatino Linotype", serif; --edge: calc((100vw - 1405 * var(--k)) / 2); }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: calc(70 * var(--k)); }
  body { margin: 0; background: var(--navy); color: var(--cream); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; line-height: 1.5; }
  a { color: inherit; text-decoration: none; }
  [data-discord].off { display: none; }

  /* the bar on top */
  nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: calc(57 * var(--k)); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--edge); background: rgba(6, 10, 22, .92); border-bottom: 1px solid rgba(243, 195, 107, .16); }
  .brand { display: flex; align-items: center; gap: calc(12 * var(--k)); }
  .brand img { height: calc(50 * var(--k)); width: auto; display: block; }
  .brand b { display: block; font-family: var(--serif); letter-spacing: .13em; font-size: calc(18 * var(--k)); line-height: 1; }
  .brand span { display: block; font-size: calc(9 * var(--k)); letter-spacing: .6em; color: var(--gold); margin-top: calc(5 * var(--k)); }
  .links { display: flex; flex: 1; justify-content: center; gap: calc(46 * var(--k)); font-size: calc(12.5 * var(--k)); letter-spacing: .2em; margin-right: calc(80 * var(--k)); }
  .links a { padding: calc(18 * var(--k)) 0 calc(14 * var(--k)); opacity: .82; border-bottom: 2px solid transparent; }
  .links a:hover, .links a.on { opacity: 1; color: var(--gold); border-bottom-color: var(--gold); }
  .dc { display: inline-flex; align-items: center; gap: calc(10 * var(--k)); height: calc(36 * var(--k)); padding: 0 calc(20 * var(--k)); border-radius: calc(7 * var(--k)); border: 1.5px solid var(--gold); font-size: calc(11.5 * var(--k)); letter-spacing: .16em; font-weight: 600; }
  .dc:hover { background: rgba(243, 195, 107, .14); }
  .dc svg { width: calc(22 * var(--k)); height: calc(22 * var(--k)); fill: var(--cream); }

  /* the picture and the big words */
  .hero { position: relative; margin-top: calc(57 * var(--k)); height: calc(573 * var(--k)); overflow: hidden; padding-left: var(--edge); background: url('/img/hero.webp') 50% 76% / cover no-repeat; }
  .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 10, 22, .9) 0%, rgba(6, 10, 22, .55) 34%, rgba(6, 10, 22, 0) 62%); }
  .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(110 * var(--k)); background: linear-gradient(180deg, rgba(6, 11, 24, 0), var(--navy)); }
  .txt { position: relative; z-index: 2; padding-top: calc(104 * var(--k)); max-width: calc(620 * var(--k)); }
  .eyebrow { font-size: calc(11 * var(--k)); letter-spacing: .5em; color: var(--gold); }
  h1 { margin: calc(16 * var(--k)) 0 0; font-family: var(--serif); font-size: calc(92 * var(--k)); line-height: .97; font-weight: 700; letter-spacing: -.015em; }
  .lead { margin: calc(14 * var(--k)) 0 calc(32 * var(--k)); font-size: calc(20 * var(--k)); }
  .btns { display: flex; gap: calc(16 * var(--k)); }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(14 * var(--k)); height: calc(50 * var(--k)); padding: 0 calc(30 * var(--k)); border-radius: calc(5 * var(--k)); font-size: calc(13.5 * var(--k)); letter-spacing: .17em; font-weight: 700; border: 1.5px solid var(--gold); white-space: nowrap; }
  .btn.main { background: linear-gradient(180deg, #efc87d, #d29b46); color: #1a1006; border-color: transparent; }
  .btn.ghost { background: rgba(6, 10, 22, .55); }
  .btn svg { width: calc(18 * var(--k)); height: calc(18 * var(--k)); fill: currentColor; }
  .btn:hover { filter: brightness(1.1); }
  .pill { display: inline-flex; align-items: center; gap: calc(10 * var(--k)); height: calc(27 * var(--k)); margin-top: calc(18 * var(--k)); padding: 0 calc(16 * var(--k)); border-radius: 999px; font-size: calc(10.5 * var(--k)); letter-spacing: .22em; background: rgba(32, 40, 70, .8); border: 1px solid rgba(255, 241, 214, .12); }
  .pill i { width: calc(5 * var(--k)); height: calc(5 * var(--k)); border-radius: 50%; background: rgba(255, 241, 214, .6); }
  .hero .logo { position: absolute; z-index: 1; right: calc(var(--edge) + 56 * var(--k)); top: calc(8 * var(--k)); width: calc(470 * var(--k)); height: auto; }

  /* the three boxes */
  .wrap { width: calc(1405 * var(--k)); margin: 0 auto; }
  #city { padding-top: calc(24 * var(--k)); }
  .head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: calc(14 * var(--k)); }
  .kicker { display: flex; align-items: center; gap: calc(16 * var(--k)); font-size: calc(9.5 * var(--k)); letter-spacing: .45em; color: var(--gold); }
  .kicker::before { content: ''; width: calc(38 * var(--k)); height: 1px; background: var(--gold); }
  h2 { margin: calc(8 * var(--k)) 0 0; font-family: var(--serif); font-size: calc(56 * var(--k)); line-height: 1.02; font-weight: 700; letter-spacing: -.01em; }
  .head p { margin: 0 0 calc(10 * var(--k)); max-width: calc(450 * var(--k)); font-size: calc(14 * var(--k)); color: rgba(255, 241, 214, .72); }
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(17 * var(--k)); }
  .card { display: block; border-radius: calc(10 * var(--k)); overflow: hidden; border: 1px solid rgba(255, 241, 214, .2); background: var(--panel); transition: border-color .2s, transform .2s; }
  .card:hover { transform: translateY(-3px); border-color: var(--gold); }
  .card img { display: block; width: 100%; height: calc(172 * var(--k)); object-fit: cover; }
  .card .row { display: flex; justify-content: space-between; align-items: center; gap: calc(14 * var(--k)); height: calc(77 * var(--k)); padding: 0 calc(20 * var(--k)) 0 calc(21 * var(--k)); border-top: 1px solid rgba(255, 241, 214, .1); }
  .card h3 { margin: 0; font-family: var(--serif); font-size: calc(23 * var(--k)); line-height: 1.1; }
  .card p { margin: calc(4 * var(--k)) 0 0; font-size: calc(12.8 * var(--k)); color: rgba(255, 241, 214, .72); line-height: 1.25; }
  .arrow { flex: none; width: calc(40 * var(--k)); height: calc(40 * var(--k)); border-radius: 50%; border: 1.5px solid var(--gold); display: grid; place-items: center; color: var(--gold); font-size: calc(20 * var(--k)); }

  /* the rest of the page */
  section.more { width: calc(1405 * var(--k)); margin: 0 auto; padding: calc(60 * var(--k)) 0 0; }
  ul.rules { list-style: none; margin: calc(18 * var(--k)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(14 * var(--k)); }
  ul.rules li { padding: calc(18 * var(--k)) calc(22 * var(--k)); border-radius: calc(10 * var(--k)); border: 1px solid rgba(255, 241, 214, .2); background: var(--panel); font-size: calc(15.5 * var(--k)); }
  ol.steps { margin: calc(18 * var(--k)) 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: calc(14 * var(--k)); max-width: calc(860 * var(--k)); }
  ol.steps li { counter-increment: s; padding: calc(18 * var(--k)) calc(22 * var(--k)) calc(18 * var(--k)) calc(74 * var(--k)); position: relative; border-radius: calc(10 * var(--k)); border: 1px solid rgba(255, 241, 214, .2); background: var(--panel); font-size: calc(15.5 * var(--k)); }
  ol.steps li::before { content: counter(s); position: absolute; left: calc(22 * var(--k)); top: 50%; transform: translateY(-50%); width: calc(36 * var(--k)); height: calc(36 * var(--k)); border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); display: grid; place-items: center; font-family: var(--serif); font-size: calc(18 * var(--k)); }
  code { padding: 2px 9px; border-radius: 6px; background: rgba(255, 241, 214, .1); border: 1px solid rgba(243, 195, 107, .3); }
  footer { margin-top: calc(70 * var(--k)); padding: calc(34 * var(--k)) 20px calc(50 * var(--k)); text-align: center; font-size: calc(12 * var(--k)); letter-spacing: .2em; color: rgba(255, 241, 214, .5); border-top: 1px solid rgba(243, 195, 107, .16); }

  /* phones and narrow windows: normal sizes, stacked */
  @media (max-width: 860px) {
    :root { --k: 1px; --edge: 18px; }
    .links { display: none; }
    .hero { height: auto; padding: 36px 18px 60px; background-position: 70% center; }
    .txt { padding-top: 40px; }
    h1 { font-size: 46px; }
    .lead { font-size: 17px; }
    .btns { flex-wrap: wrap; }
    .hero .logo { position: relative; right: auto; top: auto; width: min(80vw, 340px); display: block; margin: 30px auto 0; }
    .wrap, section.more { width: auto; padding-left: 18px; padding-right: 18px; }
    .head { flex-direction: column; align-items: flex-start; }
    h2 { font-size: 32px; }
    .head p { font-size: 14px; }
    .cards, ul.rules { grid-template-columns: 1fr; }
    .card img { height: 160px; }
    .card .row { height: auto; padding: 16px 18px; }
    .card h3 { font-size: 22px; } .card p { font-size: 13.5px; }
    ul.rules li, ol.steps li { font-size: 15px; }
  }