/* The Reference shelf. Deliberately plainer than the reading surfaces: this
   is a page you arrive at knowing what you want, so the job is legibility and
   scanning, not atmosphere. */
.syn-ref-page{max-width:900px;margin:0 auto;padding:0 1rem 3rem}
.syn-ref-back{margin:0 0 .9rem;font-family:var(--syn-sans);font-size:var(--t-2xs);
  letter-spacing:.11em;text-transform:uppercase}
.syn-ref-back a{color:var(--syn-gold);text-decoration:none}
.syn-ref-back a:hover{color:var(--syn-gold-hi)}

.syn-ref-head{margin:0 0 1.6rem}
.syn-ref-head h1{font-family:var(--syn-serif);font-weight:500;
  color:var(--syn-text);margin:0 0 .5rem;font-size:var(--t-3xl);
  line-height:var(--lh-tight);letter-spacing:-.012em;text-wrap:balance}
.syn-ref-lede{color:var(--syn-ink-dim);font-size:var(--t-lg);
  line-height:var(--lh-prose);margin:0 0 1.2rem;max-width:var(--measure)}

.syn-ref-search{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0}
.syn-ref-search label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.syn-ref-search input{flex:1 1 18rem;min-width:0;padding:.6rem .8rem;border-radius:8px;
  border:1px solid var(--syn-border);background:var(--syn-surface);color:var(--syn-text);font-size:var(--t-sm)}
.syn-ref-search input:focus{outline:2px solid var(--syn-border-hi);outline-offset:1px}
.syn-ref-search button{padding:.6rem 1.1rem;border-radius:8px;border:1px solid var(--syn-border-hi);
  background:var(--syn-surface);color:var(--syn-gold-hi);font-size:var(--t-sm);cursor:pointer}
.syn-ref-search button:hover{background:var(--syn-surface)}

