.quote-page { background: var(--paper); }
.quote-workspace { padding: 72px 0 82px; }
.quote-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 72px; align-items: end; }
.quote-heading .eyebrow { color: var(--coral-dark); }
.quote-heading h1 { max-width: 820px; margin: 0; font: 500 clamp(4rem, 8vw, 7.2rem)/.9 var(--serif); letter-spacing: -.06em; }
.quote-heading > p { max-width: 480px; margin: 0 0 8px; color: #505764; font-size: 1.08rem; }

.need-panel { display: flex; justify-content: space-between; gap: 26px; align-items: end; margin-top: 52px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: #fffdf8; box-shadow: var(--shadow); }
.control-label { display: block; margin-bottom: 12px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.theme-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-chip { min-height: 39px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: #505764; cursor: pointer; font-size: .82rem; font-weight: 720; }
.theme-chip:hover, .theme-chip:focus-visible { border-color: var(--ink); color: var(--ink); }
.theme-chip.active { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.drawn-quote { position: relative; overflow: hidden; margin-top: 18px; padding: 34px 38px 38px; border-radius: 28px; background: var(--ink); color: var(--paper); }
.drawn-quote::after { content: "“"; position: absolute; right: 28px; bottom: -90px; color: rgba(184,216,255,.09); font: 500 18rem/1 var(--serif); }
.drawn-meta, .drawn-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.drawn-meta > span { color: var(--coral); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.pin-feature, .quiet-button { border: 0; border-bottom: 1px solid rgba(248,245,238,.38); background: transparent; color: var(--paper); cursor: pointer; font-size: .82rem; font-weight: 760; }
.pin-feature[aria-pressed="true"] { color: var(--coral); border-color: var(--coral); }
.drawn-quote blockquote { position: relative; z-index: 1; max-width: 930px; margin: 46px 0 54px; font: 500 clamp(2.3rem, 5vw, 4.7rem)/1.04 var(--serif); letter-spacing: -.04em; }
.drawn-footer strong, .drawn-footer span { display: block; }
.drawn-footer strong { font: 500 1.28rem/1.2 var(--serif); }
.drawn-footer span { margin-top: 4px; color: rgba(248,245,238,.6); font-size: .78rem; }

.board-section { padding: 88px 0 110px; background: var(--sky); }
.board-head { display: flex; justify-content: space-between; gap: 32px; align-items: end; }
.board-head h2 { max-width: 740px; margin: 0; font: 500 clamp(2.8rem, 5vw, 5rem)/.96 var(--serif); letter-spacing: -.05em; }
.board-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.board-actions .button-secondary { background: rgba(248,245,238,.45); }
#pinCount { display: inline-grid; min-width: 23px; height: 23px; margin-left: 7px; place-items: center; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .7rem; }
.board-status { display: flex; justify-content: space-between; gap: 20px; margin: 36px 0 16px; padding-top: 15px; border-top: 1px solid rgba(11,16,32,.2); color: rgba(11,16,32,.62); font-size: .78rem; font-weight: 680; }

.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 14px; }
.quote-card { min-height: 340px; perspective: 1200px; }
.quote-card:nth-child(7n+1), .quote-card:nth-child(7n+5) { grid-column: span 2; }
.quote-card-inner { position: relative; width: 100%; height: 100%; min-height: inherit; transition: transform .55s cubic-bezier(.2,.75,.2,1); transform-style: preserve-3d; }
.quote-card.is-flipped .quote-card-inner { transform: rotateY(180deg); }
.quote-face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 25px; border: 1px solid rgba(11,16,32,.16); border-radius: 20px; background: #fffdf8; box-shadow: 0 12px 30px rgba(11,16,32,.08); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.quote-card:nth-child(4n+2) .quote-front { background: var(--paper-2); }
.quote-card:nth-child(6n+3) .quote-front { background: var(--coral); }
.quote-card:nth-child(8n+6) .quote-front { background: var(--ink); color: var(--paper); }
.quote-back { transform: rotateY(180deg); background: var(--ink); color: var(--paper); }
.card-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.quote-kind { color: var(--coral-dark); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.quote-card:nth-child(8n+6) .quote-kind, .quote-back .quote-kind { color: var(--coral); }
.pin-button, .delete-button { min-width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid rgba(11,16,32,.2); border-radius: 50%; background: transparent; cursor: pointer; font-size: 1rem; }
.quote-card:nth-child(8n+6) .pin-button, .quote-back .delete-button { border-color: rgba(248,245,238,.28); color: var(--paper); }
.pin-button[aria-pressed="true"] { background: var(--ink); color: var(--coral); }
.quote-card:nth-child(8n+6) .pin-button[aria-pressed="true"] { background: var(--paper); color: var(--coral-dark); }
.card-quote { margin: auto 0; font: 500 clamp(1.55rem, 2.5vw, 2.35rem)/1.15 var(--serif); letter-spacing: -.028em; }
.card-attribution { margin: 20px 0 0; }
.card-attribution strong, .card-attribution span { display: block; }
.card-attribution strong { font: 500 1.05rem/1.25 var(--serif); }
.card-attribution span { margin-top: 3px; color: #686e78; font-size: .72rem; }
.quote-card:nth-child(8n+6) .card-attribution span { color: rgba(248,245,238,.56); }
.card-bottom { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin-top: 22px; }
.card-themes { display: flex; flex-wrap: wrap; gap: 5px; }
.card-themes span { padding: 4px 8px; border: 1px solid currentColor; border-radius: 999px; opacity: .58; font-size: .62rem; font-weight: 740; }
.flip-button { padding: 0 0 3px; border: 0; border-bottom: 2px solid var(--coral); background: transparent; color: inherit; cursor: pointer; font-size: .74rem; font-weight: 780; white-space: nowrap; }
.quote-back h3 { margin: 28px 0 12px; color: var(--paper); font: 500 1.8rem/1.1 var(--serif); }
.quote-back p { margin: 0 0 16px; color: rgba(248,245,238,.72); font-size: .9rem; line-height: 1.55; }
.quote-back .prompt { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(248,245,238,.18); color: var(--paper); font: 500 1.14rem/1.35 var(--serif); }
.quote-back .card-bottom { margin-top: 16px; }
.empty-board { padding: 70px 30px; border: 1px dashed rgba(11,16,32,.32); border-radius: 22px; text-align: center; }
.empty-board h3 { margin: 0 0 8px; font: 500 2.2rem/1.1 var(--serif); }
.empty-board p { margin: 0 0 22px; color: rgba(11,16,32,.64); }

.board-note { display: grid; grid-template-columns: .35fr 1fr; gap: 40px; padding: 64px 0; }
.board-note .eyebrow { color: var(--coral-dark); }
.board-note p { max-width: 760px; margin: 0; color: #505764; }

.reminder-dialog { width: min(610px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 24px; background: var(--paper); color: var(--ink); box-shadow: 0 32px 100px rgba(11,16,32,.3); }
.reminder-dialog::backdrop { background: rgba(11,16,32,.72); backdrop-filter: blur(5px); }
.reminder-dialog form { padding: 30px; }
.dialog-head { display: flex; justify-content: space-between; gap: 24px; align-items: start; margin-bottom: 24px; }
.dialog-head .eyebrow { margin-bottom: 7px; color: var(--coral-dark); }
.dialog-head h2 { margin: 0; font: 500 2.7rem/1 var(--serif); letter-spacing: -.04em; }
.dialog-close { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.5rem; }
.reminder-dialog .field + .field { margin-top: 15px; }
.reminder-dialog textarea { min-height: 150px; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.dialog-privacy { margin: 16px 0 0; color: #666d78; font-size: .76rem; }

@media (max-width: 960px) {
  .quote-heading { grid-template-columns: 1fr; gap: 24px; }
  .need-panel, .board-head { align-items: flex-start; flex-direction: column; }
  .board-actions { justify-content: flex-start; }
  .quote-grid { grid-template-columns: 1fr 1fr; }
  .quote-card:nth-child(7n+1), .quote-card:nth-child(7n+5) { grid-column: auto; }
}

@media (max-width: 650px) {
  .quote-workspace { padding: 52px 0 64px; }
  .quote-heading h1 { font-size: clamp(3.6rem, 18vw, 5rem); }
  .need-panel { padding: 19px; }
  .need-panel .button { width: 100%; }
  .drawn-quote { padding: 25px 23px 28px; }
  .drawn-meta { align-items: flex-start; }
  .drawn-quote blockquote { margin: 38px 0 44px; font-size: 2.15rem; }
  .drawn-footer { align-items: flex-start; flex-direction: column; }
  .board-section { padding: 70px 0 82px; }
  .board-actions, .board-actions .button { width: 100%; }
  .quote-grid { grid-template-columns: 1fr; }
  .quote-card { min-height: 360px; }
  .board-status { align-items: flex-start; flex-direction: column; }
  .board-note { grid-template-columns: 1fr; gap: 10px; padding: 50px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .quote-card-inner { transition: none; }
}