/* Per-Rashi pages — /rashifal/mesh/ … /rashifal/meen/.
   Only what the twelve-sign page does not already provide; the reading card
   itself comes from rashifal.css so both pages stay identical. */

/* hero */
.sg-head{display:flex;gap:18px;align-items:flex-start;max-width:820px}
.sg-glyph{font-size:56px;line-height:1;color:var(--saffron);flex-shrink:0;margin-top:6px;
  text-shadow:0 4px 14px rgba(200,134,44,.28)}
.sg-head h1{font-family:var(--serif);font-size:clamp(29px,4.2vw,46px);font-weight:700;line-height:1.06;color:var(--ink)}
.sg-lead{font-size:17px;color:var(--ink-2);line-height:1.7;margin-top:12px}

/* facts grid */
.sg-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sg-f{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  border-left:3px solid var(--saffron);min-width:0}
.sg-f dt{font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute)}
.sg-f dd{font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.45;margin-top:4px;overflow-wrap:anywhere}
.sg-note{margin-top:14px;background:linear-gradient(150deg,rgba(200,134,44,.10),var(--card));
  border:1px solid var(--line);border-left:4px solid var(--glow);border-radius:12px;
  padding:15px 18px;font-size:16.5px;color:var(--ink-2);line-height:1.65}
.sg-note strong{color:var(--crimson)}

/* character */
.sg-traits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.sg-t{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  border-top:3px solid var(--saffron);min-width:0}
.sg-t.good{border-top-color:var(--dharma)}
.sg-t.warn{border-top-color:var(--crimson)}
.sg-t h3{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink)}
.sg-t p{font-size:16px;color:var(--ink-3);line-height:1.68;margin-top:7px}
.sg-compat{margin-top:14px;font-size:16.5px;color:var(--ink-2);line-height:1.65}
.sg-compat strong{color:var(--ink)}
.sg-disc{font-size:14.5px;color:var(--ink-mute);line-height:1.62;margin-top:12px;font-style:italic}

/* the other eleven */
.sg-all{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.sg-all a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:13px 6px;
  border-radius:12px;background:var(--card);border:1px solid var(--line);min-width:0;
  transition:transform .16s,border-color .16s}
.sg-all a:hover{transform:translateY(-3px);border-color:var(--saffron)}
.sg-all a.on{background:linear-gradient(160deg,rgba(200,134,44,.16),var(--card));border-color:var(--saffron)}
.sg-all .g{font-size:24px;line-height:1;color:var(--saffron)}
.sg-all strong{font-family:var(--serif);font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.1;
  max-width:100%;overflow-wrap:anywhere}
.sg-all .ksub{font-size:12.5px;font-weight:600;color:var(--ink-mute)}

/* the CTA band, borrowed from the answer pages so the sign pages match them */
.qa-band{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--ink);color:var(--paper);border-radius:14px;padding:20px 24px}
.qa-band b{font-family:var(--serif);font-size:19px;color:var(--glow);display:block}
.qa-band span{font-size:15px;color:var(--paper-3)}
.qa-band a{flex-shrink:0;padding:12px 22px;border-radius:9px;background:var(--glow);color:var(--ink);
  font-weight:700;font-size:16px}

@media(max-width:900px){
  .sg-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-traits{grid-template-columns:1fr}
  .sg-all{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:560px){
  .sg-head{gap:13px}
  .sg-glyph{font-size:40px;margin-top:2px}
  .sg-all{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sg-all a{padding:12px 4px}
}
@media(max-width:400px){.sg-facts{grid-template-columns:1fr}}

/* Breadcrumb + the "how / more" blocks. These live inline on the older answer
   pages; the generated pages get them from a stylesheet instead so twelve or
   four pages cannot drift apart. Deliberately NOT added to dense.css — the
   answer pages already carry their own copies and two definitions of the same
   class in the cascade is worse than one duplicated block here. */
.crumb{font-size:14px;color:var(--ink-mute);margin-bottom:12px}
.crumb a{color:var(--ink-3);font-weight:600}
.crumb a:hover{color:var(--crimson)}
.crumb span{margin:0 5px;color:var(--line)}
.crumb span:last-child{margin:0;color:var(--ink-mute)}