/* /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 #BDB7AB; border-top:3px solid var(--ink); background:var(--white); padding:clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px) 16px; box-shadow:0 1px 0 rgba(17,17,17,0.04); transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .4s var(--ease);}
.qcard:hover{border-color:var(--ink); box-shadow:0 14px 30px -18px rgba(17,17,17,0.45); 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:500; 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:600;}
.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:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-label); line-height:1.6;}
.qcard-src b{font-weight:700; color:var(--ink);}
.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{font-weight:700; color:var(--ink); text-decoration:underline; text-decoration-color:#BDB7AB; text-decoration-thickness:1px; text-underline-offset:5px;}
.qcard-topics a:hover{text-decoration-color:var(--ink);}
.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;} }
@media print{ .qcard{box-shadow:none; break-inside:avoid;} }

/* ---------- 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);}
/* Quotes by source (the Manifesto by chapter, interviews, essays): tiles on white, and one group per section or source. */
.qtopic-grid-light{background:#BDB7AB; border-color:#BDB7AB; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));}
.qtopic-grid-light .qtopic{background:var(--white);}
.qtopic-grid-light .qtopic:hover,.qtopic-grid-light .qtopic:focus-visible{background:var(--white); box-shadow:inset 0 0 0 2px var(--ink);}
.qtopic-grid-light .qtopic:focus-visible{outline-color:var(--ink);}
.qtopic-grid-light .qtopic-n{color:var(--ink-label);}
.qtopic-grid-light .qtopic-name{color:var(--ink);}
.qtopic-grid-light .qtopic-d{color:var(--ink-body);}
.qsrc-group{margin-top:clamp(36px, 4.4vw, 56px); scroll-margin-top:96px;}
.qsrc-group:first-of-type{margin-top:8px;}
.qsrc-h{font-family:var(--display); font-size:clamp(20px, 2.2vw, 26px); font-weight:700; letter-spacing:-0.01em; color:var(--ink); margin:0 0 6px; padding-top:18px; border-top:3px solid var(--ink);}
.qsrc-meta{font-size:14px; line-height:1.6; color:var(--ink-label); margin:0 0 18px;}
.qsrc-meta a{color:var(--ink); text-decoration:underline; text-decoration-color:#BDB7AB; text-underline-offset:4px;}
.qsrc-meta a:hover{text-decoration-color:var(--ink);}
.qsrc-group > .qsrc-h + .qgrid{margin-top:18px;}
.qsrc-cta{margin-top:clamp(28px, 3vw, 40px);}
.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;}
}

/* ---------------------------------------------------------------------------
   The reading shelf. Any section that holds a quote grid (the hub, every topic,
   source, and chapter page) turns dark: a 56px lattice and a soft platinum glow
   behind glass cards, with the quotes set in a warm off-white. Long sessions of
   reading are easier on Ink than on paper, and the glass keeps each card distinct
   without heavy rules. Numerals stay solid; nothing here uses text-stroke.
   --------------------------------------------------------------------------- */
