:root {
  --wall: #d9d2bd;
  --wall-2: #cbc3ab;
  --paper: #fbf7ea;
  --paper-2: #f3ecd8;
  --ink: #1d1611;
  --ink-soft: #4b3f33;
  --magenta: #b0196e;
  --red: #c8102e;
  --brown: #5c2410;
  --blue: #1460a8;
  --wood-1: #e9c48c;
  --wood-2: #b9824a;
  --wood-3: #7f4f24;
  --pad-x: 18px;
  --rod: 18px;
  --top-m: 86px;
  --bot-m: 92px;
  --side-m: 26px;
  --unroll: 1;
  --sheet-top: calc(8px + var(--rod) - 4px);
  --sheet-h: calc(100% - var(--sheet-top) - var(--rod) - 10px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: 'Barlow', system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 50% 40%, rgba(255, 255, 245, .35), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--wall), var(--wall-2));
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }

/* ------------------------------------------------------------------ wall, rods, cord */
#wall { position: fixed; inset: 0; }
.nail {
  position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ddd, #555 60%, #222); box-shadow: 0 2px 3px rgba(0,0,0,.35); z-index: 5;
  display: none;
}
.cord { display: none; }

.rod {
  position: absolute; left: calc(var(--pad-x) - 10px); right: calc(var(--pad-x) - 10px); height: var(--rod); border-radius: 9px; z-index: 4;
  background:
    repeating-linear-gradient(90deg, rgba(90,50,20,.08) 0 3px, transparent 3px 11px, rgba(255,230,190,.08) 11px 13px, transparent 13px 29px),
    linear-gradient(180deg, var(--wood-1) 0%, #d7a86c 22%, var(--wood-2) 50%, var(--wood-3) 78%, #a36f3c 100%);
  box-shadow: 0 4px 8px rgba(40,25,10,.35), inset 0 1px 0 rgba(255,240,210,.6);
}
.rod i { position: absolute; top: -3px; width: 22px; height: calc(var(--rod) + 6px); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #c58b52, #6b3f1a 70%); box-shadow: 0 3px 6px rgba(0,0,0,.35); }
.rod i:first-of-type { left: -10px; }
.rod i:last-of-type { right: -10px; }
.rod-top { top: 8px; }
.rod-bottom { top: calc(var(--sheet-top) + max(0px, (100% - var(--sheet-top) - var(--rod) - 10px) * var(--unroll) - 6px)); }
.rod-bottom .roll { position: absolute; left: 8px; right: 8px; top: -7px; height: 12px; border-radius: 6px;
  background: linear-gradient(180deg, #fffdf4, #e6dcc2 60%, #c8bb9c); opacity: calc(1 - var(--unroll)); box-shadow: 0 1px 2px rgba(0,0,0,.2); }

/* ------------------------------------------------------------------ the sheet */
#sheet {
  position: absolute; left: var(--pad-x); right: var(--pad-x); top: var(--sheet-top);
  height: var(--sheet-h);
  background:
    radial-gradient(130% 90% at 50% 45%, transparent 60%, rgba(150,120,70,.12)),
    linear-gradient(180deg, var(--paper), var(--paper-2));
  box-shadow: 0 18px 40px -12px rgba(50,35,15,.45), 0 2px 0 rgba(0,0,0,.05);
  clip-path: inset(0 0 calc((1 - var(--unroll)) * 100%) 0);
  z-index: 2;
}
#sheet::after { /* faint cloth-backed wall-map waviness */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 120px, rgba(120,90,40,.035) 160px, transparent 200px);
}

/* ------------------------------------------------------------------ title cartouche */
#cartouche { position: absolute; top: 6px; left: 0; right: 0; text-align: center; pointer-events: none; z-index: 3; }
#kicker {
  font: 600 11px/1 'Barlow Condensed', sans-serif; letter-spacing: .5em; text-transform: uppercase; color: var(--ink-soft);
  padding-left: .5em;
}
#title, #subtitle { position: relative; margin: 0 auto; overflow: hidden; }
#title { font: 700 30px/1.15 'Barlow Condensed', sans-serif; letter-spacing: .16em; text-transform: uppercase; height: 36px; margin-top: 3px; }
#subtitle { font: italic 15px/1.2 'EB Garamond', serif; color: var(--ink-soft); height: 19px; }
#title span, #subtitle span { position: absolute; left: 0; right: 0; white-space: nowrap; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .6s, filter .6s; }
#title span.out, #subtitle span.out { transform: translateY(-70%); opacity: 0; filter: blur(3px); }
#title span.in, #subtitle span.in { transform: translateY(70%); opacity: 0; filter: blur(3px); }
#title .ink-line { display: inline-block; }

.margin-note { position: absolute; top: 18px; font: 600 12px 'Barlow Condensed', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); z-index: 3; }
#corner-left { left: var(--side-m); }
#corner-right { right: var(--side-m); }
#scale-top { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ map frame (neatline) */
#frame {
  position: absolute; left: var(--side-m); right: var(--side-m); top: var(--top-m); bottom: var(--bot-m);
  outline: 1.5px solid var(--ink); outline-offset: 4px; border: 1px solid var(--ink); background: #9fca6d;
}
#map { position: absolute; inset: 0; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23f2d29b'/%3E%3Cstop offset='1' stop-color='%239b6532'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 3 L31 27 L28 31 L3 3Z' fill='url(%23w)' stroke='%235a3510' stroke-width='1'/%3E%3Cpath d='M3 3 L7 5 L5 7Z' fill='%23222'/%3E%3C/svg%3E") 3 3, crosshair; }
#map.dragging, #map:active { cursor: grabbing; }
#map .maplibregl-canvas { cursor: inherit; }
#grain {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .45  0 0 0 0 .3  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#tears { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px rgba(120,90,40,.18); }
body.mode-3d #grain { opacity: .12; }

