/* still — the pages that mirror one another (about and contact), the same on
   both sides of still, set as they are on the sound site. Everything they need
   is here, in one sheet that stays when the two sites change into one another,
   so the block can stay on the screen while the ground turns under it.

   The colours are values: the data-site says which. Between the sites
   still-shell.js turns them: what lies on the ground (the map, the fields) turns
   with the ground (.turn-*), the ink at the moment the ground passes it (.ink-*).
   .m-theme-* is for laying out the other side's text unseen. */
html[data-site="sound"]:not(.ink-films), html.ink-sound, .m-theme-sound {
  --m-title: #222;
  --m-text: #414141;
  --m-link: #111;
  --m-link-hover: #444;
  --m-faint: #737373;
  --m-menu: #737373;
  --m-menu-on: #111;
  --m-soft-title: #9d9d9d;
  --m-field-ink: #000;
  --m-button-ink: #fff;
  --map-label: #8d8d89; --map-dot: #111; --map-name: #111; --map-credit: #333;
}
html[data-site="films"]:not(.ink-sound), html.ink-films, .m-theme-films {
  --m-title: #ecebe6;
  --m-text: #d9d8d3;
  --m-link: #ecebe6;
  --m-link-hover: #fff;
  --m-faint: rgba(236,235,230,.5);
  --m-menu: rgba(236,235,230,.58);
  --m-menu-on: #ecebe6;
  --m-soft-title: rgba(236,235,230,.4);
  --m-field-ink: #ecebe6;
  --m-button-ink: #111;
  --map-label: #5e5e5a; --map-dot: #ecebe6; --map-name: #ecebe6; --map-credit: #aaa;
}
.m-theme-sound, .m-theme-films { color: var(--m-text); }
html[data-site="sound"]:not(.turn-films), html.turn-sound {
  --m-rule: #bbb;
  --m-field: transparent;
  --m-field-focus: rgba(255,255,255,.25);
  --m-field-line: #a9a9a9;
  --m-button: #272727;
  --m-tray: rgba(252,252,252,.94);
  --m-plan: invert(0) hue-rotate(0deg);
  --map-bg: #f3f3f1; --map-water: #d3d6d7; --map-park: #e7e8e3; --map-minor: #c8c8c3; --map-second: #cfcfca; --map-major: #b5b5b0;
  --map-rail: #c2c2be; --map-ring: rgba(17,17,17,.12);
}
html[data-site="films"]:not(.turn-sound), html.turn-films {
  --m-rule: rgba(236,235,230,.24);
  --m-field: rgba(255,255,255,.04);
  --m-field-focus: rgba(255,255,255,.08);
  --m-field-line: rgba(236,235,230,.32);
  --m-button: #ecebe6;
  --m-tray: rgba(0,0,0,.88);
  --m-plan: invert(1) hue-rotate(180deg);
  --map-bg: #0a0a0a; --map-water: #1c1e1f; --map-park: #101110; --map-minor: #272727; --map-second: #222; --map-major: #343434;
  --map-rail: #282828; --map-ring: rgba(236,235,230,.14);
}

.mirror {
  position: relative;
  font-family: var(--font); font-weight: 600; font-style: normal;
  font-size: 15px; line-height: 1.8;
  letter-spacing: normal; word-spacing: normal;
  font-variant-ligatures: none;
  color: var(--m-text);
}
.mirror * { box-sizing: border-box; }
.mirror, .mirror * { transition: color .24s linear; }
/* what lies on the ground takes as long as the ground (--groundFor, EASE in still-shell.js) */
.mirror .mirror-rule, .mirror .form-wrapper .field-element, .mirror .form-wrapper button[type=submit], .mirror .still-map__svg *, .mirror-map, .mirror .map-controls button {
  transition: color .24s linear, background-color 1.25s cubic-bezier(.65, 0, .25, 1), border-color 1.25s cubic-bezier(.65, 0, .25, 1),
              fill 1.25s cubic-bezier(.65, 0, .25, 1), stroke 1.25s cubic-bezier(.65, 0, .25, 1);
}
.mirror .still-map__svg .m-label, .mirror .still-map__svg .m-dot, .mirror .still-map__svg .m-name { transition: fill .24s linear; }
.mirror .still-map__svg .m-streets, .mirror .still-map__svg .m-place { transition: opacity .4s ease; }
.mirror p { margin: 0; font-size: 15px; line-height: 1.8; }
.mirror a, .mirror a:visited { color: var(--m-link); text-decoration: none; }
.mirror a:hover { color: var(--m-link-hover); }
.mirror strong { font-weight: 700; }
.mirror em { font-style: italic; }
.mirror [data-morph] { position: relative; z-index: 1; }
.mirror-letters { position: absolute; z-index: 0; pointer-events: none; }

