/* Quote — pull quote with attribution. Notes: docs/component-quote-notes.md
   The philosophy panel is components/philosophy.css. */

.quote{
  background:#faf9f6;
  position:relative;
  overflow:hidden;
}
.quote-zone{
  min-height:auto;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:3rem 3rem 3.5rem;
}
/* Roman, not italic. */
.quote-text{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.5rem,4vw,3.3rem);
  font-weight:400;
  font-style:normal;
  letter-spacing:.01em;
  line-height:1.4;
  color:#2A2A2A;
  max-width:1000px;
}
.quote-text .gold{
  color:var(--gold-dark);
  font-style:normal;
  font-weight:500;
}
.quote-attr{
  font-family:var(--display);
  /* <cite> is italic by default. */
  font-style:normal;display:block;
  font-size:.75rem;font-weight:500;
  letter-spacing:.25em;text-transform:uppercase;
  color:#2A2A2A;
  margin-top:2rem;
}
.quote-attr::before{
  content:'';display:block;
  width:30px;height:1px;
  background:var(--gold-dark);opacity:.5;
  margin:0 auto 1rem;
}
/* ── --dark ── */
.quote--dark{background:var(--charcoal)}
.quote--dark .quote-text{
  font-style:italic;
  font-size:clamp(1.3rem,2.4vw,1.85rem);
  line-height:1.8;
  color:rgba(255,255,255,.75);
}
.quote--dark .quote-text .gold{font-style:italic;color:var(--gold)}
.quote--dark .quote-attr{color:rgba(255,255,255,.85)}
.quote--dark .quote-attr::before{background:var(--gold);opacity:.3}

/* ── --lead ── */
.quote--lead{background:#faf9f6;padding:6rem 2rem 6.5rem}
.quote--lead .quote-zone{max-width:920px;margin:0 auto;padding:0}
.quote--lead .quote-text{
  font-style:normal;
  font-size:clamp(1.25rem,2.2vw,1.75rem);
  line-height:1.72;
  color:var(--charcoal);
}
.quote--lead .quote-text .gold{font-style:normal;color:var(--gold-dark);font-weight:600}
.quote--lead .quote-attr{color:#6b6b6b;margin-top:2.2rem}
.quote--lead .quote-attr::before{opacity:.45;margin:0 auto 1.2rem}

@media(max-width:768px){
  .quote-zone{padding:2.5rem 1.5rem 2.5rem}
  /* Scoped to --dark. */
  .quote--dark .quote-text{font-size:clamp(1.05rem,4.5vw,1.3rem);max-width:100%}
  .quote--lead{padding:3.5rem 1.5rem 4rem}
  .quote--lead .quote-zone{padding:0}
}