/* 110ost.com/building: the paper model. The album's paper, type and colours, copied
   from the story page's style.css. The fonts and the paper grain are the site's own files. */

@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: only light;
  --paper: #f8edd6;
  --paper-shade: #eedfc2;
  --ink: #2f241b;
  --granite: #5a5046;
  --granite-light: #c2b5a2;
  --brick: #8d3421;
  --brick-dark: #642313;
  --copper: #2b6354;
  --copper-light: #6a9e8c;
  --harbour: #1f5a7a;
  --mount: #fffcf4;
  --mount-shadow: rgba(70, 42, 22, 0.22);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Alegreya Sans", Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", sans-serif;
  font-size: 1.1875rem;
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums proportional-nums;
  overflow-wrap: break-word;
}

@media screen {
  @supports (background-blend-mode: exclusion) {
    body {
      background-image: url("../img/paper-grain.png"), url("../img/paper-grain.png");
      background-size: 256px 256px, 331px 331px;
      background-position: 0 0, 97px 53px;
      background-blend-mode: exclusion;
    }
  }
}
@media (prefers-contrast: more), (forced-colors: active) {
  body {
    background-image: none;
  }
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--brick);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--brick-dark);
  text-decoration-thickness: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
canvas:focus-visible,
.divider:focus-visible {
  outline: 3px solid var(--harbour);
  outline-offset: 3px;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  background: var(--mount);
  color: var(--ink);
  font-weight: 700;
}
.skip:focus {
  top: 1rem;
}

.wrap {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.masthead {
  padding: 2.5rem 1rem 0.5rem;
  text-align: center;
}
.where {
  margin: 0 0 0.6rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  font-size: 1.15rem;
  color: var(--copper);
}
h1 {
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 3.8rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brick-dark);
}
.lead {
  max-width: 32rem;
  margin: 1rem auto 0;
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--granite);
}

h2 {
  margin: 0 0 0.6rem;
  font-size: 1.7rem;
  line-height: 1.2;
  font-weight: 700;
}
h2::after {
  content: "";
  display: block;
  width: 4rem;
  height: 3px;
  margin-top: 0.45rem;
  background: var(--brick);
}
p {
  margin: 0 0 1rem;
}

/* == the stage */

.model {
  margin-top: 1.2rem;
}
.stage {
  position: relative;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
}
/* The stage takes its height as the page is laid out, before the model's script
   runs, so nothing jumps when it arrives. `.js` covers browsers that do not know
   the scripting media feature. A vertical swipe scrolls the page (pan-y); a
   sideways drag turns the model. */
@media (scripting: enabled) {
  .stage {
    height: clamp(24rem, 64vh, 42rem);
    overflow: hidden;
    touch-action: pan-y;
  }
}
.js .stage {
  height: clamp(24rem, 64vh, 42rem);
  overflow: hidden;
  touch-action: pan-y;
}
.stage.flat,
.js .stage.flat {
  height: auto;
  overflow: visible;
  touch-action: auto;
}
.stage canvas.gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: pan-y;
  /* close views dissolve into the paper instead of stopping on a straight edge */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
    linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
/* the focus ring drawn inside the canvas, where the stage cannot clip it */
.stage canvas.gl:focus-visible {
  outline: 3px solid var(--harbour);
  outline-offset: -5px;
  -webkit-mask-image: none;
  mask-image: none;
}
.stage canvas.gl:active {
  cursor: grabbing;
}

.pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.pin {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.1rem;
  height: 2.1rem;
  margin: -1.05rem 0 0 -1.05rem;
  padding: 0;
  border: 2px solid var(--mount);
  border-radius: 50%;
  background: var(--brick);
  color: var(--mount);
  font: 700 1.05rem/1 "Alegreya Sans", sans-serif;
  font-variant-numeric: lining-nums;
  box-shadow: 0 1px 3px rgba(40, 20, 10, 0.45);
  cursor: pointer;
  pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .pin {
    transition: opacity 0.2s, background-color 0.2s, visibility 0s linear 0s;
  }
  .pin.behind {
    transition: opacity 0.2s, background-color 0.2s, visibility 0s linear 0.2s;
  }
}
.pin::before {
  /* a finger-sized target round the small dot */
  content: "";
  position: absolute;
  inset: -0.5rem;
}
/* a pin the building hides is taken off the model; the list below reaches its note */
.pin.behind {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.pin.on,
.pin:hover {
  background: var(--copper);
  opacity: 1;
}

.model {
  position: relative;
}
/* over the stage's lower left corner (the stage is the first thing in .model) */
.caption {
  position: absolute;
  z-index: 3;
  left: max(1rem, calc((100% - 68rem) / 2 + 1rem));
  top: calc(clamp(24rem, 64vh, 42rem) - 1rem);
  transform: translateY(-100%);
  max-width: 23rem;
  margin: 0;
  padding: 0.9rem 1.1rem 0.7rem;
  background: var(--mount);
  box-shadow: 0 1px 2px var(--mount-shadow), 0 8px 22px -8px var(--mount-shadow);
  font-size: 1.05rem;
  line-height: 1.45;
}
.caption.right {
  left: auto;
  right: max(1rem, calc((100% - 68rem) / 2 + 1rem));
}
.caption[hidden] {
  display: none;
}
.caption .cy {
  margin: 0 0 0.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brick-dark);
  font-variant-numeric: lining-nums;
}
.caption .ct {
  margin: 0 0 0.5rem;
}
.caption .close {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.3rem 0.7rem;
  min-height: 2.5rem;
  border: 1px solid var(--granite-light);
  border-radius: 2px;
  background: transparent;
  color: var(--granite);
  cursor: pointer;
}

