/* The magazine (magazine.php) and the parts the article page shares with it. A newspaper's manners: a nameplate, hairlines
   instead of boxes, one big story and the rest around it. Green and grey, corners of at most 10px, no zoom on pictures. */
.tmm { --tmm-ink: #1f2421; --tmm-soft: #5d6661; --tmm-mute: #7b847f; --tmm-line: #e3e7e4; --tmm-deep: #0d3a26; --tmm-glow: radial-gradient(55% 130% at 8% 0%, rgba(126,208,165,.26) 0, rgba(126,208,165,0) 62%); --tmm-green: linear-gradient(115deg, #135b3a 0%, #0f472e 48%, #0a3020 100%); --tmm-rings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 320' fill='none' stroke='%23fff' stroke-opacity='.11' stroke-width='1.1'%3E%3Ccircle cx='160' cy='160' r='150'/%3E%3Ccircle cx='300' cy='160' r='150'/%3E%3Ccircle cx='440' cy='160' r='150'/%3E%3C/svg%3E"); padding-bottom: 64px; color: var(--tmm-ink); }
.tmm a { text-decoration: none; }
.tmm img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tmm-pic { display: block; overflow: hidden; border-radius: 10px; background: #f1f3f2; }

.tmm-crumbs { color: var(--tmm-mute); font-size: 12.5px; line-height: 1.8; }
.tmm-crumbs p { margin: 0; }
.tmm-crumbs a { color: inherit; }
.tmm-crumbs a:hover { color: var(--ps-primary); }

/* the top of the page: deep green, a glow and three fine linked rings; the title, the search, the subjects, and the front
   page rising over its lower edge */
.tmm-mast { padding: 16px 0 30px; background: var(--tmm-rings) no-repeat left -70px top -60px / 660px auto, var(--tmm-glow), var(--tmm-green); color: #fff; }
.tmm-mast--lead { padding-bottom: 134px; }
.tmm-mast .tmm-crumbs :is(p, span, a) { color: rgba(255,255,255,.72); }
.tmm-mast .tmm-crumbs a:hover { color: #fff; }
.tmm-mast__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 26px; }
.tmm-mast__text { min-width: 0; }
.tmm-mast__name { margin: 0; color: #fff; font-size: clamp(36px, 4.8vw, 62px); font-weight: 700; line-height: 1.35; }
.tmm-mast__note { max-width: 58ch; margin: 8px 0 0; color: rgba(255,255,255,.84); font-size: 15.5px; line-height: 2; }
.tmm-search { position: relative; flex: 0 0 340px; margin-bottom: 8px; }
.tmm-search input[type="search"] { display: block; width: 100%; height: 48px; margin: 0; padding-block: 0; padding-inline: 16px 48px; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; background: rgba(255,255,255,.1); box-shadow: none; color: #fff; font: inherit; font-size: 14px; transition: background-color .2s ease, border-color .2s ease; -webkit-appearance: none; appearance: none; }
.tmm-search input[type="search"]::placeholder { color: rgba(255,255,255,.76); opacity: 1; }
.tmm-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.tmm-search input[type="search"]:focus { border-color: #fff; background: rgba(255,255,255,.16); outline: 0; }
.tmm-search button { position: absolute; inset-block: 0; inset-inline-end: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.tmm-nav { display: flex; gap: 8px; margin-top: 24px; overflow-x: auto; scrollbar-width: none; }
.tmm-nav::-webkit-scrollbar { display: none; }
.tmm-nav a { flex: none; padding: 7px 18px; border: 1px solid rgba(255,255,255,.24); border-radius: 10px; color: rgba(255,255,255,.9); font-size: 14px; font-weight: 500; line-height: 1.7; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.tmm-nav a:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.1); color: #fff; }
.tmm-nav a.is-on { border-color: #fff; background: #fff; color: var(--tmm-deep); font-weight: 700; }

.tmm-kicker { display: block; margin: 0 0 8px; color: var(--ps-primary); font-size: 13px; font-weight: 700; line-height: 1.7; }
.tmm-meta { display: flex; align-items: center; gap: 6px; color: var(--tmm-mute); font-size: 12.5px; line-height: 1.6; }
.tmm-meta .ps-icon { flex: none; }
.tmm :is(.tmm-title, .tmm-lead__title, .tmm-band__title) { margin: 0; font-weight: 700; }
.tmm :is(.tmm-title, .tmm-lead__title) a { color: var(--tmm-ink); transition: color .2s ease; }
.tmm :is(.tmm-title, .tmm-lead__title) a:hover { color: var(--ps-primary); }
.tmm-head { display: flex; align-items: center; gap: 18px; margin: 0 0 24px; color: var(--tmm-ink); font-size: 22px; font-weight: 700; line-height: 1.6; }
.tmm-head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--tmm-line); }

/* the front page: the lead and, beside it, the latest */
.tmm-front { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 36px; margin-top: -100px; padding-bottom: 48px; }
.tmm-lead .tmm-pic { aspect-ratio: 16 / 10; }
.tmm-lead__text { padding-top: 20px; }
.tmm-lead__title { font-size: clamp(23px, 2.5vw, 34px); line-height: 1.65; }
.tmm-lead__note { margin: 12px 0 14px; color: var(--tmm-soft); font-size: 15.5px; line-height: 2.05; }
.tmm-side { padding: 22px 26px 24px; border: 1px solid var(--tmm-line); border-radius: 10px; background: #fff; }
.tmm-side__head { margin: 0 0 6px; color: var(--tmm-ink); font-size: 18px; font-weight: 700; line-height: 1.7; }
.tmm-side__list { margin: 0; padding: 0; list-style: none; counter-reset: tmm; }
.tmm-mini { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--tmm-line); counter-increment: tmm; }
.tmm-mini:last-child { border-bottom: 0; padding-bottom: 0; }
.tmm-mini__text { position: relative; flex: 1 1 auto; min-width: 0; padding-inline-start: 42px; }
.tmm-mini__text::before { content: counter(tmm, persian); position: absolute; top: -4px; inset-inline-start: 0; color: #c5cdc8; font-size: 34px; font-weight: 700; line-height: 1.3; }
.tmm-mini .tmm-title { margin-bottom: 8px; font-size: 16px; line-height: 1.85; }
.tmm-mini .tmm-pic { flex: none; width: 104px; height: 104px; }

/* one story on a dark band across the page */
.tmm-band { background: var(--tmm-deep); color: #fff; }
.tmm-band__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: clamp(32px, 6vw, 96px); padding-top: 44px; padding-bottom: 44px; }
.tmm-band .tmm-pic { order: 2; aspect-ratio: 4 / 3; background: rgba(255,255,255,.08); }
.tmm-band__text { order: 1; }
.tmm-band .tmm-kicker { color: #9fd1b7; }
.tmm-band__title { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.7; }
.tmm .tmm-band__title a { color: #fff !important; transition: color .2s ease; }
.tmm .tmm-band__title a:hover { color: #bfe3d0 !important; }
.tmm-band__note { margin: 12px 0 18px; color: rgba(255,255,255,.8); font-size: 15px; line-height: 2.05; }
.tmm-band__more { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; font-weight: 700; transition: gap .2s ease; }
.tmm-band__more:hover { gap: 12px; color: #fff; }

/* the river */
.tmm-river { padding-top: 48px; }
.tmm-river__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
.tmm-card .tmm-pic { aspect-ratio: 3 / 2; }
.tmm-card__text { padding-top: 14px; }
.tmm-card .tmm-title { font-size: 18px; line-height: 1.85; }
.tmm-excerpt { margin: 8px 0 10px; color: var(--tmm-soft); font-size: 14px; line-height: 2; }
.tmm-empty { padding: 32px 0; color: var(--tmm-soft); text-align: center; }
.tmm .ps-pagination { margin-top: 36px; }

/* from the magazine to the showcase */
.tmm-shop { padding-top: 48px; }
.tmm-shop__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tmm-shop__list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; padding: 0 18px; border: 1px solid var(--tmm-line); border-radius: 10px; background: #fff; color: var(--tmm-ink); font-size: 15px; font-weight: 700; line-height: 1.6; transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.tmm-shop__list a:hover { border-color: var(--ps-primary); background: #f4f8f6; color: var(--ps-primary); }
.tmm-shop__list .ps-icon { flex: none; color: var(--ps-primary); }

@media (max-width: 1024px) {
	.tmm-front { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 36px; }
	.tmm-river__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tmm-shop__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.tmm { padding-bottom: 40px; }
	.tmm-mast { padding-top: 12px; background-position: left -130px top -30px, 0 0, 0 0; background-size: 460px auto, auto, auto; }
	.tmm-mast--lead { padding-bottom: 88px; }
	.tmm-mast__row { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 14px; }
	.tmm-mast__note { font-size: 14px; }
	.tmm-search { flex: none; margin-bottom: 0; }
	.tmm-search input[type="search"] { font-size: 16px; }
	.tmm-nav { margin-top: 16px; margin-inline: -15px; padding-inline: 15px; }
	.tmm-nav a { padding: 6px 14px; font-size: 13.5px; }
	.tmm-front { margin-top: -66px; }
	.tmm-side { padding: 16px 16px 8px; }
	.tmm-lead__text { padding-top: 14px; }
	.tmm-lead__note { font-size: 14.5px; }
	.tmm-mini { padding: 16px 0; gap: 12px; }
	.tmm-mini__text { padding-inline-start: 34px; }
	.tmm-mini__text::before { font-size: 28px; }
	.tmm-mini .tmm-title { font-size: 14.5px; }
	.tmm-mini .tmm-pic { width: 76px; height: 76px; }
	.tmm-band__in { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 24px; padding-bottom: 28px; }
	.tmm-band .tmm-pic { order: 0; }
	.tmm-river { padding-top: 32px; }
	.tmm-head { margin-bottom: 14px; font-size: 19px; }
	.tmm-river__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.tmm-card { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--tmm-line); }
	.tmm-card:last-child { border-bottom: 0; }
	.tmm-card .tmm-pic { flex: none; width: 104px; height: 104px; aspect-ratio: auto; }
	.tmm-card__text { flex: 1 1 auto; min-width: 0; padding-top: 0; }
	.tmm-card .tmm-title { font-size: 15px; }
	.tmm-card .tmm-excerpt { display: none; }
	.tmm-card .tmm-meta { margin-top: 8px; }
	.tmm-shop { padding-top: 32px; }
	.tmm-shop__list { gap: 8px; }
	.tmm-shop__list a { min-height: 54px; padding: 0 12px; font-size: 13.5px; }
}