:root{
    --ground:#E3E8E3;
    --panel:#EDF1EC;
    --ink:#14233A;
    --ink-soft:#4E6076;
    --ink-faint:#8A99A6;
    --rule:#B4C0B7;
    --rule-soft:#CBD4CB;
    --wax:#A93B2B;
    --brass:#8A6D2F;
    --shadow:rgba(20,35,58,.10);
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#0C1522;
      --panel:#121F30;
      --ink:#DCE5DD;
      --ink-soft:#93A6B4;
      --ink-faint:#5D7183;
      --rule:#2A3D51;
      --rule-soft:#1E2E3F;
      --wax:#E0705B;
      --brass:#C9A75E;
      --shadow:rgba(0,0,0,.45);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0C1522;
    --panel:#121F30;
    --ink:#DCE5DD;
    --ink-soft:#93A6B4;
    --ink-faint:#5D7183;
    --rule:#2A3D51;
    --rule-soft:#1E2E3F;
    --wax:#E0705B;
    --brass:#C9A75E;
    --shadow:rgba(0,0,0,.45);
  }

  *{box-sizing:border-box}
  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:Spectral,Georgia,"Times New Roman",serif;
    font-weight:300;
    font-size:17px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:680px;margin:0 auto;padding:64px 24px 96px}

  .eyebrow{
    font-family:"Archivo Narrow",Arial,sans-serif;
    font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ink-faint);margin:0 0 18px;
  }
  h1{
    font-family:"Bodoni Moda",Didot,"Times New Roman",serif;
    font-weight:400;font-size:clamp(56px,15vw,104px);
    line-height:.92;letter-spacing:-.015em;margin:0;
    text-wrap:balance;
  }
  .premise{
    margin:22px 0 0;max-width:46ch;color:var(--ink-soft);
    font-size:18px;
  }
  .premise em{font-style:italic;color:var(--ink)}

  .rule{height:1px;background:var(--rule);border:0;margin:44px 0 36px}
  .rule-thin{height:1px;background:var(--rule-soft);border:0;margin:32px 0}

  form{display:grid;gap:20px}
  .fields{display:grid;gap:20px;grid-template-columns:1fr 1fr}
  @media(max-width:560px){.fields{grid-template-columns:1fr}}
  label{
    display:block;
    font-family:"Archivo Narrow",Arial,sans-serif;
    font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:9px;
  }
  input{
    width:100%;padding:11px 2px;
    background:transparent;color:var(--ink);
    border:0;border-bottom:1px solid var(--rule);
    font-family:Spectral,Georgia,serif;font-size:20px;font-weight:400;
    border-radius:0;
  }
  input::placeholder{color:var(--ink-faint);font-style:italic}
  input:focus{outline:0;border-bottom-color:var(--wax);box-shadow:inset 0 -2px 0 var(--wax)}

  .combo{position:relative}
  .menu{
    position:absolute;z-index:30;left:0;right:0;top:100%;margin:0;padding:4px 0;
    list-style:none;background:var(--panel);border:1px solid var(--rule);
    box-shadow:0 12px 30px var(--shadow);max-height:262px;overflow-y:auto;
  }
  .menu li{padding:9px 13px;cursor:pointer;font-size:16.5px;color:var(--ink-soft);line-height:1.35}
  .menu li b{font-weight:600;color:var(--ink)}
  .menu li:hover,.menu li[aria-selected="true"]{background:var(--wax);color:var(--ground)}
  .menu li:hover b,.menu li[aria-selected="true"] b{color:var(--ground)}
  .menu li.none{color:var(--ink-faint);font-style:italic;cursor:default}
  .menu li.none:hover{background:transparent;color:var(--ink-faint)}
  button{
    justify-self:start;
    font-family:"Archivo Narrow",Arial,sans-serif;
    font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
    color:var(--ground);background:var(--ink);
    border:0;padding:13px 26px;cursor:pointer;
    transition:background .15s ease;
  }
  button:hover{background:var(--wax)}
  button:focus-visible{outline:2px solid var(--wax);outline-offset:3px}

  .err{color:var(--wax);font-size:15px;font-style:italic;min-height:1.4em;margin:0}

  #result{display:none}
  #result.on{display:block;animation:rise .6s ease both}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  .chart{margin:8px 0 4px}
  .chart svg{width:100%;height:auto;display:block;overflow:visible}
  .endpt{font-family:"Archivo Narrow",Arial,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;fill:var(--ink-soft)}
  .arcline{fill:none;stroke:var(--rule);stroke-width:1;stroke-dasharray:3 4}
  .arcdraw{fill:none;stroke:var(--wax);stroke-width:1.5}
  .dot{fill:var(--ink)}
  .ship{fill:var(--wax)}
  .milesTag{font-family:"Archivo Narrow",Arial,sans-serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;fill:var(--ink-faint)}
  /* The chart is a navigational plot, not a street map: a graticule, two ports and
     the true great-circle between them. Everything is a CSS variable, so it follows
     the theme without a second set of tiles. */
  .grat{fill:none;stroke:var(--rule);stroke-width:.5;opacity:.5}
  .equator{fill:none;stroke:var(--rule);stroke-width:.8;opacity:.75}
  .frame{fill:var(--panel);stroke:var(--rule);stroke-width:1}
  .land{fill:var(--rule);opacity:.42;stroke:none}

  .verdict{text-align:center;margin:26px 0 6px}
  .verdict .big{
    font-family:"Bodoni Moda",Didot,serif;font-weight:400;
    font-size:clamp(52px,13vw,88px);line-height:1;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;display:block;
  }
  .verdict .by{
    font-family:Spectral,Georgia,serif;font-style:italic;font-size:21px;
    color:var(--ink-soft);display:block;margin-top:12px;
  }
  .verdict .arrive{
    font-family:"Archivo Narrow",Arial,sans-serif;font-size:11.5px;
    letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
    display:block;margin-top:16px;
  }

  .verdict .mark{font-family:"Bodoni Moda",Didot,serif;font-style:italic;font-size:19px;color:var(--ink-faint);display:block;margin-top:24px}
  table{width:100%;border-collapse:collapse;font-size:16px}
  caption{
    font-family:"Archivo Narrow",Arial,sans-serif;font-size:11.5px;
    letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
    text-align:left;padding-bottom:14px;
  }
  th{
    font-family:"Archivo Narrow",Arial,sans-serif;font-weight:400;font-size:11px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
    text-align:left;padding:0 0 9px;border-bottom:1px solid var(--rule);
  }
  th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
  td{padding:13px 0;border-bottom:1px solid var(--rule-soft);vertical-align:baseline}
  td.era{font-weight:400}
  td.vessel{color:var(--ink-faint);font-size:14.5px;font-style:italic}
  td.num{font-size:18px}
  tr.hero td{color:var(--wax)}
  tr.hero td.vessel{color:var(--wax);opacity:.75}

  .copybar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:30px}
  .copybar button{background:transparent;color:var(--ink-soft);border:1px solid var(--rule);padding:10px 20px}
  .copybar button:hover{background:transparent;color:var(--wax);border-color:var(--wax)}
  .copynote{font-size:14px;font-style:italic;color:var(--ink-faint)}

  .signup{margin:8px 0 0}
  .signup-lede{margin:0 0 22px;max-width:46ch;color:var(--ink-soft)}
  .signup-form{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
  .store{margin:0 0 8px}
  .store-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
  .store-badge{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;
    border:1px solid var(--ink);background:var(--ink);color:var(--ground);
    text-decoration:none;font-family:"Archivo Narrow",Arial,sans-serif;
    text-transform:uppercase;letter-spacing:.12em;font-size:13px;min-height:44px}
  .store-badge:hover{background:var(--wax);border-color:var(--wax)}
  /* The not-yet state. Outlined rather than solid, and plainly not a button. */
  .store-soon{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;
    border:1px solid var(--rule);color:var(--ink-soft);
    font-family:"Archivo Narrow",Arial,sans-serif;text-transform:uppercase;
    letter-spacing:.12em;font-size:13px;min-height:44px}
  .store-note{color:var(--ink-soft);font-size:15px;margin-top:12px}
  nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap;
    padding:14px 0 18px;border-bottom:1px solid var(--rule);margin-bottom:28px}
  nav a{font-family:"Archivo Narrow",Arial,sans-serif;text-transform:uppercase;
    letter-spacing:.14em;font-size:12px;color:var(--ink-soft);text-decoration:none;
    min-height:44px;display:inline-flex;align-items:center}
  nav a:hover{color:var(--wax)}
  nav a[aria-current="page"]{color:var(--wax);border-bottom:1px solid var(--wax)}
  nav .mark{font-family:"Bodoni Moda",Didot,serif;text-transform:none;
    letter-spacing:0;font-size:19px;color:var(--ink);margin-right:6px}
  nav .mark:hover{color:var(--wax)}
  @media (max-width:600px){ nav{gap:16px} }
  .footer-links{margin-top:18px;font-family:"Archivo Narrow",Arial,sans-serif;
    text-transform:uppercase;letter-spacing:.12em;font-size:12px}
  .footer-links a{color:var(--ink-soft);text-decoration:none;margin-right:18px;
    /* Without this a two-word link breaks across lines and reads as two links. */
    white-space:nowrap;display:inline-block}
  .footer-links a:hover{color:var(--wax)}
  .signup-form input{flex:1 1 260px}
  .signup-form button{flex:0 0 auto}
  .signup-msg{margin:14px 0 0;color:var(--ink-soft);min-height:1px}
  .signup-msg.bad{color:var(--wax)}
  #map{height:340px;width:100%;border:1px solid var(--rule);background:var(--panel)}
    font-family:"Archivo Narrow",Arial,sans-serif;font-size:11.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
    text-align:center;margin-top:12px;
  }
    background:var(--ink);color:var(--ground);border:0;border-radius:0;box-shadow:none;
    font-family:"Archivo Narrow",Arial,sans-serif;font-size:10.5px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;
  }
  footer{margin-top:64px;color:var(--ink-soft);font-size:16px}
  footer p{margin:0 0 14px;max-width:52ch}
  footer .sig{
    font-family:"Bodoni Moda",Didot,serif;font-style:italic;font-size:22px;
    color:var(--ink);margin-top:26px;
  }
  .fineprint{font-size:13.5px;color:var(--ink-faint);margin-top:26px;max-width:56ch}

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
  }