/* "The Orange Grove", from page 167 of the American Type Founders specimen
   book (1912), set in Garamond.

   The card is 40em wide and narrows with the screen. The text keeps its size
   and reflows; the heading, measured in em off the scan, scales with the
   card so the trees and the title keep their places. */

@font-face {
  font-family: "Garamond Libre";
  src: url(fonts/garamond-regular.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Garamond Libre";
  src: url(fonts/garamond-bold.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #e3d8b3;
  --ink: #1f2422;
  --card: #e3d8b3;
  --rule: #4a4f55;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Garamond Libre", Garamond, "EB Garamond", Georgia, serif;
}

main {
  font-size: 12px;
  padding: 4em 0;
}

h1,
p {
  margin: 0;
}

/* A justified block that ends flush, as set type does. */
.card p {
  text-align: justify;
  hyphens: none;
}

.opening {
  text-transform: uppercase;
}

.card p::first-letter {
  float: left;
  font-size: 4.05em;
  line-height: 0.8;
  margin-right: 0.04em;
}

.card {
  box-sizing: border-box;
  width: min(40em, 100% - 2em);
  margin: 0 auto;
  container-type: inline-size;
  background: var(--card);
}

.frame {
  border: 0.45em double var(--rule);
}

.card header {
  position: relative;
  box-sizing: border-box;
  /* 1em at the card's full width, less in proportion below it. */
  font-size: min(1em, 100cqw / 40);
  height: 16.2em;
  padding-top: 6em;
  border-bottom: 0.12em solid var(--rule);
}

.card img {
  position: absolute;
  top: -0.35em;
  left: -0.3em;
  width: 16.6em;
  opacity: 0.85;
}

.card img + img {
  left: auto;
  right: -0.3em;
}

h1 {
  position: relative;
  font-size: 3.5em;
  font-weight: 400;
  line-height: 1.08;
  text-align: center;
  text-transform: uppercase;
}

h1 small {
  display: block;
  font-size: 0.76em;
}

.card p {
  font-size: 1.74em;
  font-weight: 700;
  line-height: 1.11;
  padding: 1.5em 1.1em 1.2em;
}