/* ============================================================================
   Letters  (/testimonials)   and   Documents to print  (/documents)

   Two pages of paper. Correspondence is set as correspondence: a sheet of the
   page ground laid on a recessed mat, salutation at the head, sign-off at the
   foot, and nothing where a name would be, because these are published
   anonymously and always have been.

   Tokens only. No colour and no typeface that is not already in site.css.
   ============================================================================ */

/* Both pages run to a slightly narrower measure than the collection grid, so a
   letter never gets wider than a letter should be. */
.paper-page .wrap{max-width:1040px}

.page-open{max-width:38em}
.page-open h1{margin-bottom:var(--s3)}
.page-open .lede{margin:0}
.page-open p+p{margin:var(--s3) 0 0;color:var(--ink-2)}

.page-close{max-width:44em}
.page-close h2{font-size:clamp(var(--t-lg),2.6vw,var(--t-xl));margin-bottom:var(--s2)}
.page-close p{margin:0 0 var(--s2);color:var(--ink-2)}
.page-close__nums{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-3)}
.page-close__nums a{color:var(--ink-2)}
.page-close__acts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.paper-page .rule{margin-bottom:var(--s5)}

/* ---------------------------------------------------------------- letters -- */

.letters-body{background:var(--ground-2);padding-block:var(--s6)}

/* The filter. Five facets, every one of them counted from the records
   themselves: a present, the making of it, delivered in person, a named piece.
   Radio inputs and :has(), so it works with JavaScript switched off. Where
   :has() is unsupported the control takes itself away and all 71 stay on show. */
.lf{border:0;margin:0 0 var(--s5);padding:0;min-width:0}
.lf__legend{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-2);
  padding:0;margin:0 0 var(--s2)}
.lf__row{position:relative;display:flex;flex-wrap:wrap;gap:10px}
.lf__pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:var(--t-xs);font-weight:500;
  color:var(--ink-2);background:transparent;
  border:1px solid var(--ground-3);border-radius:1px;
  padding:9px 15px;min-height:40px;cursor:pointer;
  transition:border-color .18s,background-color .18s,color .18s;
}
.lf__pill:hover{border-color:var(--ink-3);color:var(--ink)}
/* ink-3 is 4.2:1 on --ground-2 and fails AA, so the mat uses ink-2 throughout */
.lf__n{font-size:12px;line-height:1;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lf__in:checked+.lf__pill{color:var(--ink);border-color:var(--ink);
  background:rgba(33,30,25,.05)}
.lf__in:focus-visible+.lf__pill{outline:2px solid var(--brass);outline-offset:3px}

@supports selector(:has(*)){
  .letters:has(#lf-gift:checked) .letter:not([data-gift]){display:none}
  .letters:has(#lf-craft:checked) .letter:not([data-craft]){display:none}
  .letters:has(#lf-hand:checked) .letter:not([data-hand]){display:none}
  .letters:has(#lf-piece:checked) .letter:not([data-piece]){display:none}
}
@supports not selector(:has(*)){
  .lf{display:none}
}

.letters__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s4);align-items:start;
}

/* A sheet of paper on the mat. Lighter than its ground, hairline edge, and no
   shadow: it is a letter, not a card in a carousel. */
.letter__sheet{
  background:var(--ground);
  border:1px solid var(--ground-3);
  padding:clamp(22px,2.7vw,32px);
}
.letter__note{margin:0;max-width:52ch}
.letter__note p{margin:0 0 .9em}
.letter__note p:last-child{margin-bottom:0}
.letter__sal{color:var(--ink-2)}
.letter__note .letter__sign{font-style:italic;color:var(--ink-2);margin:var(--s3) 0 0}
.letter__piece{margin:var(--s3) 0 0;font-family:var(--sans);font-size:var(--t-xs)}
.letter__piece a{color:var(--ink-2);text-decoration-color:var(--ground-3)}
.letter__piece a:hover{text-decoration-color:var(--brass)}

/* The opening letter, set larger. It is filtered with all the others, so the
   counts on the pills always match what is on screen. */
.letter--lead{display:block;margin-bottom:var(--s5)}
.letter--lead .letter__sheet{padding:clamp(26px,4vw,54px);max-width:760px}
.letter--lead .letter__note{
  max-width:25em;
  font-size:clamp(var(--t-md),2.1vw,var(--t-lg));
  line-height:1.42;
}
.letter--lead .letter__note .letter__sign{font-size:var(--t-md)}
.letter--lead .letter__sal{font-size:var(--t-md)}

/* -------------------------------------------------------------- documents -- */

.docs-group+.docs-group{border-top:1px solid var(--ground-3)}
.docs-group__in{
  display:grid;
  grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:var(--s5);
}
.docs-group__head h2{font-size:clamp(var(--t-lg),2.6vw,var(--t-xl))}
.docs-group__head p{margin:var(--s2) 0 0;color:var(--ink-2);max-width:32ch}

.docs{list-style:none;margin:0;padding:0}
.doc{
  display:grid;grid-template-columns:26px minmax(0,1fr);
  gap:var(--s3);padding-block:var(--s3);
}
.doc:first-child{padding-top:0}
.doc:last-child{padding-bottom:0}
.doc+.doc{border-top:1px solid var(--ground-3)}
.doc__mark{margin-top:9px;color:var(--ink-3);overflow:visible}
.doc__title{font-size:var(--t-lg);line-height:1.2;margin:0}
.doc__title a{display:inline-block;padding-block:6px;
  text-decoration-color:var(--ground-3)}
.doc__title a:hover{text-decoration-color:var(--brass)}
.doc__what{margin:0;color:var(--ink-2);max-width:52ch}
.doc__meta{margin:var(--s2) 0 0;font-family:var(--sans);font-size:var(--t-xs);
  color:var(--ink-3);font-variant-numeric:tabular-nums}
.doc__rel{margin:6px 0 0;font-family:var(--sans);font-size:var(--t-xs);
  color:var(--ink-3)}
.doc__rel a{color:var(--ink-2);text-decoration-color:var(--ground-3)}

/* Inline links in a sentence: vertical padding lifts the hit area past 24px
   without touching the line box, so a thumb can find them. */
.doc__rel a,.page-close__nums a,.letter__piece a{padding-block:6px}
.doc__rel a:hover{text-decoration-color:var(--brass)}

/* ------------------------------------------------------------- responsive -- */

@media (max-width:860px){
  .docs-group__in{grid-template-columns:1fr;gap:var(--s4)}
  .docs-group__head p{max-width:46ch}
}

@media (max-width:760px){
  .letters-body{padding-block:var(--s5)}
  .letters__list{grid-template-columns:1fr;gap:var(--s3)}
  .letter--lead{margin-bottom:var(--s4)}
  .lf{margin-bottom:var(--s4)}
}

@media (max-width:430px){
  .doc{grid-template-columns:1fr;gap:var(--s2)}
  .doc__mark{margin-top:0}
}