/* 110ost.com: the Benjamin Pope School. The album. */

@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;
}

/* One page for everyone, whatever the reader's system is set to: cream album
   paper, with colours taken from the building and the street around it. */
:root {
  color-scheme: only light;
  --paper: #f8edd6;        /* paper: cream album page in afternoon light */
  --paper-shade: #eedfc2;  /* paper: the same page in shadow, behind a linked source */
  --ink: #2f241b;          /* ink: deep warm brown-black, never pure black */
  --granite: #5a5046;      /* granite: warm grey of the trim and curbs, for secondary text */
  --granite-light: #c2b5a2; /* granite: pale weathered granite, for hairlines */
  --brick: #8d3421;        /* brick: the school's red brick walls, for links and rules */
  --brick-dark: #642313;   /* brick: old brick in shade, for hover */
  --copper: #2b6354;       /* copper: verdigris on the cornice and towers, for labels */
  --copper-light: #6a9e8c; /* copper: sunlit verdigris, for the homes stretch of the years */
  --harbour: #1f5a7a;      /* harbour: the water off Castle Island, for the focus ring */
  --mount: #fffcf4;        /* paper: the white card each print is mounted on */
  --mount-shadow: rgba(70, 42, 22, 0.22); /* paper: the mount's shadow on the page */
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

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;
}

/* The grain of the album page. The tile holds dark greys only. Blended by
   exclusion, it darkens the cream a shade, a little less in the yellow than
   the red, so the flecks stay the colour of old paper. It is laid twice, at 256 and 331 px, so the pattern
   never lines up with itself down the page. It scrolls with the page. The
   prints and their white mounts paint over it and stay smooth. None on paper,
   none when the reader asks for more contrast. */
@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-repeat: repeat;
      background-attachment: scroll;
      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 {
  outline: 3px solid var(--harbour);
  outline-offset: 3px;
  border-radius: 2px;
  text-decoration: none;
}

.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;
}

/* The title page */

.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.3rem, 7vw, 4.2rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brick-dark);
}
.lead {
  max-width: 30rem;
  margin: 1rem auto 0;
  font-size: clamp(1.3rem, 3.2vw, 1.6rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--granite);
}

/* The line of years: 1881 at the left end, now at the right.
   Each mark sits at (year - 1881) / 145 of the width. */

.yearline {
  display: flow-root;
  position: relative;
  max-width: 40rem;
  margin: 1.2rem auto 0;
  padding: 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
}
.yearline ol {
  position: relative;
  height: 0;
  margin: 2.9rem 0 2.9rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--granite-light);
}
.yearline li {
  position: absolute;
  bottom: 0.35rem;
  transform: translateX(-50%);
}
.yearline li.below {
  bottom: auto;
  top: 0.35rem;
}
.yearline li::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  width: 1px;
  height: 0.35rem;
  background: var(--granite);
}
.yearline li.below::after {
  bottom: auto;
  top: -0.35rem;
}
.yearline a,
.yearline li > span {
  display: block;
  min-width: 2.75rem;
  padding: 1.3rem 0.4rem 0.3rem;
  text-align: center;
  color: var(--granite);
}
.yearline .below a,
.yearline .below > span {
  padding: 0.3rem 0.4rem 1.3rem;
}
.yearline a {
  text-decoration-color: var(--granite-light);
}
.yearline a:hover {
  color: var(--brick-dark);
  text-decoration-color: currentColor;
}
.yearline .y1881 { left: 0; }
.yearline .y1884 { left: 2.07%; }
.yearline .y1946 { left: 44.83%; }
.yearline .y2000 { left: 82.07%; }
.yearline .ynow  { left: 100%; }
.yearline .ynow a { font-style: italic; }

/* The school years as a heavier stretch of the line. Solid from 1884 to 1945,
   the last year the records show the school open. It fades out by 1946, when
   the building stood empty, because nobody knows the month classes stopped. */
.band {
  position: absolute;
  top: 2.9rem;
  left: calc(1.5rem + (100% - 3rem) * 0.0207);
  width: calc((100% - 3rem) * 0.4276);
  height: 4px;
  margin-top: -1.5px;
  background: linear-gradient(to right, var(--brick) 98.4%, transparent);
}
.band span {
  position: absolute;
  top: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  color: var(--brick);
}
/* The homes, 2000 to now: the same kind of stretch, thinner and paler,
   so the school years stay the stronger of the two. */
.band.homes {
  left: calc(1.5rem + (100% - 3rem) * 0.8207);
  width: calc((100% - 3rem) * 0.1793);
  height: 3px;
  margin-top: -1px;
  background: var(--copper-light);
}
.band.homes span {
  color: var(--copper);
}

/* Prints: a photo mounted on the page with four paper corners */

figure {
  margin: 0;
}
.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%;
}
.print::after {
  content: "";
  position: absolute;
  inset: -0.3rem;
  pointer-events: none;
  --c: 1.6rem;
  background:
    linear-gradient(135deg, var(--copper) 50%, transparent 50%) top left / var(--c) var(--c) no-repeat,
    linear-gradient(225deg, var(--copper) 50%, transparent 50%) top right / var(--c) var(--c) no-repeat,
    linear-gradient(45deg, var(--copper) 50%, transparent 50%) bottom left / var(--c) var(--c) no-repeat,
    linear-gradient(315deg, var(--copper) 50%, transparent 50%) bottom right / var(--c) var(--c) no-repeat;
}

.tilt-l { transform: rotate(-0.8deg); }
.tilt-r { transform: rotate(0.7deg); }