/* ===== about: the portrait, and the text set against the right edge ===== */
.mirror--about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 34px; align-items: start; }
.mirror-text p { margin: 0 0 15px; text-align: right; white-space: pre-wrap; }
.mirror-text a, .mirror-text a:visited { color: inherit; border-bottom: 1px solid var(--m-rule); }
.mirror-text a:hover { color: inherit; border-bottom-color: currentColor; }
@media (max-width: 640px) {
  .mirror--about { grid-template-columns: minmax(0, 1fr); row-gap: 34px; }
}

/* the portrait: blurred, with a sharp focus window that follows the pointer.
   click / tap brings the whole frame into focus */
.focus-shot {
  position: relative;
  width: min(880px, 100%);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: #111;
  isolation: isolate;
  cursor: crosshair;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.focus-shot .bg,
.focus-shot .focus-img {
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
}
.focus-shot .bg { background-image: var(--img-soft); }
.focus-shot .focus-window {
  position: absolute;
  z-index: 2;
  left: 0; top: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset;
  pointer-events: none;
  will-change: transform, width, height;
}
.focus-shot .focus-window.is-anim {
  transition: width .6s ease, height .6s ease, transform .6s ease;
}
.focus-shot .focus-img {
  inset: auto;
}
.focus-shot .focus-window.is-anim .focus-img { transition: transform .6s ease; }
.focus-shot .crosshair {
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 26px;
  transform: translate(-50%, -50%);
  opacity: .85;
  transition: opacity .3s ease;
}
.focus-shot .crosshair::before,
.focus-shot .crosshair::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.9);
}
.focus-shot .crosshair::before { width: 2px; height: 26px; }
.focus-shot .crosshair::after  { width: 26px; height: 2px; }
.focus-shot.is-full .crosshair { opacity: 0; }

/* ===== studio: the room's own block, the plan turning with the ground ===== */
.mirror--studio { padding-bottom: 67px; }
.mirror--studio .where-stack { filter: var(--m-plan); transition: filter 1.25s cubic-bezier(.65, 0, .25, 1); }
.mirror--studio h3.where-intro__title { color: var(--m-soft-title); letter-spacing: .06em; }
.mirror--studio button, .mirror--studio .where-acc__head { color: inherit; }

