/* /quotes: the hub, quote pages, and topic pages (built by tools/quotes.mjs and
   the quotes dashboard from netlify/functions/lib/quotes-core.mjs). Layered on
   site.css, property.css, and im.css. Quotes are set in Montserrat Light, so the
   words carry the page and the furniture stays quiet. */

/* ---------- Cards ---------- */
.qgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap:clamp(14px, 1.8vw, 22px); align-items:stretch;}
.qcard{position:relative; display:flex; flex-direction:column; border:1px solid var(--rule-light); background:var(--white); padding:clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px) 16px; transition:border-color .3s var(--ease), transform .4s var(--ease);}
.qcard:hover{border-color:var(--ink); transform:translateY(-2px);}
.qcard[hidden]{display:none;}
.qcard-q{margin:0; padding:0; border:0;}
.qcard-q p{margin:0; font-family:var(--display); font-weight:400; font-size:18px; line-height:1.55; letter-spacing:-0.005em; color:var(--ink); max-width:none;}
.qcard.short .qcard-q p{font-size:21px; line-height:1.45; font-weight:500;}
.qcard.long .qcard-q p{font-size:16px; line-height:1.65;}
.qcard-q a{color:inherit; text-decoration:none;}
.qcard-q a::after{content:""; position:absolute; inset:0;}
.qcard-q a:focus-visible{outline:none;}
.qcard:has(.qcard-q a:focus-visible){outline:2px solid var(--ink); outline-offset:2px;}
.qcard-q mark{background:rgba(200,197,190,0.55); color:inherit; padding:0 1px;}
.qcard-src{margin:16px 0 14px; font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-label); line-height:1.6;}
.qcard-foot{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:auto; padding-top:12px; border-top:1px solid var(--rule-light);}
.qcard-topics{display:flex; flex-wrap:wrap; gap:4px 12px;}
.qcard-topics a,.qcard-act button{position:relative; z-index:1; font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-label); text-decoration:none; background:none; border:0; padding:4px 0; cursor:pointer;}
.qcard-topics a:hover,.qcard-act button:hover{color:var(--ink);}
.qcard-act{display:flex; gap:14px;}
.qcard-act[hidden]{display:none;}
.qcard-act button[aria-pressed="true"]{color:var(--ink);}
.qcard-act button[aria-pressed="true"]::before{content:""; display:inline-block; width:6px; height:6px; background:var(--ink); transform:rotate(45deg); margin-right:7px; vertical-align:1px;}
.qcard-act button.done{color:var(--ink);}
@media (prefers-reduced-motion:reduce){ .qcard{transition:none;} .qcard:hover{transform:none;} }

/* ---------- Hub hero and the featured quote ---------- */
.qhub-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px, 5vw, 80px); align-items:end;}
.qday{margin:0; border:1px solid var(--rule-dark); background:rgba(19,19,22,0.72); padding:clamp(24px, 3vw, 38px); position:relative; z-index:2;}
.qday-label{font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--platinum); margin:0 0 16px;}
.qday blockquote{margin:0; padding:0; border:0;}
.qday blockquote p{margin:0; font-family:var(--display); font-weight:300; font-size:clamp(20px, 2.1vw, 26px); line-height:1.45; letter-spacing:-0.01em; color:var(--white); max-width:none;}
.qday blockquote a{color:inherit; text-decoration:none;}
.qday blockquote a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px;}
.qday figcaption{margin-top:18px; font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--steel);}
@media (max-width:900px){ .qhub-grid{grid-template-columns:1fr; align-items:start;} }