/* The caption box lines up with the text column. Its lines stop at about
   26rem, near 70 characters of small italic. */
figcaption {
  max-width: 34rem;
  margin: 1.1rem auto 0;
  padding-right: clamp(0rem, 100% - 26rem, 8rem);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--granite);
}
figcaption .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;
}

.hero,
.plate {
  max-width: 50rem;
  margin: 1.5rem auto 0;
}
/* The line under the cover that leads to the model page, set like the caption above it */
.modellink {
  max-width: 34rem;
  margin: 0.7rem auto 0;
  padding-right: clamp(0rem, 100% - 26rem, 8rem);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--granite);
}
.plate {
  margin-top: 2.5rem;
}
/* Text that picks up again after a picture in the middle of a section */
figure + .col {
  margin-top: 2.2rem;
}
.wide {
  max-width: 68rem;
  margin: 2rem auto 2.2rem;
}

/* Album pages: one calm column of text between the pictures */

main .wrap > section {
  padding: 3rem 0 0;
}
.col {
  max-width: 34rem;
  margin: 0 auto;
}
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;
}
.opening {
  font-size: 1.35rem;
  line-height: 1.45;
}

/* Footnote numbers: small to the eye, about 44px tall to a finger.
   Inline padding widens the tap area without moving the text. */
sup {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: 0.5em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
sup a {
  position: relative;
  display: inline-block;
  padding: 0 0.04em;
  text-decoration: none;
}
sup a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.4rem;
  height: 2.75rem;
  transform: translate(-50%, -50%);
}
/* Two numbers side by side: push them apart and keep each tap area on its own side */
sup a + a {
  margin-left: 0.3em;
}
sup a:has(+ a)::before {
  transform: translate(-68%, -50%);
}
sup a + a::before {
  transform: translate(-32%, -50%);
}
sup a:hover {
  text-decoration: underline;
}

.display {
  margin: 2rem 0 0;
  padding-left: 1.2rem;
  border-left: 3px solid var(--brick);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.15;
  font-style: italic;
  color: var(--granite);
}
.display p {
  margin: 0;
}
.display .by {
  margin-top: 0.6rem;
  font-size: 1.05rem;
  line-height: 1.4;
  font-style: normal;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  color: var(--copper);
}
.display .by sup {
  font-variant-caps: normal;
  letter-spacing: 0;
}

/* Sources and credits: the notes pasted in the back of the album */

.back {
  margin-top: 4rem;
  padding: 2.5rem 0 3rem;
  border-top: 3px double var(--copper-light);
  font-size: 1rem;
  line-height: 1.5;
}
.back h2 {
  font-size: 1.35rem;
}
.back ol,
.back ul {
  margin: 0 0 2.5rem;
  padding-left: 1.6rem;
}
.back li {
  margin-bottom: 0.6rem;
  padding-left: 0.2rem;
}
.back li:target {
  background: var(--paper-shade);
  outline: 1px solid var(--granite-light);
}
.back .url {
  overflow-wrap: anywhere;
}
.cols {
  display: grid;
  gap: 0 3rem;
}

footer {
  padding: 1.5rem 1rem 2.5rem;
  border-top: 1px solid var(--granite-light);
  font-size: 0.95rem;
  color: var(--granite);
}
footer p {
  margin: 0 0 0.4rem;
}

/* Wider screens */

@media (min-width: 40rem) {
  .masthead {
    padding-top: 4rem;
  }
}

@media (min-width: 60rem) {
  body {
    font-size: 1.25rem;
  }
  main .wrap > section {
    padding-top: 5rem;
  }
  .cols {
    grid-template-columns: 1.4fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tilt-l,
  .tilt-r {
    transform: none;
  }
}

@media (forced-colors: active) {
  .print::after {
    display: none;
  }
  .print {
    border: 1px solid CanvasText;
  }
  .band {
    background: CanvasText;
  }
}

/* Paper */

@media print {
  :root {
    --paper: #fff;
    --paper-shade: #fff;
    --ink: #000;
    --granite: #222;
    --granite-light: #999;
    --brick: #000;
    --brick-dark: #000;
    --copper: #222;
    --copper-light: #999;
    --mount: #fff;
  }
  html,
  body {
    font-size: 11pt;
    background: #fff;
  }
  .skip,
  .yearline {
    display: none;
  }
  .display {
    margin-top: 1rem;
    font-size: 16pt;
    break-inside: avoid;
  }
  .display .by {
    font-size: 10pt;
  }
  .masthead {
    padding-top: 0;
  }
  .print {
    box-shadow: none;
    padding: 0;
  }
  .print::after {
    display: none;
  }
  .tilt-l,
  .tilt-r {
    transform: none;
  }
  .hero,
  .plate {
    max-width: 70%;
  }
  .cover {
    max-width: 55%;
    margin-top: 1rem;
  }
  h1 {
    font-size: 24pt;
  }
  .lead {
    font-size: 13pt;
  }
  .opening {
    font-size: 13pt;
  }
  .col,
  figcaption {
    max-width: 32em;
  }
  figcaption {
    padding-right: 0;
    font-size: 1rem;
  }
  figure {
    break-inside: avoid;
  }
  h2 {
    break-after: avoid;
  }
  main .wrap > section {
    padding-top: 1.5rem;
  }
  a {
    text-decoration: none;
  }
  /* No finger on paper: plain inline numbers, so a line can't break before one */
  sup a {
    display: inline;
  }
  sup a::before {
    display: none;
  }
  .back {
    break-before: page;
    margin-top: 0;
    border: 0;
  }
}

.notfound {
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}