/* ===== contact ===== */
.mirror--contact { padding-bottom: 17px; }
.mirror--contact, .mirror--contact * { text-transform: lowercase; }
.mirror .mirror-title { margin: 0 0 50px; font-weight: 900; font-size: 30px; line-height: 1.5; letter-spacing: .06em; color: var(--m-title); }
.mirror .mirror-subtitle { margin: 0 0 34px; font-weight: 900; font-size: 24px; line-height: 1.2; letter-spacing: .06em; color: var(--m-title); }
.mirror-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 34px; margin-bottom: 34px; }
.mirror-info p { white-space: pre-wrap; }
.mirror-info a, .mirror-info a:visited { border-bottom: 0; }
.mirror-map { position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; margin-bottom: 49px; background: var(--map-bg); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mirror .mirror-rule { display: block; height: 1px; border: 0; background: var(--m-rule); margin: 0 0 49px; padding: 0; }
@media (max-width: 640px) {
  .mirror-info { grid-template-columns: minmax(0, 1fr); row-gap: 17px; }
  .mirror-map { aspect-ratio: 4 / 3; }
}

/* the quiet map (tools/map/map.py), in the colours above: drag it, zoom it (still-mirror.js) */
.still-map { position: absolute; inset: 0; display: block; overflow: hidden; border: 0; }
.still-map__svg { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; display: block; will-change: transform; }
.still-map__credit { position: absolute; right: 8px; bottom: 6px; font-size: 10px; line-height: 1.4; letter-spacing: .02em; opacity: .5; color: var(--map-credit); pointer-events: none; }
.still-map__svg .m-bg { fill: var(--map-bg); }
.still-map__svg .m-park { fill: var(--map-park); }
.still-map__svg .m-water { fill: var(--map-water); }
.still-map__svg .m-stream { fill: none; stroke: var(--map-water); }
.still-map__svg .m-minor, .still-map__svg .m-second, .still-map__svg .m-major, .still-map__svg .m-rail { fill: none; vector-effect: non-scaling-stroke; }
.still-map__svg .m-minor { stroke: var(--map-minor); stroke-width: .8px; }
.still-map__svg .m-second { stroke: var(--map-second); stroke-width: 1px; }
.still-map__svg .m-major { stroke: var(--map-major); stroke-width: 1.8px; }
.still-map__svg .m-rail { stroke: var(--map-rail); stroke-width: 1px; stroke-dasharray: 4 3; }
.still-map__svg .m-streets, .still-map__svg .m-place { transition: opacity .4s ease; }
.still-map__svg .m-label { fill: var(--map-label); font-weight: 700; font-size: 11.5px; letter-spacing: 1.1px; }
.still-map__svg .m-part .m-label { font-size: 13.5px; letter-spacing: 1.4px; }
.still-map__svg .m-station__dot { fill: none; stroke: var(--map-label); stroke-width: 1.2px; }
.still-map__svg .m-ring { fill: var(--map-ring); }
.still-map__svg .m-dot { fill: var(--map-dot); }
.still-map__svg .m-name { fill: var(--map-name); }
/* what shows depends on how close it is */
.still-map__svg[data-level="far"] .m-hood { opacity: 0; }
.still-map__svg:not([data-level="close"]) .m-streets { opacity: 0; }
.mirror-map[data-map] { cursor: grab; }
.mirror-map.is-dragging { cursor: grabbing; }
.map-controls { position: absolute; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 4px; }
.mirror .map-controls button {
  position: relative; width: 32px; height: 32px; padding: 0; border: 1px solid var(--map-major); border-radius: 0; cursor: pointer;
  background-color: var(--map-bg); color: var(--map-name);
}
.map-controls button:hover { border-color: var(--map-name); }
.map-controls span::before, .map-controls span::after { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; margin-top: -1px; background: currentColor; }
.map-controls [data-zoom="in"] span::after { transform: rotate(90deg); }
.map-controls [data-zoom="out"] span::after { display: none; }
.map-controls [data-zoom="home"] span::before { left: 50%; right: auto; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; }
.map-controls [data-zoom="home"] span::after { left: 50%; right: auto; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: none; border: 1px solid currentColor; }
.mirror a.map-open, .mirror a.map-open:visited { position: absolute; left: 8px; bottom: 6px; font-size: 10px; line-height: 1.4; letter-spacing: .02em; color: var(--map-credit); opacity: .6; }
.mirror a.map-open:hover { opacity: 1; color: var(--map-credit); }

/* the form */
.mirror .form-wrapper .field-list { line-height: normal; }
.mirror .form-wrapper fieldset, .mirror .form-wrapper legend { margin: 0; padding: 0; border: 0; }
.mirror .form-wrapper .fields { display: flex; flex-wrap: wrap; column-gap: 10px; }
.mirror .form-wrapper .fields legend { width: 100%; font-size: 15px; line-height: normal; }
.mirror .form-wrapper .fields legend span { display: block; }
.mirror .form-wrapper .fields .field { width: calc(50% - 5px); }
.mirror .form-wrapper .field { position: relative; margin: 0 0 18px; }
.mirror .form-wrapper .title { display: block; padding: 0 0 4px; font-size: 15px; line-height: normal; color: var(--m-text); }
.mirror .form-wrapper .fields legend.title { padding: 0; }
.mirror .form-wrapper .title-text { display: inline-flex; align-items: flex-end; }
.mirror .form-wrapper .caption { display: flex; align-items: flex-end; height: 18px; color: var(--m-text); }
.mirror .form-wrapper .caption-text { display: inline-flex; align-items: center; font-size: 12px; line-height: normal; }
.mirror .form-wrapper .description { font-size: 12px; opacity: .7; margin-left: .45em; }
.mirror .form-wrapper .caption .description { line-height: 12px; }
.mirror .form-wrapper .field-element {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 0;
  border: 1px solid var(--m-field-line);
  border-radius: 0;
  background: var(--m-field);
  color: var(--m-field-ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 15px;
  line-height: normal;
  -webkit-appearance: none;
  appearance: none;
}
.mirror .form-wrapper .field-element:focus { background: var(--m-field-focus); outline: none; transition: background-color .1s ease-in; }
/* under 16px Safari on a phone zooms the whole page in on a field, and stays there */
@media (hover: none) { .mirror .form-wrapper .field-element { font-size: 16px; } }
.mirror .form-wrapper textarea.field-element { min-height: 100px; height: 100px; resize: vertical; }
.mirror .form-wrapper .form-button-wrapper { text-align: left; }
.mirror .form-wrapper button[type=submit] {
  display: inline-block;
  padding: 15px 37.5px;
  border: 0;
  border-radius: 0;
  background-color: var(--m-button);
  color: var(--m-button-ink);
  font-family: var(--font);
  font-weight: 300;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 1px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mirror .form-wrapper .form-submission-text { margin-top: 20px; }
.mirror .form-wrapper .hidden { display: none; }
.mirror .form-wrapper.is-sending .field-list { opacity: .7; }
.mirror .form-wrapper .bot { position: absolute; left: -9999px; }