/* ==========================================================================
   Moshe Tarot – horoscope pages. All rules scoped under .msh.
   Same palette and details as the tarot tools (sos.css): ink, gold hairlines,
   cream panels with a double gold frame, square corners, Heebo.
   Responsive by the block's own width (container queries).
   ========================================================================== */
.msh {
	--msh-ink: #261E1E;
	--msh-text: #4F4747;        /* body – 8.9:1 on white */
	--msh-muted: #6F665E;       /* small text – 5.6:1 on white */
	--msh-gold: #C0AC93;        /* lines and ornament only */
	--msh-gold-text: #7A6247;   /* gold-toned text – 5.9:1 on white */
	--msh-line: #E4DACC;        /* grid hairlines */
	--msh-beige: #EDE9E2;
	--msh-cream: #FAF8F5;
	--msh-white: #FFFFFF;
	--msh-ease: cubic-bezier(.22, .8, .24, 1);

	container: msh / inline-size;
	direction: rtl;
	text-align: right;
	max-width: 1080px;
	margin: 0 auto;
	padding: 40px 20px 56px;
	box-sizing: border-box;
	background: var(--msh-white);
	color: var(--msh-text);
	font-family: "Heebo", "Assistant", "Arial Hebrew", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}
.msh *, .msh *::before, .msh *::after { box-sizing: border-box; }
.msh ::selection { background: #E9DDCB; color: var(--msh-ink); }
.msh a { color: inherit; text-decoration: none; }
.msh a:focus-visible,
.msh summary:focus-visible { outline: 2px solid var(--msh-gold-text); outline-offset: 3px; }
.msh ul, .msh ol { list-style: none; margin: 0; padding: 0; }
.msh p { margin: 0; }
.msh svg { display: block; }

/* ---------- headings ---------- */
.msh .msh-h1,
.msh .msh-h2,
.msh .msh-h3 {
	font-family: inherit;
	color: var(--msh-ink);
	letter-spacing: 0;
	text-wrap: balance;
	margin: 0;
}
.msh .msh-h1 {
	font-size: clamp(34px, 7cqi, 56px);
	font-weight: 700;
	line-height: 1.12;
}
.msh .msh-h2 {
	font-size: clamp(23px, 3.6cqi, 30px);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	margin-bottom: 8px;
}
.msh .msh-h3 {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 10px;
}

/* ---------- breadcrumbs ---------- */
.msh .msh-crumbs { margin: 0 0 28px; font-size: 14px; color: var(--msh-muted); }
.msh .msh-crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
.msh .msh-crumbs li { display: flex; align-items: center; }
.msh .msh-crumbs li + li::before { content: "‹"; color: var(--msh-gold); margin: 0 10px; font-size: 16px; line-height: 1; }
.msh .msh-crumbs a { text-decoration: underline; text-decoration-color: var(--msh-gold); text-underline-offset: 4px; }
.msh .msh-crumbs a:hover { color: var(--msh-ink); text-decoration-color: currentColor; }
.msh .msh-crumbs [aria-current] { color: var(--msh-ink); }

/* ---------- page head ---------- */
.msh .msh-head { text-align: center; margin: 0 auto 32px; max-width: 820px; }
.msh .msh-lead { margin: 18px auto 0; max-width: 58ch; font-size: 19px; line-height: 1.75; color: var(--msh-text); }
.msh .msh-date { margin-top: 14px; font-size: 16px; color: var(--msh-muted); }
.msh .msh-dot { display: inline-block; width: 4px; height: 4px; margin: 0 8px; vertical-align: middle; background: var(--msh-gold); transform: rotate(45deg); }

.msh .msh-medal {
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	margin: 0 auto 22px;
	border-radius: 50%;
	color: var(--msh-gold-text);
	background: var(--msh-cream);
	box-shadow: 0 0 0 1px var(--msh-gold), 0 0 0 6px var(--msh-white), 0 0 0 7px var(--msh-beige);
}
.msh .msh-medal svg { width: 42px; height: 42px; stroke-width: 1.25; }

/* ---------- period tabs ---------- */
.msh .msh-tabs {
	display: flex;
	justify-content: center;
	gap: 0 8px;
	margin: 0 auto 8px;
	border-bottom: 1px solid var(--msh-beige);
	overflow-x: auto;
	scrollbar-width: none;
}
.msh .msh-tabs::-webkit-scrollbar { display: none; }
.msh .msh-tab {
	position: relative;
	flex: 0 0 auto;
	padding: 12px 18px 14px;
	font-size: 17px;
	font-weight: 500;
	color: var(--msh-muted);
	white-space: nowrap;
	transition: color .2s;
}
.msh .msh-tab::after {
	content: "";
	position: absolute;
	inset: auto 18px -1px;
	height: 2px;
	background: var(--msh-ink);
	transform: scaleX(0);
	transition: transform .35s var(--msh-ease);
}
.msh .msh-tab:hover { color: var(--msh-ink); }
.msh .msh-tab.is-active { color: var(--msh-ink); font-weight: 700; }
.msh .msh-tab.is-active::after { transform: scaleX(1); }
.msh .msh-tab:focus-visible { outline-offset: -3px; }

/* ---------- sections ---------- */
.msh .msh-block { margin-top: 56px; }
.msh .msh-sub { text-align: center; color: var(--msh-muted); font-size: 16px; max-width: 60ch; margin: 0 auto 24px; text-wrap: balance; }
.msh .msh-lead, .msh .msh-date { text-wrap: balance; }

/* ---------- the 12 signs: one hairline table ---------- */
.msh .msh-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin-top: 24px;
	background: var(--msh-line);
	border: 1px solid var(--msh-line);
	outline: 1px solid var(--msh-beige);
	outline-offset: 5px;
}
.msh .msh-grid > li { display: flex; background: var(--msh-white); }
.msh .msh-tile {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2px;
	padding: 24px 12px 22px;
	transition: background-color .25s;
}
.msh .msh-tile-icon {
	width: 36px;
	height: 36px;
	margin-bottom: 10px;
	color: var(--msh-gold-text);
	stroke-width: 1.35;
	transition: transform .45s var(--msh-ease);
}
.msh .msh-tile-name { font-size: 20px; font-weight: 700; color: var(--msh-ink); line-height: 1.3; }
.msh .msh-tile-dates { font-size: 14px; color: var(--msh-muted); font-variant-numeric: tabular-nums; }
.msh .msh-tile-focus {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--msh-beige);
	width: min(100%, 180px);
	font-size: 15px;
	line-height: 1.5;
	color: var(--msh-gold-text);
	text-wrap: balance;
}
@media (hover: hover) {
	.msh .msh-tile:hover { background: var(--msh-cream); }
	.msh .msh-tile:hover .msh-tile-icon { transform: translateY(-3px); }
}
.msh .msh-tile:focus-visible { outline-offset: -4px; background: var(--msh-cream); }

