/* 00 · find (sections/find.js). The town: a preview on the stage, and the whole of "Find the stamp" inside a fullscreen room. */

/* The town is a drawing. Like every drawing on this page it keeps white paper and black ink when the lights go off. */
:root { --find-paper: #ffffff; --find-ink: #10110f; }

/* ------------------------------------------------------------ the stage: a preview of the town */
.find-preview { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; container-type: size; background: var(--find-paper); cursor: pointer; text-align: left; }
.find-preview__art, .find-glass__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.find-preview img { padding: 0 !important; }   /* the lens must match the crop exactly; the dark-mode paper backing stays */

/* the magnifier: a circle outline, a short handle, and the same drawing seen twice as large inside it */
.find-glass { position: absolute; left: 58cqw; top: 42cqh; width: 4.8rem; height: 4.8rem; translate: -50% -50%; pointer-events: none; }
.find-glass__lens { position: absolute; inset: 0; overflow: hidden; border: 2px solid var(--find-ink); border-radius: 50%; background: var(--find-paper); }
/* the lens holds the same crop laid out --s times larger, so the spot under the glass stays put and is rasterised at full size */
.find-preview .find-glass__art { --s: 2; width: calc(var(--s) * 100cqw); height: calc(var(--s) * 100cqh); max-width: none; max-height: none; left: calc(50% - var(--s) * 58cqw); top: calc(50% - var(--s) * 42cqh); transition: width 0.5s var(--settle), height 0.5s var(--settle), left 0.5s var(--settle), top 0.5s var(--settle); }
.find-glass::after { content: ""; position: absolute; left: 85%; top: 85%; width: 2rem; height: 4px; margin-top: -2px; background: var(--find-ink); transform-origin: 0 50%; rotate: 45deg; }
.find-preview:hover .find-glass__art, .find-preview:focus-visible .find-glass__art { --s: 2.6; }
.find-preview__label { position: absolute; left: 1rem; bottom: 1rem; padding: 0.6rem 0.8rem 0.5rem; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); white-space: nowrap; }
.find-preview:hover .find-preview__label { background: var(--canton); color: var(--anthracite); }

/* ------------------------------------------------------------ the room */
.find-room { position: absolute; inset: 0; overflow: hidden; background: var(--find-paper); color: var(--ink); }
.find-map { display: block; touch-action: none; cursor: grab; }
.find-map:active { cursor: grabbing; }
.find-map:focus-visible { outline: 2px solid var(--find-ink); outline-offset: -4px; }
/* lights off: the drawn town goes dark like every other drawing (white paper to the night paper, ink to white) */
html[data-lights="off"] .find-map { filter: invert(0.875) hue-rotate(180deg); }

/* places ride on the map */
.find-places { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.find-place { position: absolute; left: 0; top: 0; pointer-events: auto; padding: 0.55rem 0.7rem 0.5rem; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); white-space: nowrap; transition: background 0.2s; will-change: transform; }
.find-place::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 0.9rem; background: var(--find-ink); }
.find-place:hover, .find-place:focus-visible { background: var(--canton); color: var(--anthracite); }
.find-place .q-pretitle { font-size: 0.6875rem; }
.find-place .q-pretitle::before { display: none; }

/* the loop around the clerk who had it */
.find-loop { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s; will-change: transform; }
.find-loop.is-on { opacity: 1; }
.find-loop img { width: 100%; height: auto; }

/* a remark about the clerk you tapped */
.find-remark { position: absolute; left: 0; top: 0; z-index: 6; margin: 0; padding: 0.55rem 0.75rem 0.5rem; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 1px var(--paper); font: 500 0.875rem/1.2 var(--sans); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.find-remark.is-on { opacity: 1; }

/* corners */
.find-corner { position: absolute; z-index: 5; background: var(--paper); color: var(--ink); padding: 1rem 1.15rem; box-shadow: 0 0 0 1px var(--gray-line); }
.find-corner--tr { top: 0; right: 0; text-align: right; min-width: 9.5rem; }
.find-corner--tr .q-pretitle { color: var(--gray-text); }
.find-time { font-size: 2.1rem; line-height: 1; margin-top: 0.55rem; }
.find-corner--bl { bottom: 0; left: 0; }
.find-corner__acts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: var(--small); }
.find-corner__acts button:disabled { color: var(--gray-text); text-decoration: none; cursor: default; }
.find-corner--br { bottom: 0; right: 0; display: flex; gap: 0.4rem; padding: 0.6rem; }
.find-key { min-width: 2.9rem; height: 2.9rem; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--ink); font: 800 1.4rem/1 var(--serif); transition: background 0.15s; }
.find-key--wide { padding: 0 1rem; font: 600 0.875rem/1 var(--sans); }
.find-key:hover, .find-key:focus-visible { background: var(--canton); color: var(--anthracite); }
.find-key:active { transform: translateY(1px); }

