/* The Mineral Kingdom. Fact reads plainly; lore is given room. */
.syn-cry{max-width:760px;margin:0 auto;padding:0 1rem 4rem}
.syn-cry-head{margin:1.6rem 0 1.4rem}
.syn-cry-head h1{font-family:var(--syn-serif);font-size:var(--t-2xl);color:var(--syn-gold-hi);
  font-weight:normal;margin:0 0 .4rem;text-wrap:balance}
.syn-cry-lede{color:var(--syn-ink-dim);font-size:var(--t-md);line-height:var(--lh-prose);margin:0;max-width:62ch}
.syn-cry-also{color:var(--syn-text-dim);font-size:var(--t-sm);margin:.1rem 0 .3rem;font-style:italic}
.syn-cry-back{margin:1.2rem 0 .6rem}
.syn-cry-back a{color:var(--syn-text-dim);text-decoration:none;font-size:var(--t-sm)}
.syn-cry-back a:hover{color:var(--syn-gold-hi)}
.syn-cry-sub{color:var(--syn-text-dim);font-size:var(--t-sm);line-height:var(--lh-prose);margin:0 0 .7rem;max-width:60ch}

.syn-cry-now{display:grid;gap:.6rem;margin:0 0 2.2rem}
@media (min-width:720px){.syn-cry-now{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}
.syn-cry-card{display:flex;flex-direction:column;gap:.2rem;padding:.85rem 1rem;border-radius:10px;
  border:1px solid var(--syn-border);color:var(--syn-text);text-decoration:none;background:var(--syn-surface)}
.syn-cry-card:hover{border-color:var(--syn-border-hi)}
.syn-cry-card--lead{border-color:rgba(var(--syn-gold-rgb), .5)}
.syn-cry-card small{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}
.syn-cry-card b{color:var(--syn-gold-hi);font-family:var(--syn-serif);font-size:var(--t-md);font-weight:normal}
.syn-cry-card span{font-size:var(--t-sm);line-height:var(--lh-dense);color:var(--syn-ink-dim)}

.syn-cry-axis{margin:0 0 2rem}
.syn-cry-axis h2{font-family:var(--syn-serif);font-size:var(--t-md);color:var(--syn-gold-hi);
  font-weight:normal;margin:0 0 .2rem}
.syn-cry-chips{display:flex;flex-wrap:wrap;gap:.4rem .5rem;list-style:none;margin:0;padding:0}
.syn-cry-chips a{display:inline-block;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--syn-border);
  color:var(--syn-text);text-decoration:none;font-size:var(--t-sm)}
.syn-cry-chips a:hover{border-color:var(--syn-gold-hi);color:var(--syn-gold-hi)}
.syn-cry-chips a.is-mine{border-color:var(--syn-gold-hi);color:var(--syn-gold-hi)}
.syn-cry-chips em{color:var(--syn-text-dim);font-size:var(--t-xs);font-style:normal}

.syn-cry-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.syn-cry-list a{display:grid;gap:.22rem;padding:.9rem 1rem;border-radius:10px;border:1px solid var(--syn-border);
  text-decoration:none;background:var(--syn-surface)}
.syn-cry-list a:hover{border-color:var(--syn-border-hi)}
.syn-cry-list b{color:var(--syn-gold-hi);font-family:var(--syn-serif);font-size:var(--t-md);font-weight:normal}
.syn-cry-colour{color:var(--syn-text-dim);font-size:var(--t-sm)}
.syn-cry-eso{color:var(--syn-ink-dim);font-size:var(--t-sm);line-height:var(--lh-prose)}
.syn-cry-rite{color:var(--syn-text);font-size:var(--t-sm);line-height:var(--lh-prose);border-left:2px solid var(--syn-border-hi);padding-left:.7rem;margin-top:.2rem}

.syn-cry-one .syn-cry-block{margin:0 0 2rem;padding-top:1.2rem;border-top:1px solid var(--syn-border)}
.syn-cry-block h2{font-family:var(--syn-serif);font-size:var(--t-md);color:var(--syn-gold-hi);
  font-weight:normal;margin:0 0 .5rem}
.syn-cry-block h3{font-family:var(--syn-sans);font-feature-settings:"lnum","tnum";font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--syn-text-dim);margin:0 0 .3rem}
.syn-cry-block p{color:var(--syn-text);font-size:var(--t-md);line-height:var(--lh-prose);margin:0 0 .7rem;max-width:64ch}
.syn-cry-facts{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0 0 1rem;
  font-size:var(--t-sm);align-items:baseline}
.syn-cry-facts dt{font-family:var(--syn-sans);font-feature-settings:"lnum","tnum";color:var(--syn-text-dim);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.syn-cry-facts dd{margin:0;color:var(--syn-text)}
.syn-cry-facts a{color:var(--syn-gold-hi);text-decoration:none}
.syn-cry-facts em{color:var(--syn-text-dim);font-style:italic;font-size:var(--t-sm)}
.syn-cry-care{color:var(--syn-warn)}
.syn-cry-source{color:var(--syn-text-dim);font-size:var(--t-sm);font-style:italic;margin:0}
.syn-cry-rite-box{padding:.8rem 1rem;border-radius:10px;background:var(--syn-surface);
  border-left:3px solid rgba(var(--syn-gold-rgb), .5);margin:0 0 1rem}
.syn-cry-rite-box p{margin:0;color:var(--syn-paper)}
.syn-cry-ritual{padding-left:.9rem;border-left:2px solid var(--syn-border-hi)}
.syn-cry-ritual p{margin:0}
@media print{.syn-cry-back,.syn-cry-chips{display:none}}

/* The day's stone, on the 23 panel. */
.syn-23-stone-pick{margin:.5rem 0 0;font-size:var(--t-sm);line-height:var(--lh-prose);color:var(--syn-ink-dim)}
.syn-23-stone-pick a{color:var(--syn-gold-hi);text-decoration:none;font-weight:600}
.syn-23-stone-pick span{display:block;color:var(--syn-text);margin-top:.15rem}
.syn-23-stone-pick em{display:inline-block;margin-top:.2rem;color:var(--syn-warn);font-style:normal;
  font-size:var(--t-xs);letter-spacing:.04em}

/* EVERY STONE
   The Mineral Kingdom listed seven ways in and never the stones themselves,
   so the one reader who wanted her own birth stone could not find it and
   asked the oracle instead. A column count that follows the width keeps
   sixty-four names readable on a phone and compact on a desk. */
.syn-cry-all { margin-block: var(--space-6, 2rem); }
.syn-cry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--space-5, 1.5rem);
}
@media (min-width: 40rem)  { .syn-cry-list { columns: 3; } }
@media (min-width: 60rem)  { .syn-cry-list { columns: 4; } }
.syn-cry-list li {
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: .4em;
  padding-block: .22em;
  line-height: 1.35;
}
.syn-cry-list a { text-decoration: none; }
.syn-cry-list a:hover, .syn-cry-list a:focus-visible { text-decoration: underline; }
.syn-cry-ruler {
  font-size: var(--t-xs, .78rem);
  color: var(--syn-text-mute);
  margin-inline-start: auto;
}
.syn-cry-wet { font-size: var(--t-2xs, .7rem); opacity: .75; }