/* ---------- daily / weekly / monthly ---------- */
.msh .msh-kinds { display: grid; grid-template-columns: 1fr; margin-top: 20px; border-top: 1px solid var(--msh-beige); }
.msh .msh-kinds li { border-bottom: 1px solid var(--msh-beige); }
.msh .msh-kinds a { display: block; padding: 20px 4px; text-align: center; }
.msh .msh-kinds-title { display: block; font-size: 21px; font-weight: 700; color: var(--msh-ink); }
.msh .msh-kinds-title::after { content: " ‹"; color: var(--msh-gold-text); transition: margin .3s var(--msh-ease); }
.msh .msh-kinds-desc { display: block; margin-top: 2px; font-size: 16px; color: var(--msh-muted); text-wrap: balance; }
@media (hover: hover) {
	.msh .msh-kinds a:hover .msh-kinds-title { text-decoration: underline; text-decoration-color: var(--msh-gold); text-underline-offset: 6px; }
}

/* ---------- one sign ---------- */
.msh .msh-reading { max-width: 780px; margin: 40px auto 0; }
.msh .msh-focus { text-align: center; margin: 0 auto 44px; }
.msh .msh-focus-label { display: block; font-size: 15px; color: var(--msh-gold-text); margin-bottom: 4px; }
.msh .msh-focus-text {
	display: inline-block;
	font-size: clamp(26px, 4.6cqi, 36px);
	font-weight: 500;
	line-height: 1.3;
	color: var(--msh-ink);
	text-wrap: balance;
}
.msh .msh-focus-text::before,
.msh .msh-focus-text::after { content: "\""; color: var(--msh-gold); padding: 0 3px; }

.msh .msh-sec p { color: var(--msh-text); }
.msh .msh-sec--general { padding-bottom: 36px; }
.msh .msh-sec--general p { font-size: 19px; line-height: 1.85; }
.msh .msh-secs { display: grid; grid-template-columns: 1fr; gap: 0; }
.msh .msh-secs .msh-sec { padding: 28px 0; border-top: 1px solid var(--msh-beige); }
.msh .msh-sec .msh-h3::after {
	content: "";
	display: block;
	width: 28px;
	height: 1px;
	margin-top: 10px;
	background: var(--msh-gold);
}

.msh .msh-tip,
.msh .msh-cta {
	position: relative;
	text-align: center;
	background: var(--msh-cream);
	border: 1px solid var(--msh-beige);
	padding: 32px 28px;
}
.msh .msh-tip::before,
.msh .msh-cta::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid var(--msh-gold);
	pointer-events: none;
}
.msh .msh-tip { margin-top: 28px; }
.msh .msh-tip p { position: relative; font-size: 19px; color: var(--msh-ink); max-width: 52ch; margin: 0 auto; }
.msh .msh-tip .msh-h3 { position: relative; font-size: 17px; font-weight: 500; color: var(--msh-gold-text); }

.msh .msh-empty {
	max-width: 560px;
	margin: 40px auto 0;
	padding: 28px;
	text-align: center;
	background: var(--msh-cream);
	border: 1px dashed var(--msh-gold);
	color: var(--msh-ink);
}