/* ------------------------------------------------------------ sheets */
.find-veil { position: absolute; inset: 0; z-index: 8; background: color-mix(in srgb, var(--paper) 84%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.find-veil.is-on { opacity: 1; pointer-events: auto; }

.find-sheet {
  position: absolute; z-index: 9; left: 50%; top: 50%; width: min(46rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 40px 80px -50px rgba(16, 17, 15, 0.55);
  transform: translate(-50%, -46%) rotate(-0.6deg); opacity: 0; visibility: hidden;
  transition: transform 0.45s var(--settle), opacity 0.3s, visibility 0s 0.45s;
}
.find-sheet.is-open { transform: translate(-50%, -50%) rotate(-0.6deg); opacity: 1; visibility: visible; transition: transform 0.45s var(--settle), opacity 0.3s; }
.find-sheet .q-pretitle { margin-bottom: 1.2rem; }
.find-sheet h2 { margin-bottom: 1.5rem; }
.find-sheet .q-lede { margin-bottom: 1rem; }
.find-sheet__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.find-sheet__close { position: sticky; top: 0; float: right; margin: -0.4rem -0.4rem 0 1rem; padding: 0.7rem 0.9rem; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); font: 600 0.8125rem/1 var(--sans); z-index: 2; }
.find-sheet__close:hover { background: var(--canton); color: var(--anthracite); }

/* the instructions */
.find-sheet--intro { width: min(52rem, calc(100% - 2rem)); padding-right: clamp(1.75rem, 15vw, 14rem); }
.find-sheet--intro h2 { font-size: clamp(2.4rem, 4.8vw, 4.4rem); }
.find-loading { margin-top: 1rem; }
.find-sheet__stamp { position: absolute; right: clamp(0.5rem, 2vw, 2rem); bottom: clamp(1rem, 3vw, 2.5rem); width: clamp(6rem, 15vw, 13rem); transform: rotate(8deg); }

/* found: a card by the keys, the map still visible behind it */
.find-sheet--found { width: min(30rem, calc(100% - 2rem)); padding: clamp(1.5rem, 2.4vw, 2.25rem); padding-right: 9.5rem; left: auto; right: 1rem; top: auto; bottom: 4.6rem; transform: translateY(24px) rotate(0.8deg); }
.find-sheet--found.is-open { transform: rotate(0.8deg); }
.find-sheet--found h2 { font-size: clamp(2.2rem, 3.4vw, 3rem); margin-bottom: 1rem; }
.find-sheet--found .q-lede { font-size: 1.2rem; }
.find-sheet--found .q-body { font-size: 0.9375rem; }
.find-sheet--found .find-sheet__acts { margin-top: 1.4rem; }
.find-found__side { position: absolute; right: 1.25rem; top: 1.5rem; width: 6.75rem; display: grid; justify-items: center; gap: 0.5rem; }
.find-found__clerk { height: 11rem; width: auto; }
.find-found__stamp { font-size: 1.3rem; color: var(--ink); opacity: 0; }
.find-found__stamp.is-pressed { opacity: 1; }

/* a place */
.find-sheet--place { width: min(40rem, calc(100% - 2rem)); }
.find-sheet__art { width: 100%; margin-top: 2rem; }

/* what is this place */
.find-sheet--about { width: min(60rem, calc(100% - 2rem)); transform: translate(-50%, -46%); }
.find-sheet--about.is-open { transform: translate(-50%, -50%); }
.find-about__cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; margin-bottom: clamp(2rem, 4vw, 3rem); }
.find-about__cols img { width: 100%; max-width: 14rem; margin: 0 auto; }
.find-about__number { font-size: clamp(1.5rem, 4.2vw, 3.2rem); margin: 2.2rem 0 1rem; white-space: nowrap; }

/* ------------------------------------------------------------ phones */
@media (max-width: 880px) {
  .find-preview { height: 40svh; }   /* a definite height, so the lens's container units resolve (min-height alone leaves cqh at 0) */
}
@media (max-width: 700px) {
  .find-corner { padding: 0.75rem 0.85rem; }
  .find-corner--tr { min-width: 0; }
  .find-corner--tr .q-pretitle { display: none; }
  .find-time { font-size: 1.5rem; margin: 0; }
  .find-corner--bl { max-width: 56vw; }
  .find-key--wide { display: none; }
  .find-place .q-pretitle { font-size: 0.625rem; }
  .find-sheet--intro, .find-sheet--found { padding-right: clamp(1.5rem, 4vw, 3.5rem); }
  .find-sheet--found { right: 1rem; bottom: 4.4rem; }
  .find-sheet__stamp { position: static; display: block; margin: 1.5rem 0 0 auto; width: 7rem; }
  .find-found__side { position: static; width: auto; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1.25rem; }
  .find-found__clerk { height: 6.5rem; }
  .find-about__cols { grid-template-columns: minmax(0, 1fr); }
  .find-about__cols img { max-width: 8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .find-glass__art, .find-loop, .find-place, .find-remark, .find-veil, .find-sheet { transition: none; }
}


/* ---------------------------------------------------------- Find the One (find-one.js): twelve scenes in the same room */
.fo { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); background: var(--paper); color: var(--ink); overflow: hidden; }
.fo__clock { display: grid; place-items: center; min-width: 5.2rem; height: 3rem; padding: 0 0.8rem; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); font-size: 1.1rem; letter-spacing: 0.04em; }
.fo__map { position: relative; overflow: hidden; touch-action: none; cursor: grab; outline: none; background: var(--paper); }
.fo__map:active { cursor: grabbing; }
.fo__map:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
/* the drawing and whoever stands in it move as one: the zero that covers the drawn One, and the One */
.fo__scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.fo__img { display: block; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.fo__layer { position: absolute; display: block; background-repeat: no-repeat; pointer-events: none; }
.fo__layer[hidden] { display: none; }
/* before Begin the scene lies under a sheet of paper: nothing to study, nothing to move (find-one.js keeps it still too) */
.fo__veil { position: absolute; inset: 0; z-index: 4; background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.fo.is-waiting .fo__veil { opacity: 1; pointer-events: auto; transition: none; }
@media (prefers-reduced-motion: reduce) { .fo__veil { transition: none; } }
html[data-lights="off"] .fo__scene { filter: invert(0.875) hue-rotate(180deg); }
html[data-lights="off"] .fo__scene .fo__img { filter: none; background: none; padding: 0; }

/* split: the whole scene small (above on a tall screen, beside on a short one), a closer look in the rest */
.fo__over { display: none; position: relative; overflow: hidden; background: var(--paper); cursor: crosshair; touch-action: none; }
.fo.is-split { grid-template: minmax(0, 1fr) / minmax(0, 2fr) minmax(0, 3fr); }
.fo.is-split.is-tall { grid-template: auto minmax(0, 1fr) / minmax(0, 1fr); }
.fo.is-split .fo__over { display: block; }
.fo.is-split:not(.is-tall) .fo__over { border-right: 1px solid var(--gray-line); }
.fo.is-split.is-tall .fo__over { height: min(66.67vw, 36svh); border-bottom: 1px solid var(--gray-line); }
.fo__finder { position: absolute; left: 0; top: 0; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--paper); pointer-events: none; }
.fo__ring { position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 3px solid var(--ink); background: color-mix(in srgb, var(--canton) 55%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.fo.is-found .fo__ring { opacity: 1; }
.fo.is-split:not(.is-tall) .fo__corner--bl { left: calc(40% + 1rem); }
.fo.is-split:not(.is-tall) .fo__remark { left: 70%; }
.fo__corner { position: absolute; z-index: 3; bottom: 1.25rem; display: flex; gap: 0.5rem; }
.fo__corner--bl { left: 1rem; } .fo__corner--br { right: 1rem; }
.fo__hint, .fo__zoom { height: 3rem; padding: 0 0.9rem; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink); font: 600 var(--label)/1 var(--sans); letter-spacing: 0.055em; text-transform: uppercase; }
.fo__zoom { width: 3rem; padding: 0; font: 800 1.4rem/1 var(--serif); }
.fo__hint:disabled { opacity: 0.4; cursor: default; }
.fo__hint:not(:disabled):hover, .fo__zoom:hover { background: var(--canton); }
.fo__remark { position: absolute; z-index: 3; left: 50%; bottom: 4.2rem; translate: -50% 0; margin: 0; padding: 0.5rem 0.8rem; background: var(--ink); color: var(--paper); font: 500 0.875rem/1.2 var(--sans); white-space: nowrap; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.fo__remark.is-on { opacity: 1; }
.fo__sheet { position: absolute; z-index: 5; left: 50%; top: 50%; translate: -50% -50%; width: min(34rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); overflow: auto; padding: clamp(1.5rem, 2.6vw, 2.4rem); background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 30px 60px -40px rgba(16, 17, 15, 0.5); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 0.3s, transform 0.4s var(--settle); }
.fo__sheet.is-on { opacity: 1; pointer-events: auto; transform: none; }
.fo__sheet h2 { margin-bottom: 0.9rem; }
.fo__sheet .q-lede { margin-bottom: 0.6rem; }
.fo__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.fo__stamp { display: inline-flex; margin: 0.6rem 0.6rem 0.6rem 0; --tilt: -6deg; transform: rotate(var(--tilt)); }
.fo__stamp--pb { --tilt: 4deg; font-size: 0.95rem; }
.fo__stamp[hidden] { display: none; }
.fo__runs { width: 100%; border-collapse: collapse; margin-top: 0.8rem; font-size: var(--small); }
.fo__runs th { text-align: left; font: 600 var(--label)/1 var(--sans); letter-spacing: 0.055em; text-transform: uppercase; color: var(--gray-text); padding: 0.4rem 0; border-bottom: 2px solid var(--ink); }
.fo__runs td { padding: 0.45rem 0; border-bottom: 1px solid var(--gray-line); }
.fo__runs td.q-num { font-size: 0.95rem; letter-spacing: 0.03em; white-space: nowrap; }
.fo__runs em { font: 600 0.65rem/1 var(--sans); letter-spacing: 0.055em; text-transform: uppercase; font-style: normal; margin-left: 0.4rem; padding: 0.2rem 0.35rem; background: var(--canton); color: #10110f; }
.fo__runs tr.is-you td { background: color-mix(in srgb, var(--canton) 40%, transparent); }
.fo__boards { display: grid; gap: 1.2rem; }
.fo__board h3 { font-size: 1.15rem; }
/* found: a card beside the One on a wide screen, over the small scene when split side by side, along the bottom otherwise */
.fo__sheet--found { left: auto; right: 1.25rem; translate: 0 -50%; width: min(30rem, calc(45% - 1.25rem)); max-height: calc(100% - 1.5rem); }
.fo.is-split:not(.is-tall) .fo__sheet--found { left: 0.75rem; right: auto; width: calc(40% - 1.5rem); }
@media (max-width: 759px) {
  .fo__sheet { padding: 1.25rem; }
  .fo__remark { bottom: 4.6rem; }
  .fo:not(.is-split) .fo__sheet--found, .fo.is-split.is-tall .fo__sheet--found { left: 50%; right: auto; top: auto; bottom: 0.75rem; translate: -50% 0; width: calc(100% - 1.5rem); max-height: 58%; }
  .fo.is-split.is-tall .fo__sheet--found { top: 0.75rem; bottom: auto; }
  .fo__sheet--found .fo__runs tbody tr:nth-child(n + 4) { display: none; }
  .fo__runs td.q-num { font-size: 0.8rem; letter-spacing: 0; }
  .fo__runs em { display: block; width: max-content; margin: 0.25rem 0 0; }
}
.fo__runs th, .fo__runs td { padding-right: 0.6rem; }
.fo__runs th:last-child, .fo__runs td:last-child { padding-right: 0; }
.fo.is-split .fo__runs td.q-num { font-size: 0.8rem; letter-spacing: 0; }
.fo.is-split .fo__runs em { display: block; width: max-content; margin: 0.25rem 0 0; }
@media (max-height: 520px) { .fo__sheet { padding: 1rem 1.15rem; } .fo__sheet h2 { font-size: 1.6rem; margin-bottom: 0.4rem; } .fo__acts { margin-top: 0.8rem; } .fo__sheet--found .fo__runs tbody tr:nth-child(n + 3) { display: none; } }

/* the stage: a real scene, small, to drag and zoom */
.find-mini { position: relative; height: 100%; overflow: hidden; cursor: grab; box-shadow: 0 0 0 1px var(--gray-line); background: var(--paper); touch-action: none; }
.find-mini:active { cursor: grabbing; }
.find-mini__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.find-mini { aspect-ratio: 3 / 2; height: auto; max-height: 100%; width: 100%; align-self: center; }
html[data-lights="off"] .find-mini__img { background: none; padding: 0; }