/* ------------------------------------------------------------------ emblem box */
#emblems {
  position: absolute; top: 12px; left: 12px; z-index: 3; display: grid; grid-template-columns: auto auto; gap: 4px 12px; align-items: end;
  background: rgba(251,247,234,.92); border: 1px solid rgba(30,20,10,.55); padding: 8px 10px 8px; box-shadow: 2px 3px 0 rgba(0,0,0,.08);
  transition: opacity .6s, transform .6s;
}
#emblems figure { margin: 0; text-align: center; }
#emblems figcaption { font: 500 10px 'Barlow Condensed', sans-serif; letter-spacing: .08em; color: var(--ink-soft); margin-top: 2px; }
#coat { width: 34px; height: 41px; display: block; margin: 0 auto; cursor: pointer; }
#flag { width: 62px; height: 41px; display: block; overflow: visible; }
.facts { grid-column: 1 / -1; margin: 4px 0 0; display: grid; grid-template-columns: auto auto; gap: 0 8px; font-size: 10.5px; line-height: 1.35; border-top: 1px solid rgba(0,0,0,.2); padding-top: 4px; }
.facts dt { color: var(--ink-soft); font-family: 'Barlow Condensed'; letter-spacing: .03em; }
.facts dd { margin: 0; font-weight: 600; text-align: right; }

/* ------------------------------------------------------------------ compass */
#compass { position: absolute; top: 10px; right: 10px; width: 96px; height: 96px; padding: 0; border: 0; background: none; z-index: 3; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.18)); }
#compass svg { width: 100%; height: 100%; overflow: visible; }
#rose { transition: transform .15s linear; }
#compass .dir text { font: 700 11px 'Barlow Condensed', sans-serif; fill: #3a2a12; }
#compass .dir text.n { fill: #b8202f; }
#compass:hover #rose { filter: brightness(1.05); }