section:has(.qgrid){position:relative; isolation:isolate; background:#0E0E10; color:#C8C5BE;}
section:has(.qgrid)::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 50% 32% at 12% 0%, rgba(200,197,190,0.11), transparent 70%),
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:linear-gradient(180deg, #000, rgba(0,0,0,0.4)); mask-image:linear-gradient(180deg, #000, rgba(0,0,0,0.4));}
section:has(.qgrid)::after{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, #C8C5BE 30%, #C8C5BE 70%, transparent); opacity:0.6;}
section:has(.qgrid) h2,section:has(.qgrid) h3{color:#FFFFFF;}
section:has(.qgrid) p{color:#A9A6A0;}
section:has(.qgrid) a{color:#E6E3DC;}
section:has(.qgrid) .eyebrow{color:#C8C5BE;}

section:has(.qgrid) .qcard{border:1px solid rgba(255,255,255,0.11); border-top:1px solid rgba(255,255,255,0.11);
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012)); box-shadow:none;}
section:has(.qgrid) .qcard::before{content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:3px; background:#C8C5BE;
  transform:scaleY(0); transform-origin:bottom; transition:transform .45s var(--ease);}
section:has(.qgrid) .qcard:hover{border-color:rgba(200,197,190,0.55); background:linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
  box-shadow:0 18px 40px -26px rgba(0,0,0,0.9);}
section:has(.qgrid) .qcard:hover::before{transform:scaleY(1);}
section:has(.qgrid) .qcard:has(.qcard-q a:focus-visible){outline-color:#C8C5BE;}
section:has(.qgrid) .qcard-q p{color:#ECEAE5;}
section:has(.qgrid) .qcard-q mark{background:rgba(200,197,190,0.28); color:#FFFFFF;}
section:has(.qgrid) .qcard-src{color:#8E8B84;}
section:has(.qgrid) .qcard-src b{color:#C8C5BE;}
section:has(.qgrid) .qcard-foot{border-top-color:rgba(255,255,255,0.09);}
section:has(.qgrid) .qcard-topics a{color:#C8C5BE; text-decoration-color:rgba(200,197,190,0.35);}
section:has(.qgrid) .qcard-topics a:hover{color:#FFFFFF; text-decoration-color:#FFFFFF;}
section:has(.qgrid) .qcard-act button{color:#8E8B84;}
section:has(.qgrid) .qcard-act button:hover,
section:has(.qgrid) .qcard-act button[aria-pressed="true"],
section:has(.qgrid) .qcard-act button.done{color:#FFFFFF;}
section:has(.qgrid) .qcard-act button[aria-pressed="true"]::before{background:#C8C5BE;}

/* Search, filters, and chips on the shelf */
section:has(.qgrid) .qsearch input[type=search]{color:#FFFFFF; background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.22); color-scheme:dark;}
section:has(.qgrid) .qsearch input[type=search]::placeholder{color:#77746E;}
section:has(.qgrid) .qsearch input[type=search]:focus{outline-color:#C8C5BE; border-color:#C8C5BE;}
section:has(.qgrid) .qsearch select,section:has(.qgrid) .qsaved{color:#E6E3DC; background:#16161A; border-color:rgba(255,255,255,0.16); color-scheme:dark;}
section:has(.qgrid) .qsearch select:hover,section:has(.qgrid) .qsaved:hover{border-color:#C8C5BE;}
section:has(.qgrid) .qsaved[aria-pressed="true"]{background:#FFFFFF; color:#0A0A0A; border-color:#FFFFFF;}
section:has(.qgrid) .qsearch-go{background:#FFFFFF; color:#0A0A0A; border-color:#FFFFFF;}
section:has(.qgrid) .qchips button{color:#A9A6A0; border-color:rgba(255,255,255,0.16);}
section:has(.qgrid) .qchips button:hover{color:#FFFFFF; border-color:#C8C5BE;}
section:has(.qgrid) .qchips button[aria-pressed="true"]{background:#FFFFFF; color:#0A0A0A; border-color:#FFFFFF;}
section:has(.qgrid) .qchips button:focus-visible{outline-color:#C8C5BE;}
section:has(.qgrid) .qcount,section:has(.qgrid) .qempty{color:#A9A6A0;}
section:has(.qgrid) .qmore .btn{color:#FFFFFF; border-color:rgba(255,255,255,0.4); background:transparent;}
section:has(.qgrid) .qmore .btn:hover{background:#FFFFFF; color:#0A0A0A; border-color:#FFFFFF;}
section:has(.qgrid) .qt-mini{color:#C8C5BE;}
@media (prefers-reduced-motion:reduce){ section:has(.qgrid) .qcard::before{transition:none;} }
/* ericchowreal.com: the topic and section menus sit on the dark shelf when a
   grid shares their section, so they take the shelf's colours (AA on #0E0E10). */
section:has(.qgrid) .qtopics a{color:#C8C5BE; border-color:rgba(255,255,255,0.16);}
section:has(.qgrid) .qtopics a span{color:#8E8B84;}
section:has(.qgrid) .qtopics a:hover,section:has(.qgrid) .qtopics a:focus-visible{color:#FFFFFF; border-color:#C8C5BE;}
section:has(.qgrid) .qtopics a[aria-current="page"]{background:#FFFFFF; color:#0A0A0A; border-color:#FFFFFF;}
section:has(.qgrid) .qtopics a[aria-current="page"] span{color:#5C584E;}