/* Written by build.py from 00-05's website kit and era colours (ST-15, 00 L-24). Do not edit here:
   change 00-05 and build again. */
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/saira-condensed-latin-500-normal.woff2?v=9458755c") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/saira-condensed-latin-600-normal.woff2?v=be8748fb") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/saira-condensed-latin-700-normal.woff2?v=0bebd662") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2?v=24828974") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2?v=4d42c785") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2?v=90d9c226") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2?v=bb87500e") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2?v=d32f0e07") format("woff2"); }
:root {
  --wum-display: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --wum-body: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wum-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --wum-stage-bg: #07060A;
  --wum-stage-glass: rgba(16, 12, 11, 0.6);
  --wum-stage-glass-line: rgba(255, 236, 220, 0.14);
  --wum-stage-ink: #F3ECE4;
  --wum-stage-muted: #B5A99E;
  --wum-stage-accent: #E0825E;
  --wum-stage-focus: #E9C28E;
  --wum-card-bg: #F5F2EE;
  --wum-card-ink: #1D1B19;
  --wum-card-muted: #6A635C;
  --wum-card-rule: #E3DED7;
  --wum-card-accent: #B4502B;
  --wum-card-grey: #9A948D;
  --wum-page-bg: #FBF9F6;
  --wum-page-ink: #1D1B19;
  --wum-page-muted: #6A635C;
  --wum-real: #2A5FA8;
  --wum-real-soft: #E4ECF7;
  --wum-real-stage: #8DB8F2;
  --wum-real-fill: #2A5FA8;
  --wum-world: #7A5A0C;
  --wum-world-soft: #F6EDD6;
  --wum-world-stage: #E8C063;
  --wum-world-fill: #A67A12;
  --wum-art: #6A3F7C;
  --wum-art-soft: #EFE6F3;
  --wum-art-stage: #C4A6E0;
  --wum-art-fill: #7A4A8C;
  --wum-sea: #2F6FA0;
  --wum-sea-stage: #8ECDE6;
  --wum-era-ancient: #7A6034;
  --wum-era-ancient-stage: #D2B27A;
  --wum-era-today: #5A606A;
  --wum-era-today-stage: #B8BEC6;
  --wum-era-robots: #6F737A;
  --wum-era-robots-stage: #A3A8AE;
  --wum-era-crew: #2A5FA8;
  --wum-era-crew-stage: #7FA8E0;
  --wum-era-town: #2D7A71;
  --wum-era-town-stage: #6CC3B5;
  --wum-era-city: #B4502B;
  --wum-era-city-stage: #E88A62;
  --wum-era-cities: #8E3B63;
  --wum-era-cities-stage: #E59ABD;
  --wum-era-far: #3E3A7A;
  --wum-era-far-stage: #A7A2E8;
}
/* The website kit's shared pieces (00-05 ST-15). build.py puts the colour and font tokens above this part.
   Step 1. The stage: the dark page every experience sits on.
   Step 2. Labels: the Real, Our world and Art chips, on the stage and on a light card.
   Step 3. The light card every fact sits on.
   Step 4. The navigation bar: home and every experience.
   Step 5. Era colours: a dot and a bar in each era's colour, for time controls.
   Step 6. Pop-ups that explain a word.
   Step 7. The light page: a light page on which a dark cinema frame holds the stage (owner, 1 October 2026).
   Step 8. Arriving through a doorway from the home page: the page starts in the stage colour and fades in. */

/* Step 1. The stage */
.wum-stage { background: var(--wum-stage-bg); color: var(--wum-stage-ink); font-family: var(--wum-body); }
.wum-stage :focus-visible { outline: 2px solid var(--wum-stage-focus); outline-offset: 2px; }
.wum-eyebrow { font: 500 11px/1.2 var(--wum-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--wum-stage-muted); }

/* Step 2. Labels */
.wum-chip { display: inline-block; font: 500 10.5px/1 var(--wum-mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; background: transparent; }
.wum-chip.real { color: var(--wum-real-stage); }
.wum-chip.world { color: var(--wum-world-stage); }
.wum-chip.art { color: var(--wum-art-stage); }
.wum-card .wum-chip { border-color: transparent; }
.wum-card .wum-chip.real { color: var(--wum-real); background: var(--wum-real-soft); }
.wum-card .wum-chip.world { color: var(--wum-world); background: var(--wum-world-soft); }
.wum-card .wum-chip.art { color: var(--wum-art); background: var(--wum-art-soft); }

/* Step 3. The light card */
.wum-card { background: var(--wum-card-bg); color: var(--wum-card-ink); border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); }
.wum-card :focus-visible { outline: 2px solid var(--wum-card-accent); outline-offset: 2px; }