/* ---------- Search ---------- */
.qsearch{margin:0 0 18px;}
.qsearch input[type=search]{width:100%; font-family:var(--display); font-size:clamp(17px, 1.6vw, 20px); font-weight:400; color:var(--ink); background:var(--white); border:1px solid var(--ink); padding:18px 20px; border-radius:0; -webkit-appearance:none; appearance:none;}
.qsearch input[type=search]::placeholder{color:var(--ink-label); opacity:1;}
.qsearch input[type=search]:focus{outline:2px solid var(--ink); outline-offset:2px;}
.qsearch-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; align-items:stretch;}
.qsearch select,.qsaved,.qsearch-go{font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); background:var(--white); border:1px solid var(--rule-light); padding:11px 14px; border-radius:0; cursor:pointer;}
.qsearch select{-webkit-appearance:none; appearance:none; padding-right:34px; background-image:linear-gradient(45deg,transparent 50%,var(--ink-label) 50%),linear-gradient(135deg,var(--ink-label) 50%,transparent 50%); background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size:5px 5px; background-repeat:no-repeat;}
.qsearch select:hover,.qsaved:hover{border-color:var(--ink);}
.qsearch select:focus-visible,.qsaved:focus-visible,.qsearch-go:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.qsaved[hidden]{display:none;}
.qsaved[aria-pressed="true"]{background:var(--ink); color:var(--white); border-color:var(--ink);}
.qsearch-go{background:var(--ink); color:var(--white); border-color:var(--ink); margin-left:auto;}
.qchips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px;}
.qchips[hidden]{display:none;}
.qchips button{font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-label); background:none; border:1px solid var(--rule-light); padding:8px 12px; cursor:pointer; transition:border-color .2s, color .2s, background-color .2s;}
.qchips button:hover{color:var(--ink); border-color:var(--ink);}
.qchips button[aria-pressed="true"]{background:var(--ink); color:var(--white); border-color:var(--ink);}
.qchips button:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.qcount{font-size:13px; color:var(--ink-label); margin:0 0 16px;}
.qempty{font-size:15px; color:var(--ink-body); margin:10px 0 0;}
.qempty[hidden]{display:none;}
.qmore{display:flex; justify-content:center; margin-top:34px;}
.qmore .btn[hidden]{display:none;}
.qt-mini{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); background:none; border:1px solid var(--ink-label); padding:8px 12px; cursor:pointer;}
.qt-mini:hover{background:var(--ink); color:var(--white);}
.qt-mini[hidden]{display:none;}
@media (max-width:620px){
  .qsearch select{flex:1 1 140px;}
  .qsearch-go{margin-left:0;}
}

/* ---------- Topics ---------- */
.qtopic-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap:1px; background:var(--rule-dark); border:1px solid var(--rule-dark);}
.qtopic{display:flex; flex-direction:column; gap:8px; background:var(--ink); padding:24px 24px 26px; text-decoration:none; transition:background-color .3s var(--ease);}
.qtopic:hover,.qtopic:focus-visible{background:var(--panel);}
.qtopic:focus-visible{outline:2px solid var(--platinum); outline-offset:-2px;}
.qtopic-n{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--graphite);}
.qtopic-name{font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-0.01em; color:var(--white);}
.qtopic-d{font-size:13.5px; line-height:1.6; color:var(--steel);}
.qtopics{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px;}
.qtopics a{font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-label); text-decoration:none; border:1px solid var(--rule-light); padding:8px 12px;}
.qtopics a span{margin-left:8px; color:var(--ink-label); font-weight:500;}
.qtopics a:hover{color:var(--ink); border-color:var(--ink);}
.qtopics a[aria-current="page"]{background:var(--ink); color:var(--white); border-color:var(--ink);}
.qtopics a[aria-current="page"] span{color:var(--platinum);}
.qfaq h3{font-size:17px; margin:0 0 8px;}
.qfaq p{color:var(--ink-body); margin:0 0 24px;}

