/* The frame: a page in reader view with notes in the right margin. Builds on site.css. */


.frame {
  display: grid;
  grid-template-columns: minmax(0, 36rem) 17rem;
  column-gap: 3.5rem;
  max-width: calc(36rem + 3.5rem + 17rem);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 5rem) 1rem 3rem;
}
.col { min-width: 0; }
.margin { position: relative; }

.kicker {
  font: 400 .8125rem/1.3 var(--serif); font-variant-caps: all-small-caps; letter-spacing: .04em;
  color: var(--muted); margin: 0 0 .75rem;
}
#title { font-size: 2.25rem; line-height: 1.12; margin-bottom: .9rem; overflow-wrap: anywhere; }
.meta, .dedup { font: 400 .875rem/1.5 var(--sans); color: var(--muted); margin: 0 0 .5rem; }
.meta a, .meta button.link { color: var(--muted); }
.meta .sep { padding: 0 .4em; }
.dedup { margin-bottom: 1.5rem; }

/* The page's own text, cleaned up. */
.article { border-top: 1px solid var(--rule); padding-top: 1.75rem; margin-top: 1rem; overflow-wrap: break-word; }
.article h1, .article h2, .article h3, .article h4 { font: 600 1.35rem/1.25 var(--serif); margin: 2rem 0 .75rem; }
.article h1 { font-size: 1.6rem; }
.article img { max-width: 100%; height: auto; display: block; margin: 1.5rem 0 .5rem; }
.article figure { margin: 1.5rem 0; }
.article figcaption { font: 400 .8125rem/1.45 var(--sans); color: var(--muted); }
.article blockquote { margin: 1.25rem 0; padding-left: 1rem; border-left: 2px solid var(--rule); color: var(--muted); }
.article pre { overflow-x: auto; font-size: .85rem; background: color-mix(in srgb, var(--rule) 35%, transparent); padding: .75rem; }
.article table { display: block; overflow-x: auto; border-collapse: collapse; font: 400 .875rem/1.4 var(--sans); }
.article td, .article th { border: 1px solid var(--rule); padding: .35rem .5rem; }
.article ul, .article ol { padding-left: 1.4rem; }
.article li { margin-bottom: .35rem; }
.article a { color: inherit; }
.article mark.mark { color: inherit; background: none; }
.article mark.mark { background: linear-gradient(transparent 52%, var(--mark) 52%, var(--mark) 92%, transparent 92%); cursor: pointer; }
.article mark.mark.hot { background: linear-gradient(transparent 52%, var(--mark-hot) 52%, var(--mark-hot) 92%, transparent 92%); }
.article mark.mark.pending { background: linear-gradient(transparent 52%, color-mix(in srgb, var(--mark) 45%, transparent) 52%, color-mix(in srgb, var(--mark) 45%, transparent) 92%, transparent 92%); }

/* Margin notes. Positioned beside their passage by frame.js on wide screens. */
.note {
  font: 400 .875rem/1.5 var(--sans);
  color: var(--muted);
  padding-top: .15rem;
  transition: color .15s, top .2s;
}
.margin .note { position: absolute; left: 0; right: 0; }
.note.hot { color: var(--ink); }
.note .status { font-size: .75rem; letter-spacing: .02em; margin-bottom: .2rem; display: flex; gap: .5rem; align-items: center; }
.note .status b { color: var(--ink); font-weight: 600; }
.note p { margin: 0 0 .35rem; color: inherit; }
.note .src { font-size: .8125rem; }
.note .src a { color: inherit; }
.note .rate { font-size: .8125rem; margin-top: .35rem; display: flex; gap: .65rem; flex-wrap: wrap; align-items: baseline; }
.note .rate button.link { color: var(--muted); }
.note .rate button.link.on { color: var(--ink); font-weight: 600; text-decoration: none; }
.note .err { font-size: .8125rem; }
.pagenotes .note { border-left: 2px solid var(--mark-hot); padding-left: .85rem; margin-bottom: 1.25rem; }

.trouble { font: 400 .9375rem/1.55 var(--sans); color: var(--muted); }
.trouble ul { padding-left: 1.2rem; }

.addnote {
  position: absolute; z-index: 5;
  font: 600 .8125rem/1 var(--sans);
  color: var(--paper); background: var(--ink);
  border: 0; padding: .55rem .7rem; cursor: pointer;
}

@media (max-width: 900px) {
  .frame { display: block; max-width: 38rem; padding-top: 2rem; }
  .margin { display: none; }
  .article .note { border-left: 2px solid var(--mark-hot); padding-left: .85rem; margin: -.25rem 0 1.5rem; }
  #title { font-size: 1.85rem; }
}