.divider {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 2.75rem;
  margin-left: -1.375rem;
  cursor: ew-resize;
  touch-action: none;
}
.divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--brick-dark);
}
/* the knob near the foot of the line, clear of the building and its pins */
.divider::after {
  content: "";
  position: absolute;
  top: 85%;
  left: 50%;
  width: 1.9rem;
  height: 1.9rem;
  margin: -0.95rem 0 0 -0.95rem;
  border-radius: 50%;
  background: var(--mount);
  border: 2px solid var(--brick-dark);
  box-shadow: 0 1px 3px rgba(40, 20, 10, 0.4);
}
.divider[hidden],
.tag[hidden] {
  display: none;
}
.tag {
  position: absolute;
  z-index: 2;
  top: 0.8rem;
  padding: 0.1rem 0.6rem;
  background: var(--mount);
  font-weight: 700;
  font-variant-numeric: lining-nums;
  color: var(--brick-dark);
  box-shadow: 0 1px 2px var(--mount-shadow);
}
.tag.left {
  left: 0.8rem;
}
.tag.right {
  right: 0.8rem;
}

/* the 1901 photograph, a small mounted print beside the model in the 1901 view */
.photo1901 {
  position: absolute;
  z-index: 3;
  top: 0.9rem;
  right: 0.9rem;
  width: clamp(6.5rem, 22%, 12rem);
  margin: 0;
  padding: 0.35rem 0.35rem 0.25rem;
  background: var(--mount);
  box-shadow: 0 1px 2px var(--mount-shadow), 0 6px 16px -6px var(--mount-shadow);
  transform: rotate(1.2deg);
  pointer-events: none;
}
.photo1901[hidden] {
  display: none;
}
.photo1901 img {
  width: 100%;
  height: auto;
}
.photo1901 figcaption {
  margin: 0.2rem 0 0;
  max-width: none;
  font-size: 0.8rem;
  line-height: 1.2;
  text-align: center;
}

/* == controls */

.controls {
  max-width: 44rem;
  margin: 0.8rem auto 0;
}
.controls[hidden] {
  display: none;
}
.years {
  position: relative;
  padding: 0 1.2rem;
}
.years.off input,
.years.off .stops {
  opacity: 0.45;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
/* the track is the story page's line of years: brick for the school years, copper for the homes */
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(to right, var(--brick) 0 60%, var(--granite-light) 60% 80%, var(--copper-light) 80% 100%);
}
input[type="range"]::-moz-range-track {
  height: 4px;
  background: linear-gradient(to right, var(--brick) 0 60%, var(--granite-light) 60% 80%, var(--copper-light) 80% 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: calc(-0.8rem + 2px);
  border-radius: 50%;
  background: var(--mount);
  border: 3px solid var(--brick-dark);
  box-shadow: 0 1px 3px rgba(40, 20, 10, 0.4);
}
input[type="range"]::-moz-range-thumb {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--mount);
  border: 3px solid var(--brick-dark);
}
.stops {
  position: relative;
  height: 2.75rem;
  margin: -0.3rem 0 0;
  padding: 0;
  list-style: none;
}
.stops li {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.stops li:nth-child(1) { left: 0.8rem; }
.stops li:nth-child(2) { left: calc(0.8rem + (100% - 1.6rem) * 0.2); }
.stops li:nth-child(3) { left: calc(0.8rem + (100% - 1.6rem) * 0.4); }
.stops li:nth-child(4) { left: calc(0.8rem + (100% - 1.6rem) * 0.6); }
.stops li:nth-child(5) { left: calc(0.8rem + (100% - 1.6rem) * 0.8); }
.stops li:nth-child(6) { left: calc(100% - 0.8rem); }
.stops button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.3rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--granite);
  cursor: pointer;
}
.stops button[aria-pressed="true"] {
  color: var(--brick-dark);
  font-weight: 700;
}
.stops button:hover {
  color: var(--brick-dark);
  text-decoration: underline;
}
.readout {
  min-height: 3.2em;
  margin: 0.3rem 0 0;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--granite);
}
.readout .ry {
  font-weight: 700;
  color: var(--brick-dark);
  font-variant-numeric: lining-nums;
}
.readout .rl {
  font-style: italic;
}

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.6rem;
}
.views,
.zoom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}
.views button,
.zoom button,
.split,
.notelist .show {
  min-height: 2.75rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--granite-light);
  border-radius: 2px;
  background: var(--mount);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
}
.views button:hover,
.zoom button:hover,
.split:hover,
.notelist .show:hover {
  border-color: var(--brick);
  color: var(--brick-dark);
}
.split[aria-pressed="true"] {
  background: var(--brick-dark);
  border-color: var(--brick-dark);
  color: var(--mount);
}
button:disabled {
  cursor: default;
}
.hint {
  margin: 0.8rem auto 0;
  max-width: 36rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--granite);
}

