/* The building's story, set like a museum placard, with a dark band for contrast. */
.place { background: var(--chart); color: var(--paper); overflow: hidden; }
.place .kicker { color: var(--kraft); }
.place .title em { color: var(--sky-1); }
.place .lede { color: rgba(239, 228, 207, .8); }
.place-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: clamp(32px, 5vw, 52px); border-top: 1px solid rgba(239, 228, 207, .25); }
.year { padding: 24px 22px 6px 0; }
.year + .year { padding-left: 22px; border-left: 1px solid rgba(239, 228, 207, .18); }
.year b { display: block; font: 400 clamp(34px, 5vw, 50px)/1 var(--f-display); color: var(--paper-hi); }
.year b.word { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; padding-top: 6px; }
.year p { margin-top: 10px; font-size: 15px; color: rgba(239, 228, 207, .78); }
.place .compass { position: absolute; right: -60px; top: -40px; width: 320px; color: rgba(239, 228, 207, .08); pointer-events: none; }

@media (max-width: 820px) {
  .place-grid { grid-template-columns: 1fr 1fr; }
  .year:nth-child(3) { padding-left: 0; border-left: 0; }
  .year:nth-child(n + 3) { border-top: 1px solid rgba(239, 228, 207, .18); }
}