@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,800;9..144,900&display=swap');

:root { --paper: #f3f0ea; --ink: #382f23; --cream: #fff0c9; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); }

.country-picker {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(160px, 31svh, 390px) 24px 80px;
  background:
    radial-gradient(circle at 30% 20%, rgb(255 255 255 / 32%), transparent 29%),
    radial-gradient(circle at 80% 65%, rgb(214 207 196 / 23%), transparent 30%),
    var(--paper);
}

.brand-logo {
  display: block;
  width: min(43vw, 240px);
  height: auto;
  mix-blend-mode: multiply;
}
.divider { width: 46px; height: 2px; margin: clamp(75px, 9svh, 115px) 0 clamp(49px, 6svh, 76px); background: var(--ink); }

.locations { width: min(100%, 335px); display: grid; gap: 29px; }
.locations a { display: flex; align-items: center; gap: 30px; color: var(--ink); text-decoration: none; font: 500 clamp(16px, 4vw, 20px)/1 'DM Mono', monospace; letter-spacing: 1.2px; }
.locations a:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; border-radius: 3px; }
.locations a:hover { opacity: .65; }
.soon { display: inline-block; margin: 8px 0 0 2px; padding: 4px 7px; border: 1px solid currentColor; border-radius: 999px; font: 500 9px/1 'DM Mono', monospace; letter-spacing: .2px; vertical-align: middle; transform: rotate(-3deg); }

.nigeria-icon { width: 38px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgb(56 47 35 / 18%); border-radius: 12px 16px 12px 16px; background: #fff9ed; font-size: 21px; transform: rotate(-6deg); box-shadow: 2px 3px 0 rgb(56 47 35 / 12%); }
.globe-icon { width: 34px; height: 34px; display: inline-block; flex: 0 0 auto; border: 2px solid var(--ink); border-radius: 50%; position: relative; }
.globe-icon::before, .globe-icon::after { content: ''; position: absolute; inset: -2px 8px; border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); border-radius: 50%; }.globe-icon::after { inset: 14px -2px auto; height: 1.5px; border: 0; background: var(--ink); border-radius: 0; }
.notice { position: fixed; bottom: 34px; margin: 0; opacity: 0; transform: translateY(10px); font: 400 12px 'DM Mono', monospace; transition: .2s; pointer-events: none; }.notice:target { opacity: 1; transform: translateY(0); }

@media (min-width: 700px) { .country-picker { padding-top: clamp(150px, 25svh, 300px); } }