/* ------------------------------------------------------------------ controls */
#controls { position: absolute; right: 12px; top: 122px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.stamp { width: 88px; height: 88px; padding: 0; border: 0; background: none; transform: rotate(-8deg); transition: transform .35s cubic-bezier(.3,1.6,.5,1); filter: drop-shadow(1px 3px 2px rgba(60,20,10,.3)); }
.stamp:hover { transform: rotate(-2deg) scale(1.06); }
.stamp:active { transform: rotate(-2deg) scale(.96); }
.stamp svg { width: 100%; height: 100%; overflow: visible; }
.stamp-bg { fill: #fff8e8; stroke: #b0196e; stroke-width: 3; }
.stamp-ring { fill: none; stroke: #b0196e; stroke-width: 1; stroke-dasharray: 2 2; }
.stamp-arc { font: 700 10.5px 'Barlow Condensed', sans-serif; letter-spacing: .14em; fill: #b0196e; }
.stamp-big { font: 700 30px 'Barlow Condensed', sans-serif; fill: #b0196e; letter-spacing: .02em; }
.stamp .stamp-arc textPath { transition: opacity .3s; }
body.mode-3d .stamp-bg { fill: #b0196e; }
body.mode-3d .stamp-arc, body.mode-3d .stamp-big { fill: #fff8e8; }
body.mode-3d .stamp-ring { stroke: #fff8e8; }
.stamp.spin svg { animation: spin 1.4s cubic-bezier(.4,.1,.2,1); }
@keyframes spin { to { transform: rotate(360deg); } }

.tab {
  display: flex; align-items: center; gap: 8px; padding: 7px 11px 7px 9px; min-height: 40px;
  background: #fffaf0; border: 1px solid rgba(30,20,10,.5); border-radius: 3px;
  font: 600 13px/1.05 'Barlow Condensed', sans-serif; letter-spacing: .04em; text-align: left; text-transform: uppercase;
  box-shadow: 2px 3px 0 rgba(0,0,0,.12); transition: transform .2s, background .2s, box-shadow .2s;
}
.tab:hover { transform: translateX(-3px) rotate(-1deg); }
.tab[aria-pressed='true'] { background: #fff1c9; box-shadow: inset 0 0 0 2px #e0262c, 2px 3px 0 rgba(0,0,0,.12); }
.tab svg { width: 20px; height: 20px; color: var(--ink); }
.kst { display: grid; grid-template-rows: 1fr 1fr 1fr; width: 20px; height: 20px; border: 1px solid rgba(0,0,0,.35); }
.kst i { background: #fff; }
.kst i:nth-child(2) { background: #e0262c; transition: background .4s; }
#btn-trails.cycle .kst i:nth-child(2) { animation: kst 2.4s steps(1) infinite; }
@keyframes kst { 0% { background: #e0262c; } 25% { background: #1d5fd0; } 50% { background: #169a3c; } 75% { background: #f5c400; } }

.zoom, .sound { display: flex; flex-direction: row; border: 1px solid rgba(30,20,10,.5); background: #fffaf0; box-shadow: 2px 3px 0 rgba(0,0,0,.12); border-radius: 3px; overflow: hidden; }
.zoom button, .sound button { width: 36px; height: 34px; border: 0; background: none; font: 600 20px/1 'Barlow', sans-serif; display: grid; place-items: center; }
.zoom button + button, .sound button + button { border-left: 1px solid rgba(30,20,10,.25); }
.zoom button:hover, .sound button:hover { background: #fff1c9; }
.sound svg { width: 19px; height: 19px; }
.sound button[aria-pressed='false'] { opacity: .4; }
.sound button[aria-pressed='false'] .waves { display: none; }

/* ------------------------------------------------------------------ inset */
#inset { position: absolute; left: 12px; bottom: 12px; margin: 0; z-index: 3; background: #eaf3fb; border: 1px solid rgba(30,20,10,.6); padding: 3px; box-shadow: 2px 3px 0 rgba(0,0,0,.1); cursor: pointer; }
#inset-svg { display: block; width: 170px; height: auto; }
#inset figcaption { position: absolute; left: 0; right: 0; bottom: 100%; font: 500 10px 'Barlow Condensed', sans-serif; letter-spacing: .06em; text-align: left; color: var(--ink-soft); padding-bottom: 2px; }
#inset path { stroke: #fff; stroke-width: .5; }
#inset .sk { fill: #d4162a; stroke: #6a0010; stroke-width: .7; }
#inset .vp { fill: rgba(212,22,42,.12); stroke: #1d1611; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ------------------------------------------------------------------ readout & caption */
#readout { position: absolute; right: 10px; bottom: 8px; z-index: 3; font: 500 12px 'Barlow Condensed', sans-serif; letter-spacing: .03em; background: rgba(251,247,234,.88); padding: 2px 7px; border: 1px solid rgba(0,0,0,.25); opacity: 0; transition: opacity .3s; pointer-events: none; font-variant-numeric: tabular-nums; }
#readout.on { opacity: 1; }
#tour-caption { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%) rotate(-1deg); z-index: 4; background: #fffaf0; padding: 10px 18px 12px; border: 1px solid rgba(0,0,0,.4); box-shadow: 3px 4px 0 rgba(0,0,0,.12); text-align: center; max-width: min(460px, 80%); }
#tour-caption::before { content: ''; position: absolute; left: 50%; top: -9px; width: 70px; height: 18px; margin-left: -35px; background: rgba(240,225,170,.75); transform: rotate(2deg); }
#tour-caption h3 { margin: 0; font: 700 28px/1 'Caveat', cursive; color: var(--brown); }
#tour-caption p { margin: 4px 0 0; font: italic 15px/1.3 'EB Garamond', serif; color: var(--ink-soft); }
#tour-caption small { display: block; margin-top: 6px; font: 600 10px 'Barlow Condensed'; letter-spacing: .14em; text-transform: uppercase; color: #9a8a70; }

/* ------------------------------------------------------------------ graticule labels */
#grat-labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; font: 500 10px 'Barlow Condensed', sans-serif; color: #2d5d94; transition: opacity .4s; }
#grat-labels span { position: absolute; white-space: nowrap; transform: translate(-50%, 0); }
#grat-labels span.v { transform: translate(0, -50%); }
body.mode-3d #grat-labels { opacity: 0; }

/* ------------------------------------------------------------------ bottom margin */
#bottom { position: absolute; left: var(--side-m); right: var(--side-m); bottom: 14px; height: calc(var(--bot-m) - 26px); display: flex; gap: 20px; align-items: stretch; justify-content: space-between; z-index: 3; }
#bottom h2 { margin: 0 0 3px; font: 700 11px 'Barlow Condensed', sans-serif; letter-spacing: .22em; text-transform: uppercase; }
#bottom h2 small { font-weight: 500; letter-spacing: .1em; color: var(--ink-soft); margin-left: 6px; }
#legend { flex: 1 1 auto; min-width: 0; overflow: hidden; }
#legend-items { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 1px 16px; justify-content: start; font-size: 11.5px; }
#legend-items li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#legend-items svg, #legend-items .sw { width: 22px; height: 12px; flex: none; }
#legend-items li.trail-legend { opacity: .35; transition: opacity .4s; }
body.trails-on #legend-items li.trail-legend { opacity: 1; }
#scale { flex: none; text-align: center; display: flex; flex-direction: column; justify-content: center; }
#scale-num { font: 700 15px 'Barlow Condensed', sans-serif; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
#scale-bar { margin-top: 3px; }
#scale-bar svg { display: block; overflow: visible; }
#scale-bar text { font: 500 9.5px 'Barlow Condensed', sans-serif; fill: var(--ink); }
#profile { flex: 0 0 330px; display: flex; flex-direction: column; }
#profile-canvas { width: 100%; flex: 1; min-height: 0; display: block; }
#hypso { display: flex; height: 9px; margin-top: 2px; position: relative; }
#hypso i { flex: 1; }
#hypso b { position: absolute; top: 10px; font: 500 9px 'Barlow Condensed'; transform: translateX(-50%); }
#btn-legend { display: none; }
#imprint { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font: 500 9px 'Barlow Condensed', sans-serif; letter-spacing: .08em; color: #8a7d68; z-index: 3; }

/* ------------------------------------------------------------------ popups as little paper notes */
.maplibregl-popup.note .maplibregl-popup-content {
  background: #fffaf0; border-radius: 2px; padding: 12px 16px 12px; box-shadow: 3px 5px 0 rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.25); font-family: 'Barlow', sans-serif; min-width: 170px; max-width: 280px; transform: rotate(-1.2deg);
  animation: pop .35s cubic-bezier(.3,1.6,.5,1);
}
.maplibregl-popup.note .maplibregl-popup-content::before { content: ''; position: absolute; left: 50%; top: -8px; width: 56px; height: 16px; margin-left: -28px; background: rgba(240,225,170,.8); transform: rotate(-3deg); }
.maplibregl-popup.note .maplibregl-popup-tip { display: none; }
.maplibregl-popup.note .maplibregl-popup-close-button { font-size: 18px; color: #8a7d68; right: 4px; top: 2px; }
@keyframes pop { from { transform: rotate(-6deg) scale(.6); opacity: 0; } }
.note h3 { margin: 0; font: 700 25px/1 'Caveat', cursive; color: var(--brown); }
.note .alt { font: 700 15px 'Barlow Condensed', sans-serif; letter-spacing: .05em; margin-top: 2px; }
.note .where { font: italic 14px/1.3 'EB Garamond', serif; color: var(--ink-soft); margin-top: 4px; }
.note .fact { margin-top: 7px; padding-top: 6px; border-top: 1px dashed rgba(0,0,0,.25); font: 500 17px/1.15 'Caveat', cursive; color: #1d4f8a; }
.note .stripe { display: inline-grid; grid-template-rows: 1fr 1fr 1fr; width: 16px; height: 16px; border: 1px solid rgba(0,0,0,.3); vertical-align: -2px; margin-right: 6px; }
.note .stripe i { background: #fff; }

.ripple { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #b0196e; pointer-events: none; animation: ripple .9s ease-out forwards; }
@keyframes ripple { from { transform: scale(.1); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

.maplibregl-ctrl-attrib { display: none !important; }

/* ------------------------------------------------------------------ intro state */
#hint {
  position: absolute; left: 0; right: 0; top: 22vh; text-align: center; z-index: 1; transition: opacity .8s, transform .8s; color: #4a4030;
}
.hint-title { font: 700 clamp(48px, 9vw, 104px)/.9 'Caveat', cursive; color: #3c3326; }
.hint-sub { font: 600 14px 'Barlow Condensed', sans-serif; letter-spacing: .4em; text-transform: uppercase; margin-top: 12px; }
#unroll-btn {
  margin-top: 34px; padding: 12px 30px 13px; background: #fffaf0; border: 1.5px solid #3c3326; border-radius: 2px;
  font: 700 18px 'Barlow Condensed', sans-serif; letter-spacing: .3em; text-transform: uppercase; box-shadow: 3px 4px 0 rgba(0,0,0,.18);
  transition: transform .2s; animation: bob 2.6s ease-in-out infinite;
}
#unroll-btn:hover { transform: translateY(-2px) rotate(-1deg); }
@keyframes bob { 50% { transform: translateY(5px); } }
.hint-small { margin-top: 14px; font: italic 14px 'EB Garamond', serif; color: #7a6d58; }
body:not(.rolled) #hint { opacity: 0; transform: translateY(30px); pointer-events: none; }
body.rolled .nail, body.rolled .cord { display: block; }
body.rolled .cord { position: absolute; left: calc(var(--pad-x) + 10px); right: calc(var(--pad-x) + 10px); top: -10px; height: 28px; width: calc(100% - 2 * var(--pad-x) - 20px); z-index: 3; }
.cord path { fill: none; stroke: #6b5a40; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
body.rolled #sheet, body.rolled .rod-bottom { transition: none; }

/* things that appear after the unroll */
#cartouche, #emblems, #compass, #controls, #inset, #bottom { transition: opacity .9s .2s; }
body.rolled #cartouche, body.rolled #emblems, body.rolled #compass, body.rolled #controls, body.rolled #inset, body.rolled #bottom { opacity: 0; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  #profile { flex-basis: 250px; }
  #legend-items { grid-template-rows: repeat(3, auto); font-size: 11px; }
  .facts { display: none; }
}
@media (max-width: 760px) {
  :root { --pad-x: 8px; --side-m: 10px; --top-m: 64px; --bot-m: 58px; --rod: 14px; }
  #title { font-size: 21px; height: 27px; letter-spacing: .1em; }
  #subtitle { font-size: 13px; height: 17px; }
  #kicker { font-size: 9px; }
  .margin-note { display: none; }
  #emblems { display: none; }
  #compass { width: 64px; height: 64px; }
  #controls { top: 80px; right: 8px; gap: 8px; }
  .stamp { width: 66px; height: 66px; }
  .tab .lbl { display: none; }
  .tab { padding: 7px; }
  #inset { display: none; }
  #legend, #profile { display: none; }
  #bottom { height: 40px; bottom: 12px; justify-content: center; gap: 12px; align-items: center; }
  #btn-legend { display: block; padding: 5px 10px; background: #fffaf0; border: 1px solid rgba(0,0,0,.45); font: 600 12px 'Barlow Condensed'; letter-spacing: .15em; text-transform: uppercase; }
  body.legend-open #legend { display: block; position: fixed; left: 12px; right: 12px; bottom: 70px; background: #fffaf0; border: 1px solid rgba(0,0,0,.4); padding: 10px 12px; box-shadow: 3px 4px 0 rgba(0,0,0,.15); z-index: 10; }
  body.legend-open #legend-items { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  #imprint { font-size: 8px; }
  #grat-labels { display: none; }
  #tour-caption h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01s !important; }
}

/* ------------------------------------------------------------------ the lesson begins: pointer, captions */
#pointer {
  position: absolute; left: 50%; top: 30px; width: 46vw; max-width: 620px; height: 12px; z-index: 6; pointer-events: none;
  transform-origin: 100% 50%; transform: translate(60vw, 40vh) rotate(-24deg); opacity: 0;
  transition: transform 1s cubic-bezier(.3,.8,.3,1), opacity .6s;
}
#pointer i {
  position: absolute; inset: 0; border-radius: 2px 6px 6px 2px;
  background: linear-gradient(180deg, #e9c48c, #b9824a 55%, #7f4f24);
  clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 65%);
  box-shadow: 0 6px 10px rgba(40,25,10,.3);
}
#pointer i::before { content: ''; position: absolute; left: -3px; top: 4px; width: 6px; height: 4px; border-radius: 50%; background: #2a2018; }
body.pointer-in #pointer { opacity: 1; transform: translate(-2%, 6px) rotate(-14deg); }
body.pointer-in #pointer.tap { transform: translate(-1%, -2px) rotate(-12.5deg); transition-duration: .09s; }
body:not(.rolled) #pointer { opacity: 0; transform: translate(60vw, 40vh) rotate(-24deg); }
#hint-caption { margin-top: 16px; min-height: 40px; font: 700 34px 'Caveat', cursive; color: #3c3326; opacity: 0; transition: opacity .6s; }
#hint-caption.on { opacity: 1; }
body.lesson #unroll-btn, body.lesson #hint-small { opacity: 0; pointer-events: none; transition: opacity .5s; }
#skip { position: absolute; right: 18px; bottom: 16px; z-index: 6; background: rgba(251,246,230,.85); border: 1px solid rgba(0,0,0,.3); padding: 6px 12px; font: 600 13px 'Barlow Condensed'; letter-spacing: .14em; text-transform: uppercase; }
#credits-link { position: absolute; left: 14px; bottom: 6px; z-index: 1; font: 500 10px 'Barlow Condensed'; letter-spacing: .08em; }
#credits-link a { color: rgba(60,45,30,.5); }
body:not(.rolled) #credits-link { display: none; }

/* the printed map also shows its age */
#age {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  background:
    radial-gradient(140% 120% at 50% 50%, transparent 62%, rgba(150,110,50,.35)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 .62  0 0 0 0 .5  0 0 0 0 .32  0 0 0 -2.6 1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
#map canvas { filter: sepia(.1) saturate(.93); }