/* Step 4. The navigation bar */
.wum-nav { display: inline-flex; align-items: center; gap: 2px; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--wum-stage-glass); border: 1px solid var(--wum-stage-glass-line); border-radius: 999px; padding: 3px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font: 500 12px/1 var(--wum-body); }
.wum-nav a { color: var(--wum-stage-muted); text-decoration: none; padding: 7px 11px; border-radius: 999px; white-space: nowrap; }
.wum-nav a:hover { color: var(--wum-stage-ink); }
.wum-nav a[aria-current] { color: var(--wum-stage-ink); background: rgba(255, 240, 228, 0.14); }
.wum-nav a.wum-home { font: 600 12px/1 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wum-stage-accent); }
.wum-nav::-webkit-scrollbar { display: none; }
.wum-nav a.wum-home { display: inline-flex; align-items: center; gap: 8px; }
.wum-nav a.wum-join { margin-left: 4px; color: #FFE3CC; background: rgba(224, 130, 94, 0.22); border: 1px solid rgba(224, 130, 94, 0.5); }
.wum-nav a.wum-join:hover { background: rgba(224, 130, 94, 0.36); }
.wum-nav .wum-drop-btn { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 7px 9px 7px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--wum-stage-muted); font: inherit; white-space: nowrap; cursor: pointer; }
.wum-nav .wum-drop-btn svg { width: 13px; height: 13px; opacity: 0.6; transition: transform 0.25s; }
.wum-nav .wum-drop-btn:hover, .wum-nav .wum-drop-btn[aria-expanded="true"] { color: var(--wum-stage-ink); }
.wum-nav .wum-drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.wum-nav .wum-drop-btn.here { color: var(--wum-stage-ink); background: rgba(255, 240, 228, 0.14); }
.wum-drop { position: fixed; z-index: 880; width: 280px; padding: 12px; border-radius: 18px; background: rgba(14, 11, 16, 0.94); border: 1px solid var(--wum-stage-glass-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8); color: var(--wum-stage-ink);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s, transform 0.25s cubic-bezier(.2,.8,.2,1), visibility 0s 0.25s; }
.wum-drop.open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.25s cubic-bezier(.2,.8,.2,1); }
.wum-drop-h { display: flex; align-items: center; gap: 9px; margin: 2px 6px 8px; font: 500 10.5px/1 var(--wum-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--wum-stage-accent); }
.wum-drop-h b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #F2C9A6; color: #1D1210; font: 700 11px/1 var(--wum-display); letter-spacing: 0; }
.wum-drop a, .wum-drop-item { display: flex; align-items: center; gap: 11px; padding: 10px 10px; border-radius: 11px; color: var(--wum-stage-ink); text-decoration: none; font: 600 14.5px/1.2 var(--wum-body); }
.wum-drop a:hover, .wum-drop a:focus-visible { background: rgba(255, 240, 228, 0.09); outline: none; }
.wum-drop i { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(255, 240, 228, 0.35); }
.wum-drop i.on { background: #E0825E; border-color: #FFC9A6; box-shadow: 0 0 10px rgba(224, 130, 94, 0.8); }
.wum-drop-item { color: var(--wum-stage-muted); }
.wum-drop-item small { margin-left: auto; font: 500 10px/1 var(--wum-mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; }
.wum-drop-item.here { color: var(--wum-stage-ink); background: rgba(224, 130, 94, 0.14); }
.wum-drop-item.here i { background: #FFE7C2; border-color: #fff; }
.wum-logo { width: 20px; height: 20px; flex: none; display: block; filter: drop-shadow(0 0 6px rgba(224, 130, 94, 0.35)); }
.wum-burger { display: none; flex: none; width: 40px; height: 36px; margin-left: auto; border: 0; border-radius: 999px; background: transparent; cursor: pointer; position: relative; }
.wum-burger span { position: absolute; left: 11px; right: 11px; height: 1.6px; border-radius: 2px; background: var(--wum-stage-ink); transition: transform 0.3s; }
.wum-burger span:nth-child(1) { top: 12px; } .wum-burger span:nth-child(2) { top: 17.2px; right: 15px; } .wum-burger span:nth-child(3) { top: 22.4px; }
.wum-burger:focus-visible { outline: 2px solid var(--wum-stage-focus); }
.wum-nav-page .wum-burger { display: block; height: 30px; }
.wum-nav-page .wum-burger span:nth-child(1) { top: 9px; } .wum-nav-page .wum-burger span:nth-child(2) { top: 14.2px; } .wum-nav-page .wum-burger span:nth-child(3) { top: 19.4px; }
@media (max-width: 700px) {                /* on a phone: the logo and name, and a menu button for everything else (owner, 3 October 2026) */
  .wum-nav a:not(.wum-home), .wum-nav .wum-drop-btn { display: none; }
  .wum-nav a.wum-home { font-size: 11px; letter-spacing: 0.12em; padding: 6px 10px 6px 6px; }
  .wum-burger { display: block; }
}
/* The menu: full screen, dark, one big line per place */
.wum-menu { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 10px) 18px calc(env(safe-area-inset-bottom, 0px) + 28px);
  background: radial-gradient(120% 60% at 50% 0%, rgba(224, 130, 94, 0.16), rgba(7, 6, 10, 0) 60%), rgba(7, 6, 10, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--wum-stage-ink); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.3s, transform 0.35s cubic-bezier(.2,.8,.2,1), visibility 0s 0.35s; overflow-y: auto; }
.wum-menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s, transform 0.35s cubic-bezier(.2,.8,.2,1); }
html.wum-menu-open { overflow: hidden; }
.wum-menu-top { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.wum-menu-home { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--wum-stage-accent); font: 600 11.5px/1 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.wum-menu-home .wum-logo { width: 24px; height: 24px; }
.wum-menu-x { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wum-stage-glass-line); background: rgba(255, 240, 228, 0.05); cursor: pointer; }
.wum-menu-x span { position: absolute; left: 13px; right: 13px; top: 21px; height: 1.6px; background: var(--wum-stage-ink); border-radius: 2px; }
.wum-menu-x span:first-child { transform: rotate(45deg); } .wum-menu-x span:last-child { transform: rotate(-45deg); }
.wum-menu-list { display: flex; flex-direction: column; gap: 8px; margin: 22px 0 22px; }
.wum-menu-list a { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 34px 1fr 22px; align-items: center; gap: 10px;
  padding: 16px 14px; border-radius: 14px; text-decoration: none; color: var(--wum-stage-ink); border: 1px solid var(--wum-stage-glass-line); background: #141010;
  opacity: 0; transform: translateY(10px); transition: opacity 0.4s, transform 0.5s cubic-bezier(.2,.8,.2,1); }
/* each section over its own picture (00-05 website.menu 'picture'), darkened on the left where the words sit */
.wum-menu-list a::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--wum-pic, none) 50% 50% / cover no-repeat; transform: scale(1.04); transition: transform 0.8s cubic-bezier(.2,.8,.2,1); }
.wum-menu-list a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,6,10,0.88) 0%, rgba(7,6,10,0.62) 48%, rgba(7,6,10,0.18) 100%); }
.wum-menu-list a:active::before, .wum-menu-list a:hover::before { transform: scale(1.1); }
.wum-menu-list b, .wum-menu-list small { text-shadow: 0 1px 10px rgba(0,0,0,0.7); }
.wum-menu.open .wum-menu-list a { opacity: 1; transform: none; }
.wum-menu.open .wum-menu-list a:nth-child(2) { transition-delay: 0.04s; } .wum-menu.open .wum-menu-list a:nth-child(3) { transition-delay: 0.08s; }
.wum-menu.open .wum-menu-list a:nth-child(4) { transition-delay: 0.12s; } .wum-menu.open .wum-menu-list a:nth-child(5) { transition-delay: 0.16s; } .wum-menu.open .wum-menu-list a:nth-child(6) { transition-delay: 0.2s; } .wum-menu.open .wum-menu-list a:nth-child(7) { transition-delay: 0.24s; }
.wum-menu-list i { font: 500 11px/1 var(--wum-mono); font-style: normal; color: var(--wum-stage-accent); letter-spacing: 0.1em; }
.wum-menu-list b { display: block; font: 700 27px/1 var(--wum-display); text-transform: uppercase; letter-spacing: 0.01em; }
.wum-menu-list small { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.4; color: rgba(243,236,228,0.82); }
.wum-menu-list svg { width: 20px; height: 20px; color: var(--wum-stage-accent); }
.wum-menu-list a[aria-current="page"] b { color: var(--wum-stage-accent); }
.wum-menu-join { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 500 11px/1 var(--wum-mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: #FFE3CC; padding: 10px 14px; border-radius: 999px; background: rgba(224, 130, 94, 0.18); border: 1px solid rgba(224, 130, 94, 0.5); }
.wum-menu-join::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wum-stage-accent); box-shadow: 0 0 8px var(--wum-stage-accent); }
.wum-menu-privacy { margin-top: 14px; align-self: flex-start; font: 500 10px/1 var(--wum-mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243,236,228,.55); text-decoration: none; }
.wum-menu-privacy:hover { color: rgba(243,236,228,.9); }
/* This page's own parts in the phone menu (a page other than home): a short numbered list above the rest of the site */
.wum-menu-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; padding-top: 6px; border-top: 1px solid var(--wum-stage-glass-line); }
.wum-menu-group p { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; font: 700 17px/1 var(--wum-display); text-transform: uppercase; color: var(--wum-stage-ink); }
.wum-menu-group p b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #F2C9A6; color: #1D1210; font-size: 11px; }
.wum-menu-group a, .wum-menu-group span { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--wum-stage-muted); text-decoration: none; font: 500 14px/1.25 var(--wum-body); }
.wum-menu-group a { color: var(--wum-stage-ink); } .wum-menu-group span.here { color: #FFE2C8; font-weight: 700; }
.wum-menu-group i { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255, 240, 228, 0.35); }
.wum-menu-group i.on { background: #E0825E; border-color: #FFC9A6; }
.wum-menu-group-link { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; color: var(--wum-stage-ink); text-decoration: none; font: 700 20px/1 var(--wum-display); text-transform: uppercase; border-bottom: 1px solid var(--wum-stage-glass-line); }
.wum-menu-group-link svg { width: 18px; height: 18px; color: var(--wum-stage-accent); }
.wum-menu-h { margin: 22px 0 8px; font: 500 10.5px/1 var(--wum-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--wum-stage-muted); }
.wum-menu-page { display: flex; flex-direction: column; border-top: 1px solid var(--wum-stage-glass-line); }
.wum-menu-page a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 14px 2px; color: var(--wum-stage-ink); text-decoration: none; border-bottom: 1px solid var(--wum-stage-glass-line); }
.wum-menu-page i { font: 500 11px/1 var(--wum-mono); font-style: normal; color: var(--wum-stage-accent); letter-spacing: 0.1em; }
.wum-menu-page b { font: 700 22px/1 var(--wum-display); text-transform: uppercase; }
.wum-menu-page svg { width: 18px; height: 18px; color: var(--wum-stage-accent); }
.wum-menu-list.wum-menu-small { margin-top: 0; }
.wum-menu-list.wum-menu-small b { font-size: 19px; }
.wum-menu-list.wum-menu-small small { display: none; }
@media (prefers-reduced-motion: reduce) { .wum-menu, .wum-menu-list a { transition: none; } }