/* == the fallback */

.fallback .why {
  max-width: 34rem;
  margin: 1rem auto 1.5rem;
  font-style: italic;
  color: var(--granite);
}
.elev {
  max-width: 60rem;
  margin: 0 auto 2.2rem;
}
.print {
  position: relative;
  padding: 0.6rem;
  background: var(--mount);
  box-shadow: 0 1px 2px var(--mount-shadow), 0 6px 18px -6px var(--mount-shadow);
}
.print img {
  width: 100%;
}
figcaption {
  max-width: 34rem;
  margin: 0.9rem auto 0;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--granite);
}
figcaption .yr,
.notelist .yr {
  display: block;
  margin-bottom: 0.15rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brick-dark);
  font-variant-numeric: lining-nums;
}

/* == notes */

.notes {
  max-width: 34rem;
  margin: 3rem auto 0;
}
.notelist {
  margin: 1.2rem 0 0;
  padding-left: 2.2rem;
}
.notelist li {
  margin: 0 0 1.4rem;
  padding: 0.2rem 0.4rem 0.2rem 0.3rem;
}
.notelist li::marker {
  font-weight: 700;
  color: var(--brick);
  font-variant-numeric: lining-nums;
}
.notelist li.on {
  background: var(--paper-shade);
  outline: 1px solid var(--granite-light);
}
.notelist p {
  margin: 0 0 0.5rem;
}
.notelist .show {
  font-size: 0.95rem;
  min-height: 2.5rem;
}
.aside {
  font-size: 1rem;
  color: var(--granite);
}

/* == credits */

.back {
  max-width: 44rem;
  margin: 3.5rem auto 0;
  padding: 2.2rem 0 1rem;
  border-top: 3px double var(--copper-light);
  font-size: 1rem;
  line-height: 1.5;
}
.back h2 {
  font-size: 1.35rem;
}
footer {
  padding: 1.5rem 1rem 2.5rem;
  border-top: 1px solid var(--granite-light);
  font-size: 1.05rem;
  color: var(--granite);
  text-align: center;
}

@media (min-width: 40rem) {
  .masthead {
    padding-top: 3.5rem;
  }
}
@media (min-width: 60rem) {
  body {
    font-size: 1.25rem;
  }
}

/* On a phone the caption sits under the model, not over it */
@media (max-width: 39.99rem) {
  .js .stage {
    height: clamp(20rem, 54vh, 28rem);
  }
  @media (scripting: enabled) {
    .stage {
      height: clamp(20rem, 54vh, 28rem);
    }
  }
  .stage.flat,
  .js .stage.flat {
    height: auto;
  }
  /* a smaller dot; its ::before ring keeps the tap target at 2.8rem */
  .pin {
    width: 1.8rem;
    height: 1.8rem;
    margin: -0.9rem 0 0 -0.9rem;
    font-size: 0.95rem;
  }
  .photo1901 {
    width: clamp(6rem, 30%, 9rem);
    top: 0.6rem;
    right: 0.6rem;
  }
  .caption {
    position: static;
    transform: none;
    max-width: none;
    margin: 0.5rem 0 0;
    font-size: 1rem;
  }
  .stops button {
    font-size: 0.9rem;
    min-width: 2.2rem;
  }
}

@media (forced-colors: active) {
  .pin {
    forced-color-adjust: none;
    background: ButtonText;
    color: ButtonFace;
    border-color: ButtonFace;
  }
  .print {
    border: 1px solid CanvasText;
  }
  /* the track's gradient is dropped in forced colours; draw it as a plain line */
  input[type="range"]::-webkit-slider-runnable-track {
    forced-color-adjust: none;
    background: CanvasText;
  }
  input[type="range"]::-moz-range-track {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

@media print {
  .controls,
  .pins,
  .notelist .show,
  .skip {
    display: none;
  }
}