/* The expo hub. Same look as the class quiz: ink and gold, Crimson Pro for
   display, IBM Plex Sans for reading. Nothing under 13px, sentence case,
   upright labels, 4px corners. */

:root {
  --ink: #0E0B08;
  --ink-2: #17130F;
  --ink-3: #241E17;
  --paper: #F5F1E8;
  --hairline: #3A3126;
  --gold: #E0B94A;
  --gold-line: #C9931F;
  --on-ink: #C6BCA8;
  --on-ink-dim: #A2978A;
  --serif: 'Crimson Pro', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --arrive: linear(0, 0.0462, 0.1597, 0.3083, 0.4674, 0.6197, 0.7543, 0.8655, 0.9513, 1.0129, 1.0528, 1.0749, 1.0832, 1.0815, 1.0733, 1.0615, 1.0483, 1.0353, 1.0235, 1.0137, 1.0059, 1.0002, 0.9964, 0.9941, 0.9932, 0.9931, 0.9936, 0.9946, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background: radial-gradient(90% 60% at 50% 30%, #2A2117 0%, #16110C 50%, var(--ink) 100%) fixed, var(--ink);
  color: var(--on-ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.map {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url(/art/map.webp) 50% 38% / min(980px, 170vw) auto no-repeat;
  opacity: .08; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 60% 48% at 50% 40%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 48% at 50% 40%, #000 55%, transparent 100%);
}

main {
  position: relative; z-index: 1;
  width: min(34rem, 100%); margin: 0 auto;
  padding: max(48px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 56px max(16px, env(safe-area-inset-left));
}

.top { text-align: center; margin-bottom: 36px; }
.logo { width: min(220px, 60vw); height: auto; display: block; margin: 0 auto 20px; }
h1 { font: 600 clamp(38px, 10vw, 52px)/1.05 var(--serif); color: var(--paper); margin: 0 0 12px; text-wrap: balance; }
.lede { font: 400 19px/1.45 var(--sans); margin: 0; }

.doors { display: grid; gap: 14px; }
.door {
  display: grid; grid-template-columns: 72px 1fr; grid-template-areas: "art text" "art go";
  column-gap: 16px; row-gap: 10px; align-items: start;
  padding: 18px; border: 1px solid var(--hairline); border-radius: 4px;
  background: color-mix(in srgb, var(--ink-2) 85%, transparent);
  color: inherit; text-decoration: none;
  transition: border-color .15s, background .15s;
  animation: rise .7s var(--arrive) both;
}
.door:nth-child(2) { animation-delay: .06s; }
.door:nth-child(3) { animation-delay: .12s; }
.door:hover { border-color: var(--gold-line); background: var(--ink-3); }
.door img { grid-area: art; width: 72px; height: 72px; object-fit: cover; border-radius: 4px; }
.door__text { grid-area: text; }
.door__text b { display: block; font: 600 24px/1.15 var(--serif); color: var(--paper); margin-bottom: 4px; }
.door__text span { display: block; font: 400 15px/1.45 var(--sans); color: var(--on-ink-dim); }
.door__go { grid-area: go; font: 600 15px var(--sans); color: var(--gold); }
.door__go::after { content: " \2192"; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .door { animation: none; } }