/* The quotes library: /quotes, each quote's page, the tag and person pages.
   Loaded after letters.css, whose heading, chips, card grid, sheet and
   prose styles these pages share; this file adds only what's particular
   to quotes. */

.letters-head .stamp{margin-bottom:14px;}
.letters-head .lede a{color:var(--accent);}
.letters-head .quote-title{font-size:clamp(26px,3.6vw,32px); font-weight:500; color:var(--soft); font-style:italic;}

/* ---------- the quote itself ----------
   The words large on the white sheet, then who said them, then the one
   action on the page. */
.quote-sheet{margin-top:30px;}
.quote-sheet blockquote{margin:0; padding:0;}
.quote-sheet blockquote p{
  font-size:clamp(28px,4.2vw,38px); line-height:1.3; margin:0; color:var(--ink); text-wrap:pretty;
}
/* Longer quotes step down (the page sets the class from the quote's
   length): a line or two stays large, a paragraph reads as a passage and
   keeps the button within reach. */
.quote-medium blockquote p{font-size:clamp(23px,3vw,29px); line-height:1.38;}
.quote-long blockquote p{font-size:clamp(19px,2.2vw,22px); line-height:1.55;}
.quote-sheet blockquote p::before, .quote-card .card-quote::before{content:"“";}
.quote-sheet blockquote p::after, .quote-card .card-quote::after{content:"”";}
.quote-sheet figcaption{margin-top:22px; font-size:19px; color:var(--soft);}
.quote-sheet figcaption a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line);}
.quote-sheet figcaption a:hover, .quote-sheet figcaption a:focus-visible{border-color:var(--accent);}

/* The button and the tags share one row under the quote: the action on
   the left, the ways to browse on the right. */
.save{margin-top:34px; padding-top:26px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:14px 18px; flex-wrap:wrap;}
.save-button{
  font-family:var(--sans); font-size:16px; font-weight:600; padding:12px 20px; text-decoration:none;
  color:var(--paper); background:var(--accent); border:1px solid var(--accent);
}
.save-button:hover, .save-button:focus-visible{background:var(--brand); border-color:var(--brand);}
.quote-tags{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.quote-tags a{
  display:block; font-family:var(--sans); font-size:13.5px; font-weight:500; text-decoration:none; color:var(--accent);
  padding:5px 12px; border:1px solid var(--line); background:var(--accent-wash);
}
.quote-tags a:hover, .quote-tags a:focus-visible{border-color:var(--accent);}

/* ---------- context, why, bio, source: collapsed sections ----------
   One sheet of rows; each opens in place. The heading stays an <h2> inside
   the <summary>, so the page's outline is the same open or closed. */
.quote-folds{margin-top:22px; padding-block:6px;}
.fold{border-top:1px solid var(--line);}
.fold:first-child{border-top:0;}
.fold summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 0;
}
.fold summary::-webkit-details-marker{display:none;}
.fold summary h2{font-size:22px; font-weight:600; margin:0; color:var(--ink);}
/* A plus drawn from two bars; opening shrinks the vertical one away, so the
   + turns into a − in step with the slide (the quote page's script adds
   .closing as a section starts to close, while it is still [open]). */
.fold-icon{position:relative; width:14px; height:14px; flex:none;}
.fold-icon::before, .fold-icon::after{
  content:""; position:absolute; background:var(--accent); border-radius:1px;
  transition:transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fold-icon::before{left:0; right:0; top:6.5px; height:1.5px;}
.fold-icon::after{top:0; bottom:0; left:6.5px; width:1.5px;}
.fold[open]:not(.closing) .fold-icon::after{transform:scaleY(0);}
@media (prefers-reduced-motion: reduce){ .fold-icon::after{transition:none;} }
.fold summary:hover h2, .fold summary:focus-visible h2{color:var(--accent);}
.fold summary:focus-visible{outline:2px solid var(--accent); outline-offset:4px;}
.fold-body{padding-bottom:12px;}
.fold-body p, .fold-body li{font-size:19px; line-height:1.6; color:var(--ink); margin:0 0 18px;}
.fold-body a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--line);}
.fold-body a:hover, .fold-body a:focus-visible{border-color:var(--accent);}
.fold-body blockquote{margin:0 0 18px; padding-left:20px; border-left:2px solid var(--accent); font-style:italic;}
.fold-body .who{font-style:italic; color:var(--soft);}
.fold-body .checked-on{color:var(--soft);}
.fold-body .sources, .quote-body .sources{list-style:none; padding:0;}
.fold-body .sources li, .quote-body .sources li{font-size:17px; margin-bottom:8px;}

/* A person's page: their bio on a sheet, then their quotes. */
.quote-body{margin-top:28px;}
.quote-body .sources{margin-top:26px;}

/* ---------- letters that use it, related quotes ---------- */
.quote-section{max-width:680px; margin:56px auto 0;}
.quote-section:last-child{margin-bottom:var(--gap);}
.quote-section h2{font-size:24px; font-weight:600; margin:0 0 18px;}
/* Related quotes: three small cards across, wider than the reading column. */
.quote-related{
  max-width:none; width:min(1040px, calc(100vw - 2 * var(--pad)));
  margin-left:50%; transform:translateX(-50%);
}
.quote-related .letter-grid{grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px;}
@media (min-width:900px){ .quote-related .letter-grid{grid-template-columns:repeat(3, 1fr);} }
.quote-related .card-quote{font-size:18.5px;}
.browse{margin:22px 0 0; font-size:17px; color:var(--soft);}
.browse a{color:var(--accent); text-decoration:none;}
.browse a:hover, .browse a:focus-visible{text-decoration:underline;}
.letter-links{list-style:none; margin:0; padding:0;}
.letter-links li{border-top:1px solid var(--line);}
.letter-links li:last-child{border-bottom:1px solid var(--line);}
.letter-links a{display:flex; justify-content:space-between; gap:16px; padding:14px 0; text-decoration:none; color:var(--ink); font-size:19px;}
.letter-links strong{font-weight:500;}
.letter-links span{font-style:italic; color:var(--soft); font-size:16px; white-space:nowrap;}
.letter-links a:hover strong, .letter-links a:focus-visible strong{color:var(--accent);}

/* A quote's card in a grid: the words lead, the name follows. */
.quote-card .card-quote{font-size:20px; line-height:1.4; color:var(--ink); margin:0 0 14px; flex:1;}
.quote-card strong{font-size:17px; font-weight:600; margin:0 0 8px;}

@media (max-width:600px){
  .save-button{flex:1 1 100%; text-align:center;}
  .fold summary h2{font-size:21px;}
  .fold-body p, .fold-body li{font-size:19.5px;}
  .letter-links a{flex-direction:column; gap:2px;}
}