/* ---------- the sky ---------- */
.msh .msh-sky {
	max-width: 780px;
	margin: 64px auto 0;
	padding: 36px 0 32px;
	border-top: 1px solid var(--msh-gold);
	border-bottom: 1px solid var(--msh-gold);
	text-align: center;
}
.msh .msh-sky-icon { width: 30px; height: 30px; margin: 0 auto 12px; color: var(--msh-gold-text); stroke-width: 1.3; }
.msh .msh-sky ul { width: fit-content; max-width: 100%; margin: 16px auto 0; display: grid; gap: 10px; text-align: right; }
.msh .msh-sky li { display: flex; align-items: baseline; gap: 12px; font-size: 17px; line-height: 1.6; color: var(--msh-text); }
.msh .msh-sky time {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 500;
	color: var(--msh-gold-text);
	font-variant-numeric: tabular-nums;
	min-width: 3.4em;
	text-align: center;
	border: 1px solid var(--msh-beige);
	padding: 0 6px;
	line-height: 1.7;
}

/* ---------- other signs ---------- */
.msh .msh-others { margin-top: 64px; }
.msh .msh-others ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.msh .msh-others a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 16px;
	border: 1px solid var(--msh-beige);
	font-size: 16px;
	color: var(--msh-ink);
	transition: border-color .2s, background-color .2s;
}
.msh .msh-others svg { width: 20px; height: 20px; color: var(--msh-gold-text); }
@media (hover: hover) {
	.msh .msh-others a:hover { border-color: var(--msh-gold); background: var(--msh-cream); }
}

/* ---------- call to action ---------- */
.msh .msh-cta { margin: 64px auto 0; max-width: 780px; padding: 40px 28px; }
.msh .msh-cta-text { position: relative; font-size: clamp(20px, 3.4cqi, 24px); font-weight: 500; color: var(--msh-ink); line-height: 1.45; text-wrap: balance; }
.msh .msh-btn {
	position: relative;
	display: inline-block;
	margin-top: 20px;
	padding: 14px 34px;
	background: var(--msh-ink);
	color: var(--msh-white);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	border: 1px solid var(--msh-ink);
	transition: background-color .2s, color .2s;
}
.msh .msh-btn:hover { background: var(--msh-white); color: var(--msh-ink); }
.msh .msh-btn:active { transform: translateY(1px); }

/* ---------- FAQ ---------- */
.msh .msh-faq { max-width: 820px; margin: 72px auto 0; }
.msh .msh-faq .msh-h2 { margin-bottom: 24px; }
.msh .msh-qa { border-bottom: 1px solid var(--msh-beige); }
.msh .msh-qa:first-of-type { border-top: 1px solid var(--msh-beige); }
.msh .msh-qa summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 18px 2px;
	cursor: pointer;
	list-style: none;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--msh-ink);
}
.msh .msh-qa summary::-webkit-details-marker { display: none; }
.msh .msh-qa summary::after {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	background:
		linear-gradient(var(--msh-gold-text), var(--msh-gold-text)) center / 12px 1.5px no-repeat,
		linear-gradient(var(--msh-gold-text), var(--msh-gold-text)) center / 1.5px 12px no-repeat;
	transition: transform .3s var(--msh-ease);
}
.msh .msh-qa[open] summary::after { transform: rotate(45deg); }
.msh .msh-qa p { padding: 0 2px 20px; max-width: 70ch; color: var(--msh-text); }

.msh .msh-note { margin-top: 40px; text-align: center; font-size: 14px; color: var(--msh-muted); }

/* ---------- wider ---------- */
@container msh (min-width: 600px) {
	.msh .msh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.msh .msh-kinds { grid-template-columns: repeat(2, 1fr); }
	.msh .msh-kinds li:nth-child(2n) { border-right: 1px solid var(--msh-beige); }
	.msh .msh-kinds a { padding: 26px 18px; }
}
@container msh (min-width: 860px) {
	.msh .msh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.msh .msh-grid:not(.has-focus) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.msh .msh-secs { grid-template-columns: 1fr 1fr; column-gap: 48px; }
	.msh .msh-secs .msh-sec { padding: 32px 0; }
	/* one row, as many columns as there are kinds */
	.msh .msh-kinds { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-bottom: 1px solid var(--msh-beige); }
	.msh .msh-kinds li { border-bottom: 0; }
	.msh .msh-kinds li:nth-child(n+2) { border-right: 1px solid var(--msh-beige); }
}
@container msh (max-width: 520px) {
	.msh .msh-tab-pre { display: none; }
	.msh .msh-tab { padding-inline: 22px; }
	.msh .msh-tab::after { inset: auto 22px -1px; }
}
@container msh (max-width: 420px) {
	.msh .msh-tile { padding: 20px 8px 18px; }
	.msh .msh-tile-name { font-size: 18px; }
	.msh .msh-tab { padding: 12px 12px 14px; font-size: 16px; }
	.msh .msh-tab::after { inset: auto 12px -1px; }
	.msh .msh-tip, .msh .msh-cta { padding: 28px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.msh *, .msh *::before, .msh *::after { transition: none !important; }
}