/* Neither Newsreader nor IBM Plex Mono ship on most visitors' machines, and
   there's no template slot for a <link> tag, so this is the only way in. */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Memories: three random essay teasers, reshuffled client-side on every
   load (see scripts/build-memories.mjs — vaultsite itself only ever
   builds a static page, so the randomness has to live here instead). */
.memories{margin-top:.5rem}
.memory{max-width:var(--measure); margin-bottom:2rem; padding-bottom:2rem;
  border-bottom:1px solid var(--paper-3)}
.memory:last-of-type{border-bottom:none; margin-bottom:0; padding-bottom:0}
.memory p{font-size:1.05rem; line-height:1.55; margin:0 0 .7rem}
.memory-more{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent)}
#memories-again{color:var(--grey)}

/* Opening: the essay is trimmed to its first pull-quote (see
   scripts/build-teaser.mjs), with the rest behind this toggle so the front
   page shows what else is on it without a wall of scrolling first. */
.opening-more{margin-top:1.8rem}
.opening-more summary{
  cursor:pointer; list-style:none; display:inline-block;
  background:var(--vermilion); color:#f6f1e6;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.9rem 1.5rem; border-radius:3px; line-height:1;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  transition:background .15s ease, transform .15s ease;
}
.opening-more summary::-webkit-details-marker{display:none}
.opening-more summary::marker{content:''}
.opening-more summary:hover,.opening-more summary:focus-visible{
  background:#9d2114; transform:translateY(-1px);
}
.opening-more[open] summary{margin-bottom:1.9rem}