.syn-ref-shelves{display:grid;gap:.6rem;margin:1.8rem 0 0;
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.syn-ref-shelf{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 1rem;
  border:1px solid var(--syn-border);border-radius:10px;background:var(--syn-surface);text-decoration:none}
.syn-ref-shelf:hover{border-color:var(--syn-border-hi)}
.syn-ref-shelf-glyph{font-size:var(--t-xl);line-height:var(--lh-tight);color:var(--syn-text-dim);flex:0 0 auto}
.syn-ref-shelf-glyph--big{font-size:var(--t-3xl);display:block;margin-bottom:.25rem}
.syn-ref-shelf-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.syn-ref-shelf-text b{color:var(--syn-text);font-weight:normal;font-size:var(--t-md)}
.syn-ref-shelf-count{font-family:var(--syn-sans);font-feature-settings:"lnum","tnum";color:var(--syn-text-dim);font-size:var(--t-2xs);letter-spacing:.07em;text-transform:uppercase;
  font-variant-numeric:tabular-nums}
.syn-ref-shelf-kicker{color:var(--syn-text-dim);font-size:var(--t-sm);line-height:var(--lh-dense)}

.syn-ref-list{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem}
.syn-ref-list--shelf{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
.syn-ref-list li{padding:.7rem .9rem;border:1px solid var(--syn-border);border-radius:9px;background:var(--syn-surface)}
.syn-ref-list a{display:flex;gap:.5rem;align-items:baseline;text-decoration:none}
.syn-ref-list b{color:var(--syn-gold-hi);font-weight:normal;font-size:var(--t-md)}
.syn-ref-list a:hover b{text-decoration:underline}
.syn-ref-glyph{color:var(--syn-text-dim);font-size:var(--t-sm)}
.syn-ref-list p{margin:.2rem 0 0;color:var(--syn-text-dim);font-size:var(--t-sm);line-height:var(--lh-prose)}
.syn-ref-empty{color:var(--syn-text-dim);font-size:var(--t-sm)}
.syn-ref-results h2{font-family:var(--syn-serif);font-weight:normal;color:var(--syn-text);
  font-size:var(--t-md);margin:1.6rem 0 0}

.syn-ref-facet{margin:0 0 2.1rem}
.syn-ref-facet h2{font-family:var(--syn-serif);font-weight:500;
  color:var(--syn-text);font-size:var(--t-lg);line-height:var(--lh-tight);
  margin:0 0 .5rem}
.syn-ref-facet p{margin:0;color:var(--syn-ink-dim);font-size:var(--t-md);
  line-height:var(--lh-prose);max-width:var(--measure)}
.syn-ref-corr{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0}
.syn-ref-corr dt{font-family:var(--syn-sans);font-feature-settings:"lnum","tnum";color:var(--syn-text-dim);font-size:var(--t-2xs);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.syn-ref-corr dd{margin:0;color:var(--syn-text);font-size:var(--t-sm)}
.syn-ref-sources ul{margin:0;padding-left:1.1rem;color:var(--syn-text-dim);font-size:var(--t-sm);line-height:var(--lh-prose)}
.syn-ref-book{margin:1.5rem 0 0}
.syn-ref-book a{color:var(--syn-gold-hi);text-decoration:none;font-size:var(--t-sm)}
.syn-ref-book a:hover{text-decoration:underline}
@media print{.syn-ref-back,.syn-ref-search{display:none}}

.syn-ref-band{margin:2rem 0 0}
.syn-ref-band h2{font-family:var(--syn-serif);font-weight:normal;
  color:var(--syn-text);font-size:var(--t-md);margin:0 0 .15rem}
.syn-ref-band-kicker{color:var(--syn-text-dim);font-size:var(--t-sm);line-height:var(--lh-prose);margin:0 0 .8rem;max-width:60ch}
.syn-ref-band .syn-ref-shelves{margin:0}


/* A drawn figure at the head of an entry. Sized so it reads as a diagram
   rather than a hero image — the prose is still the entry. */
.syn-reffig{margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.syn-reffig-svg{width:190px;height:190px;color:var(--syn-gold);display:block}
.syn-reffig-hexagram,.syn-reffig-geomancy{color:var(--syn-text)}
.syn-reffig figcaption{color:var(--syn-text-dim);font-size:var(--t-xs);line-height:var(--lh-prose);max-width:46ch;margin:0}
@media (max-width:640px){.syn-reffig-svg{width:150px;height:150px}}
.syn-reffig-plate{width:100%;max-width:520px;height:auto;display:block;border-radius:6px;
  background:var(--syn-paper);padding:10px}


/* ── the shelf as a wall of plates ──────────────────────────────────────────
   Ten of the thirty shelves are picture sets, and every one of them used to
   be a column of names. The frame is a lit ground rather than a card: these
   are line engravings on white, and a dark surface behind them would fight
   the paper they were printed on. */
.syn-ref-plates{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.syn-ref-plates a{display:flex;flex-direction:column;gap:.45rem;text-decoration:none}
.syn-ref-plate-frame{display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;padding:10px;border-radius:8px;background:var(--syn-paper);
  border:1px solid rgba(200,168,75,.22);overflow:hidden;
  transition:border-color .16s, transform .16s}
.syn-ref-plates a:hover .syn-ref-plate-frame{border-color:var(--syn-gold,var(--syn-gold));
  transform:translateY(-2px)}
.syn-ref-plate-frame img{max-width:100%;max-height:100%;display:block}
.syn-ref-plate-frame svg{width:78%;height:78%;color:var(--syn-paper-ink)}
.syn-ref-plate-glyph{font-size:var(--t-4xl);color:var(--syn-paper-mute);line-height:var(--lh-tight)}
.syn-ref-plates b{color:var(--syn-gold-hi,var(--syn-gold-hi));font-weight:normal;font-size:var(--t-sm);
  line-height:var(--lh-dense)}
.syn-ref-plates a:hover b{text-decoration:underline}
.syn-ref-plate-line{color:var(--syn-text-dim);font-size:var(--t-xs);line-height:var(--lh-dense)}
@media (prefers-reduced-motion:reduce){
  .syn-ref-plates a:hover .syn-ref-plate-frame{transform:none}}

/* a specimen from each shelf, on the index */
.syn-ref-shelf-specimen{width:46px;height:46px;object-fit:contain;flex:0 0 auto;
  background:var(--syn-paper);border-radius:6px;padding:4px}
.syn-ref-shelf--plate{align-items:center}

/* search hits show what they are */
.syn-ref-hit--plate{display:flex;gap:.8rem;align-items:flex-start}
.syn-ref-hit-thumb{width:54px;height:54px;object-fit:contain;flex:0 0 auto;
  background:var(--syn-paper);border-radius:6px;padding:4px}