/* Step 5. Era colours */
.wum-era-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wum-era-dot, var(--wum-stage-muted)); }

/* Step 6. Pop-ups that explain a word (04-03-01 CF-15): a dotted underline, and a small light card */
[data-wum-tip] { text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: 3px; cursor: help; border-radius: 3px; }
[data-wum-tip]:focus-visible { outline: 2px solid var(--wum-stage-accent); outline-offset: 2px; }
.wum-tipbox { position: fixed; z-index: 1000; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; background: var(--wum-card-bg); color: var(--wum-card-ink); font: 400 13px/1.45 var(--wum-body); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); pointer-events: none; }
.wum-tipbox[hidden] { display: none; }

/* Step 7. The light page: a light page on which a dark cinema frame holds the stage (owner, 1 October 2026) */
.wum-page { background: var(--wum-page-bg); color: var(--wum-page-ink); font-family: var(--wum-body); }
.wum-page .wum-eyebrow { color: var(--wum-page-muted); }
.wum-page :focus-visible { outline: 2px solid var(--wum-card-accent); outline-offset: 2px; }
.wum-page .wum-nav { background: #fff; border-color: var(--wum-card-rule); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 3px rgba(40, 20, 10, 0.06); }
.wum-page .wum-nav a { color: var(--wum-page-muted); }
.wum-page .wum-nav a:hover { color: var(--wum-page-ink); }
.wum-page .wum-nav a[aria-current] { color: var(--wum-page-ink); background: var(--wum-card-bg); }
.wum-page .wum-nav a.wum-home { color: var(--wum-card-accent); }

/* Step 8. Arriving through a doorway from the home page (wum.js Step 6) */
html.wum-arrive::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; background: var(--wum-stage-bg); pointer-events: none; transition: opacity 1.1s ease; }
html.wum-arrive.wum-arrived::after { opacity: 0; }
html.wum-arrive.wum-snap::after { background: var(--wum-snap) center / 100% 100% no-repeat, var(--wum-stage-bg); transition: opacity 0.8s ease; }
/* A page's own main way onward in place of Join (data-cta-href), and in the menu above the site's sections. */
.wum-menu-cta { margin: 6px 0 18px; }