/* ---------- The quote page ---------- */
.qt-crumbs{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--graphite); margin-bottom:28px; position:relative; z-index:2;}
.qt-crumbs a{color:var(--platinum); text-decoration:none;}
.qt-crumbs a:hover{color:var(--white);}
.qt-figure{margin:0; max-width:980px; position:relative; z-index:2;}
.qt-quote{margin:0; padding:0; border:0;}
.qt-text{font-family:var(--display); font-weight:300; font-size:clamp(28px, 3.7vw, 50px); line-height:1.25; letter-spacing:-0.02em; color:var(--white); margin:0; max-width:none; text-wrap:pretty;}
.qt-text.short{font-weight:400; font-size:clamp(34px, 4.8vw, 64px); line-height:1.12;}
.qt-text.long{font-size:clamp(22px, 2.5vw, 32px); line-height:1.45;}
.qt-cite{margin-top:clamp(22px, 3vw, 34px); display:flex; flex-direction:column; gap:6px; padding-left:50px; position:relative;}
.qt-cite::before{content:""; position:absolute; left:0; top:9px; width:34px; height:1px; background:var(--platinum);}
.qt-who{font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:var(--white);}
.qt-src{font-size:14.5px; line-height:1.6; color:var(--steel);}
.qt-src cite{font-style:italic;}
.qt-actions{display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; margin-top:clamp(28px, 3.4vw, 40px); position:relative; z-index:2;}
.qt-actions .btn[hidden]{display:none;}
.qt-actions .btn[aria-pressed="true"]{background:var(--white); color:var(--ink);}
.qt-images{display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin-left:8px;}
.qt-images[hidden]{display:none;}
.qt-images button{font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--platinum); background:none; border:0; border-bottom:1px solid transparent; padding:6px 0; cursor:pointer;}
.qt-images button:hover,.qt-images button:focus-visible{color:var(--white); border-bottom-color:var(--white);}
.qt-images button:disabled{opacity:.6; cursor:progress;}
.qt-share{display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin-left:8px;}
.qt-share-label{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--graphite);}
.qt-share a{font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--platinum); text-decoration:none; padding:6px 0; border-bottom:1px solid transparent;}
.qt-share a:hover{color:var(--white); border-bottom-color:var(--white);}
.qt-about h2{margin-bottom:22px;}
.qt-answer{color:var(--ink-body); font-size:16px; line-height:1.75;}
.qt-answer strong{color:var(--ink); font-weight:600;}
.qt-note{color:var(--ink-body);}
.qt-cite-box{border:1px solid var(--rule-light); padding:18px 20px; margin:26px 0 30px; max-width:640px;}
.qt-cite-label{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-label); margin:0 0 8px;}
.qt-cite-text{font-size:14px; line-height:1.65; color:var(--ink-body); margin:0 0 12px; word-break:break-word;}
.s-white .qt-specs{border-top-color:var(--rule-light);}
.s-white .qt-specs > div{border-bottom-color:var(--rule-light);}
.s-white .qt-specs dd{color:var(--ink-body);}
.qt-specs dd a{color:var(--ink);}
.qt-related{padding-top:0;}
.qt-pager{display:grid; grid-template-columns:1fr auto 1fr; gap:18px; align-items:stretch; margin-top:clamp(34px, 4vw, 52px); border-top:1px solid var(--rule-light); padding-top:22px;}
.qt-pager a{display:flex; flex-direction:column; gap:6px; color:var(--ink-body); text-decoration:none; font-size:14px; line-height:1.55;}
.qt-pager a span{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-label);}
.qt-pager a[rel="next"]{text-align:right;}
.qt-pager a:hover{color:var(--ink);}
.qt-pager .qt-pager-mid{align-self:center; font-family:var(--display); font-size:10.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); border:1px solid var(--ink-label); padding:12px 16px; text-align:center;}
.qt-pager .qt-pager-mid:hover{background:var(--ink); color:var(--white);}
@media (max-width:760px){
  .qt-pager{grid-template-columns:1fr 1fr;}
  .qt-pager .qt-pager-mid{grid-column:1 / -1; order:3;}
  .qt-share,.qt-images{margin-left:0; width:100%;}
}
@media print{
  .qt-actions,.qt-related,.site-header,.site-footer{display:none !important;}
  .qt-hero{background:#fff !important;}
  .qt-text,.qt-who{color:#000 !important;}
}
@media (max-width:620px){
  .qchips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:calc(-1 * var(--gutter)); padding-right:var(--gutter);}
  .qchips::-webkit-scrollbar{display:none;}
  .qchips button{flex:0 0 auto;}
}