/* ---------------------------------------------------------------------------------------------
   Shared public rules. Other templates still draw these — `.public-section` (auth, the course
   archive), `.public-article__*` (booking policy, test detail), `.public-lead` (the homepage),
   `.public-text-link` (the assessments catalogue), `.public-eyebrow` (booking policy) — so they
   stay exactly as they were. The pages this sheet owns outright (services, articles, contact and
   the documents) have their own blocks further down.
   --------------------------------------------------------------------------------------------- */
.public-wrap { width: var(--chrome-width); margin: 0 auto; }
.public-eyebrow { margin: 0 0 var(--space-1); color: var(--color-text-accent); font: var(--text-eyebrow); }
.public-section h2 { margin: 0; color: var(--color-heading); font: var(--text-h2); }
.public-lead { max-width: 36ch; margin: var(--space-head) 0 0; color: var(--color-text); font: var(--text-subtitle); }
.public-section { padding: var(--space-band) 0; }
.public-text-link { display: inline-flex; align-items: center; gap: var(--space-0); border-radius: 4px; color: var(--primary-700); font: var(--text-button-s); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .public-text-link:hover { text-decoration: underline; text-underline-offset: 4px; } }
.public-text-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
.public-article__hero { padding: var(--space-7) 0; background: var(--surface-blue); }
.public-article__hero .public-text-link { margin-bottom: var(--space-4); }
.public-article__hero h1 { max-width: 24ch; margin: var(--space-1) 0 var(--space-2); color: var(--color-heading); font: var(--text-h1); }
.public-article__hero p:last-child { margin: 0; color: var(--color-text); font: var(--text-body-s); }
.public-article__body { width: min(760px, calc(100% - 64px)); padding: var(--space-section) 0 var(--space-band); }
.public-article__content { color: var(--color-heading); font: var(--text-body); }
.public-article__content h2 { font: var(--text-h3); margin: 2em 0 .5em; }
.public-article__content h3 { font: var(--text-h4); margin: 2em 0 .5em; }
.public-article__content a { color: var(--primary-700); }

body.single-courses { --chrome-width: min(1200px, calc(100% - 64px)); }

.price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--gap-title) var(--gap-inline); }.price__now { color: var(--color-heading); font-weight: var(--text-number-weight); font-variant-numeric: tabular-nums; }.price__was { color: var(--color-text); font-size: var(--text-caption-size); font-weight: 500; text-decoration-thickness: 1px; opacity: .75; }.price__off { padding: 2px var(--space-1); border-radius: 99px; background: var(--surface-accent); color: var(--error); font-size: var(--text-micro-size); font-weight: 600; white-space: nowrap; }.price--free .price__now, .price--free { color: var(--secondary-700); font-weight: 700; }.price--sm { font-size: var(--text-number-s-size); }.price--lg { font-size: var(--text-number-l-size); }.price .woocommerce-Price-currencySymbol { font-size: var(--text-caption-size); font-weight: 600; }

@media (max-width: 767px) {
	body.single-courses { --chrome-width: calc(100% - 32px); }
	.public-article__body { width: calc(100% - 32px); padding-top: var(--space-5); }
}

/* ---------------------------------------------------------------------------------------------
   Services — page-services.php (2026-09-26).

   Was five bands: the page head, four cards with the first one tinted green, «کدام مسیر مناسب‌تر
   است؟» on a blue band repeating three of those four paths in other words, three steps in white
   boxes, and a dark teal card for the articles sitting directly on top of the footer's own green
   card — two coloured slabs back to back. Now three: the head, the four paths as one even row
   that each says who it is for (the question is their heading), and the steps on one quiet grey
   band that also carries the link to the articles.
   --------------------------------------------------------------------------------------------- */
.svc-paths { padding-block: var(--space-block) var(--space-section); }
.svc-paths .iz-h2 { margin-bottom: var(--space-head); }
.public-service-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); margin: 0; padding: 0; list-style: none; }
/* The foot is shorter than the other three sides because the link under it is 44px tall around a
   14px label: the label, not the link's box, is what has to sit --pad-card from the edge. */
.public-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--pad-card) var(--pad-card) var(--space-1);
	border: 1px solid var(--iz-line-soft);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	transition: border-color .16s var(--iz-ease), box-shadow .22s var(--iz-ease-out), transform .16s var(--iz-ease-out);
}
/* Owner's review, 2026-09-29: the line over each title («برای یادگیری در زمان خودتان») is gone —
   the paragraph under the title already says who the path is for — so the card reads tile, title,
   sentence, action. */
.public-service-card .iz-tile { margin-bottom: var(--space-head); }
.public-service-card h3 { margin: 0; color: var(--iz-ink); font: var(--text-h4); }
.public-service-card__text { margin: var(--gap-title) 0 0; color: var(--iz-text); font: var(--text-body-s); text-wrap: pretty; }
/* The link is the card's one action and is stretched over the whole card (.iz-stretch), so the
   card is the tap target and the link text is what a screen reader announces. Pinned to the
   bottom so the four actions sit on one line whatever each paragraph's length, and to the
   inline end — the left, in this RTL page — where the arrow points (owner, 2026-09-29). */
.public-service-card__go { display: inline-flex; align-items: center; align-self: flex-end; gap: var(--gap-inline); min-height: 44px; margin-top: auto; padding-top: var(--space-1); color: var(--primary-700); font: var(--text-button); text-decoration: none; }
.public-service-card__go .fa-solid { font-size: var(--text-body-size); transition: transform .2s var(--iz-ease-out); }
.public-service-card > .iz-status { align-self: flex-end; margin-top: auto; margin-bottom: var(--space-2); }
.public-service-card:has(.iz-stretch:focus-visible) { box-shadow: 0 0 0 3px var(--color-focus-ring); }
.public-service-card:has(.iz-stretch:active) { transform: scale(var(--iz-press-lg)); }
@media (hover: hover) and (pointer: fine) {
	.public-service-card:has(.iz-stretch):hover { border-color: var(--primary-200); box-shadow: var(--iz-shadow-lift); }
	.public-service-card:hover .public-service-card__go .fa-solid { transform: translateX(-3px); }
}

/* «نحوه شروع». The nodes are joined the way the homepage's «چطور شروع می‌شود؟» joins its own
   (owner, 2026-09-29; home.css `.home-vine`, `.home-step*`): the same vine drawn behind a row of
   filled nodes on a wide screen, a straight stem from each node down to the next on a narrow one.
   Drawn, not animated — the homepage's draw-in is started by home.js, which this page does not
   load. 44px nodes and a 64px vine are the homepage's own sizes. */
.svc-steps { margin-block-end: var(--space-block); padding-block: var(--space-band); background: var(--iz-sunk); }
.svc-steps .iz-h2 { margin-bottom: var(--space-block); }
.svc-steps__box { position: relative; }
.svc-vine { position: absolute; inset: 0 0 auto 0; width: 100%; height: 64px; color: var(--secondary-400); pointer-events: none; }
.svc-vine path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.public-service-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.public-service-steps li { position: relative; display: grid; justify-items: start; align-content: start; gap: var(--gap-title); padding-top: var(--space-2); }
/* The ring in the band's own grey keeps the vine from touching the node. */
.public-service-steps__n { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-2); border-radius: 50%; background: var(--secondary-700); box-shadow: 0 0 0 6px var(--iz-sunk); color: #fff; font: var(--text-number-s); }
.public-service-steps h3 { margin: 0; color: var(--iz-ink); font: var(--text-h4); }
.public-service-steps p { max-width: 34ch; margin: 0; color: var(--iz-text); font: var(--text-body-s); }
.public-service-steps .iz-link { transition: color .16s var(--iz-ease), transform .16s var(--iz-ease-out); }
.public-service-steps .iz-link:active { transform: scale(var(--iz-press)); }

@media (max-width: 1099px) { .public-service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Three columns need about 900px: at 768 each step had a 169px text column and «شرایط دسترسی را
   بررسی کنید» broke onto two lines. One column is capped so each step reads as one line of text,
   and the band's pattern fills the end it leaves open. The node moves beside its step and the vine
   becomes a stem: from 4px under one node to 4px over the next. */
@media (max-width: 899px) {
	.public-service-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); max-width: 36rem; }
	.svc-vine { display: none; }
	.public-service-steps li { min-height: 44px; padding-top: 0; padding-inline-start: calc(44px + var(--space-3)); }
	.public-service-steps__n { position: absolute; top: 0; inset-inline-start: 0; margin: 0; box-shadow: none; }
	.public-service-steps li:not(:last-child)::before { content: ""; position: absolute; top: calc(44px + var(--space-0)); bottom: calc(var(--space-0) - var(--space-4)); inset-inline-start: 21px; width: 2px; border-radius: 2px; background: var(--secondary-300); }
	.public-service-steps p { max-width: none; }
}
/* One column on a phone, and the tile moves beside the name it labels instead of above it: four
   stacked cards each spent a 62px row on an icon. */
@media (max-width: 599px) {
	.public-service-cards { grid-template-columns: minmax(0, 1fr); }
	.public-service-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-2); align-items: center; }
	.public-service-card .iz-tile { margin: 0; }
	.public-service-card__text, .public-service-card__go, .public-service-card > .iz-status { grid-column: 1 / -1; }
	.public-service-card__text { margin-top: var(--space-stack); }
	.public-service-card__go, .public-service-card > .iz-status { justify-self: end; }
	.public-service-card > .iz-status { margin-top: var(--space-stack); }
}

/* ---------------------------------------------------------------------------------------------
   Articles — page-blog.php, and index.php for the category and tag archives (2026-09-26).

   The filter rail predated the kit: a 250px sticky card holding a search field, a radio per topic
   and a submit button, which took a quarter of the width to offer two topics and squeezed the
   cards into two columns. It is now the catalogue bar the course, workshop and assessment pages
   already draw (kit.css: .learning-catalog__bar, .iz-toolbar, .iz-search), and the cards take the
   full width. The topics were the kit's link tabs until the owner's review of 2026-09-29 ("do not
   use tab for cats"): a tab strip says "views of one thing", and these are filters. They are plain
   chips now — one tap filters, no submit.
   --------------------------------------------------------------------------------------------- */
.blog-catalog { padding-block-end: var(--space-section); }
.blog-catalog .learning-catalog__bar { gap: var(--space-stack); margin: var(--space-block) 0 var(--space-head); }
.blog-catalog .learning-catalog__bar { grid-template-columns: minmax(0, 1fr); }
.blog-toolbar { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
/* Two classes: kit.css loads after this sheet and its `.iz-toolbar` wraps, which dropped the button
   under the field at 390. */
.blog-search.iz-toolbar { flex: 1 1 100%; flex-wrap: nowrap; max-width: none; }
.blog-search .iz-search { min-width: 0; }
.blog-search .iz-btn { flex: none; }
/* A lone count and a link was sitting on the kit's space-between: the link pinned to the far edge,
   a screen away from the number it qualifies. */
.blog-catalog .learning-catalog__head { justify-content: flex-start; gap: var(--space-3); }
.blog-catalog .learning-catalog__head .iz-link { min-height: 44px; font-size: var(--text-caption-size); }
.blog-catalog .iz-empty { margin-top: var(--space-0); }
@media (max-width: 767px) {
	.blog-search.iz-toolbar { flex-basis: 100%; max-width: none; }
}

/* ---------------------------------------------------------------------------------------------
   Archive v4 (2026-09-30, owner: "redesign the articles archive, add a sidebar"). The list and a
   300px sidebar (template-parts/content/blog-side.php). The topics live in the sidebar above
   1024px and in the chip row below it — one or the other, never both. Each page opens with a lead
   card across the column: picture beside text on a wide column, the normal card on a narrow one.
   --------------------------------------------------------------------------------------------- */
/* The sidebar on the inline start — the right (owner, 2026-09-30) — and the search/count bar over the
   list column only, so the sidebar's first box is level with the first card. */
.blog-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: ". bar" "aside main"; column-gap: var(--space-block); align-items: start; }
.blog-bar { grid-area: bar; min-width: 0; }
.blog-main { grid-area: main; min-width: 0; }
.blog-aside { grid-area: aside; }
.blog-main .public-post-grid { --cols: 2; }
.blog-aside { min-width: 0; }

.blog-lead { margin-block-end: var(--gap-grid); }
@media (min-width: 700px) {
	.blog-lead .post-card--featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
	.blog-lead .post-card--featured .post-card__media { aspect-ratio: auto; min-height: 260px; }
	.blog-lead .post-card--featured .post-card__body { justify-content: center; gap: var(--space-2); padding: var(--space-5) var(--pad-card); }
	.blog-lead .post-card--featured .post-card__title { -webkit-line-clamp: 3; }
}

/* The order: two links, a quiet segmented pair at the end of the count line. */
.blog-sort { display: inline-flex; gap: 2px; margin-inline-start: auto; padding: 2px; border-radius: 999px; background: var(--iz-sunk); }
.blog-sort a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); border-radius: 999px; color: var(--iz-ink-soft); font: var(--text-caption); font-weight: 600; text-decoration: none; transition: background-color .16s var(--iz-ease), color .16s var(--iz-ease), transform .16s var(--iz-ease-out); }
.blog-sort a[aria-current] { background: var(--color-surface); color: var(--iz-ink); box-shadow: 0 1px 2px rgb(20 46 55 / .08); }
.blog-sort a:active { transform: scale(var(--iz-press)); }
.blog-sort a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
@media (hover: hover) and (pointer: fine) { .blog-sort a:not([aria-current]):hover { color: var(--iz-ink); } }

@media (max-width: 1024px) {
	.blog-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "main" "aside"; gap: 0; }
	.blog-search.iz-toolbar { flex-basis: 100%; max-width: none; }
	/* The sidebar's topics box stays: between the search and the list, the same section as on desktop
	   (owner, 2026-09-30: no chips). The other boxes follow the list, side by side while there is room. */
	.blog-layout { grid-template-areas: "bar" "topics" "main" "latest" "help"; }
	.blog-layout .blog-aside, .blog-layout .blog-aside .blog-side { display: contents; }
	/* Scoped to the archive's layout: the article page reuses the sidebar outside `.blog-layout`, and
	   these area names there had no grid to land in, so the two boxes overlapped. */
	.blog-layout .blog-side__topics { grid-area: topics; margin-block-end: var(--space-block); }
	.blog-layout .blog-side__latest { grid-area: latest; margin-block-start: var(--space-section); }
	.blog-layout .blog-side__help { grid-area: help; margin-block-start: var(--space-block); }
}

/* ---------------------------------------------------------------------------------------------
   Articles' sidebar — template-parts/content/blog-side.php, on the archive and every article.
   White boxes with a hairline, the same as the article's own contents box; the help box is grey,
   not tinted — colour stays on the full-width bands.
   --------------------------------------------------------------------------------------------- */
.blog-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-block); }
.blog-side__box { min-width: 0; padding: var(--pad-card); border: 1px solid var(--iz-line-soft); border-radius: var(--iz-r); background: var(--color-surface); }
.blog-side__title { display: flex; align-items: center; gap: var(--gap-inline); margin: 0 0 var(--space-2); color: var(--iz-ink); font: var(--text-h4); }
.blog-side__title .fa-solid { color: var(--secondary-600); font-size: var(--text-h4-size); }

.blog-side__terms { display: grid; margin: 0; padding: 0; list-style: none; }
.blog-side__terms a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-2); border-radius: var(--radius-input); color: var(--iz-text); font: var(--text-body-s); text-decoration: none; transition: background-color .16s var(--iz-ease), color .16s var(--iz-ease); }
.blog-side__terms a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blog-side__terms small { flex: none; min-width: 28px; padding: 1px var(--space-1); border-radius: 999px; background: var(--iz-sunk); color: var(--iz-ink-soft); font: var(--text-micro); text-align: center; }
.blog-side__terms a[aria-current] { background: var(--iz-sunk); color: var(--secondary-700); font-weight: 700; }
.blog-side__terms a[aria-current] small { background: var(--secondary-700); color: #fff; }
.blog-side__terms a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
@media (hover: hover) and (pointer: fine) { .blog-side__terms a:not([aria-current]):hover { background: var(--iz-sunk); color: var(--iz-ink); } }

.blog-side__more summary { display: flex; align-items: center; gap: var(--gap-inline); min-height: 44px; padding: 0 var(--space-2); border-radius: var(--radius-input); color: var(--color-link); font: var(--text-button-s); cursor: pointer; list-style: none; }
.blog-side__more summary::-webkit-details-marker { display: none; }
.blog-side__more summary .fa-solid { font-size: var(--text-caption-size); transition: rotate 200ms var(--iz-ease-out); }
.blog-side__more[open] summary .fa-solid { rotate: 180deg; }
.blog-side__more summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
.blog-side__more[open] summary { margin-block-end: var(--space-0); }

.blog-side__list { display: grid; }
.blog-side__list > .post-card--line:first-child { padding-top: 0; }
.blog-side__list > .post-card--line:last-child { padding-bottom: 0; }

.blog-side__help { display: grid; gap: var(--space-2); border-color: transparent; background: var(--iz-sunk); }
.blog-side__help .blog-side__title { margin: 0; }
.blog-side__help p { margin: 0; color: var(--iz-text); font: var(--text-body-s); }
.blog-side__help .iz-btn { justify-self: stretch; margin-block-start: var(--space-1); }
.blog-side__help .iz-link { justify-self: start; min-height: 44px; font-size: var(--text-caption-size); }


/* ---------------------------------------------------------------------------------------------
   Contact — page-contact.php (2026-09-26).

   Was two columns: a green-tinted box of guidance beside the form, the box ending half-way down
   the form and leaving the rest of its column bare. The guidance was two sentences and a link the
   footer card already carries, so it is now a quiet note inside the form, and the form is one
   centred card on a patterned section (kit patterns, recipe 2 with the fade centred on the card).
   Name and contact share a row where there is room for both.
   --------------------------------------------------------------------------------------------- */
.contact-section { padding-block: var(--space-block) var(--space-section); }
.public-contact-form { display: grid; gap: var(--gap-form); width: min(720px, 100%); margin-inline: auto; padding: var(--space-5); border: 1px solid var(--iz-line-soft); border-radius: var(--radius-hero); background: var(--color-surface); box-shadow: var(--iz-shadow-1); }
.public-contact-form .iz-h2 { margin: 0; }
/* The note belongs to the title above it, not to the fields below: it gives back part of the form's
   gap so it sits --space-head under the title. */
.public-contact-form .iz-notice { margin-top: calc(var(--space-head) - var(--gap-form)); }
.public-contact-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-form) var(--space-3); }
/* A column rather than the kit field's grid: the error line under each input is empty until the
   server rejects a value, and an empty grid row still costs its gap — dead space under
   every field. It only takes room when it has something to say. */
/* Two classes because kit.css loads after this sheet and its `.iz-field` is a grid. */
.public-contact-field.iz-field { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.public-contact-field > label { margin-bottom: var(--gap-field); }
.public-contact-field .iz-input, .public-contact-field .iz-textarea { text-align: start; unicode-bidi: plaintext; }
.public-contact-field .iz-field__error:not(:empty) { margin-top: var(--gap-field); }
.public-contact-form__notice { display: none; margin: 0; padding: var(--space-2) var(--space-3); border-radius: 14px; font: var(--text-caption); }
.public-contact-form__notice.is-success, .public-contact-form__notice.is-error { display: block; }
.public-contact-form__notice.is-success { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.public-contact-form__notice.is-error { background: var(--tone-attention-bg); color: var(--tone-attention-fg); }
.public-contact-form > .iz-btn { justify-self: start; min-width: 200px; }
.public-contact-form__fallback { margin: 0; color: var(--iz-ink-soft); font: var(--text-caption); }
.public-contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* The pattern is for the empty width beside the card. Below 1024px the card takes nearly all of it,
   and the sprigs were showing only as clipped crumbs in the 16-32px gutters. */
@media (max-width: 1023px) { .contact-section { --iz-pattern-opacity: 0; } }
@media (max-width: 599px) {
	.public-contact-form { padding: var(--pad-row); border-radius: var(--radius-card); }
	.public-contact-form__row { grid-template-columns: minmax(0, 1fr); }
	.public-contact-form > .iz-btn { justify-self: stretch; }
}

/* ---------------------------------------------------------------------------------------------
   Documents — page.php: the privacy notice, the terms, purchase and payment terms, and About
   (2026-09-26).

   Was a full-width blue band holding the title, then the text in a 760px column at 16px — about a
   hundred Persian characters to the line, twice what a comfortable measure holds — with no way to
   jump to a section of a document that runs to eight. Now the page opens with the crumb trail and
   the kit page head like every other page, the text sits in the white box the article page uses
   at the article's own reading size (15px/2.05), and a document with more than two sections gets
   the article's table of contents: beside the text on a wide screen, folded into one row above it
   on a narrow one. The whole page is a narrower column so the head, the box and the contents
   share their edges instead of the text floating under a head twice its width.
   --------------------------------------------------------------------------------------------- */
.doc-wrap { --doc-w: 860px; width: min(var(--doc-w), calc(100% - 64px)); margin-inline: auto; }
.doc-wrap--solo { --doc-w: 600px; }
/* The crumb-carrying instance of this wrap (the page head) runs the site's one container, same as
   every other page's `.iz-crumbs`; only the reading-column instance (`.doc-layout`, below) keeps
   the narrower measure the document body needs. */
.doc-wrap.iz-pagestack { width: var(--chrome-width); }
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 256px; gap: var(--space-block); align-items: start; padding-block: var(--space-block) var(--space-section); }
.doc-wrap--solo.doc-layout { grid-template-columns: minmax(0, 1fr); }
/* The kit head's soft green glow sits behind its art; a document head has no art, and on its own
   the glow read as a grey smudge in the corner. */
.doc-wrap .iz-pagehead::after { display: none; }
.doc-revised { display: inline-flex; align-items: center; gap: var(--gap-inline); margin: var(--space-1) 0 0; color: var(--iz-ink-soft); font: var(--text-caption); }
.doc-revised .fa-solid { color: var(--secondary-600); font-size: var(--text-body-size); }
.doc-main { min-width: 0; padding: var(--space-5); border: 1px solid var(--iz-line-soft); border-radius: var(--iz-r-lg); background: #fff; }
/* 15px/2.05 is the article's reading size. The width is in ch of the Latin zero, which is far wider
   than the average Persian letter: 60ch measured a median 76 characters to the line on the privacy
   notice, 58ch measures 73. The column above is sized so the white box hugs this width instead of
   leaving a blank strip beside the text. */
.doc-content { max-width: 58ch; color: var(--iz-ink); font: var(--text-body); overflow-wrap: break-word; }
.doc-content > :first-child { margin-top: 0; }
.doc-content > :last-child { margin-bottom: 0; }
.doc-content p { margin: 0 0 1em; }
.doc-content h2 { margin: 1.9em 0 .45em; color: var(--iz-ink); font: var(--text-h3); text-wrap: balance; scroll-margin-top: 24px; }
.doc-content h3 { margin: 1.6em 0 .4em; color: var(--iz-ink); font: var(--text-h4); }
.doc-content :is(ul, ol) { margin: 0 0 1em; padding-inline-start: 1.3em; }
.doc-content li { margin-block: .35em; padding-inline-start: .2em; }
.doc-content li::marker { color: var(--secondary-500); }
/* The purchase terms number their steps; the browser's default counter printed them in Latin
   digits ("1." "2.") inside Persian text. */
.doc-content ol { list-style-type: persian; }
.doc-content strong { color: var(--iz-ink); font-weight: 700; }
.doc-content a { color: var(--primary-700); text-underline-offset: 3px; border-radius: 4px; }
.doc-content a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
.doc-help { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); max-width: 58ch; margin-top: var(--space-block); padding: var(--space-1) var(--pad-row); border-radius: var(--radius-card); background: var(--iz-sunk); color: var(--iz-text); font: var(--text-caption); }
.doc-help > .fa-solid { color: var(--secondary-600); font-size: var(--text-number-m-size); }
.doc-help p { margin: 0; }
.doc-help .iz-link { transition: color .16s var(--iz-ease), transform .16s var(--iz-ease-out); }
.doc-help .iz-link:active { transform: scale(var(--iz-press)); }

/* The contents. The same look as the article's «در این مقاله» (article.css), which this route does
   not load. */
/* The column stretches to the box's height and the contents stick inside it, so they follow the
   reader down a long document and stop where it ends. */
.doc-side { align-self: stretch; min-width: 0; }
.doc-toc { position: sticky; top: 24px; }
.doc-toc h2 { display: flex; align-items: center; gap: var(--gap-inline); margin: 0 0 var(--space-head); color: var(--iz-ink); font: var(--text-h4); }
.doc-toc-fold > summary { display: flex; align-items: center; gap: var(--gap-inline); margin: 0; color: var(--iz-ink-soft); font: var(--text-body-s); font-weight: 600; }
.doc-toc h2 .fa-solid, .doc-toc-fold > summary .fa-solid { color: var(--secondary-600); font-size: var(--text-h4-size); }
.doc-toc ol, .doc-toc-fold ol { display: grid; margin: 0; padding: 0; list-style: none; }
.doc-toc ol { max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: thin; }
.doc-toc a, .doc-toc-fold a { display: flex; align-items: center; min-height: 44px; padding-block: var(--space-0); padding-inline: var(--space-2) var(--space-1); border-inline-start: 2px solid var(--iz-line-soft); color: var(--iz-text); font: var(--text-caption); text-decoration: none; transition: color .16s var(--iz-ease), border-color .16s var(--iz-ease); }
.doc-toc a:focus-visible, .doc-toc-fold a:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--color-focus-ring); }
@media (hover: hover) and (pointer: fine) { :is(.doc-toc, .doc-toc-fold) a:hover { color: var(--primary-700); border-inline-start-color: var(--primary-200); } }
.doc-toc-fold { display: none; }

@media (max-width: 900px) {
	.doc-wrap { --doc-w: 600px; }
	.doc-layout { grid-template-columns: minmax(0, 1fr); }
	.doc-side { display: none; }
	/* One row until it is asked for: on a phone the eight entries of the privacy notice would push
	   its first paragraph a screen down. */
	.doc-toc-fold { display: block; margin: 0 0 var(--space-head); border-radius: var(--radius-card); background: var(--iz-sunk); }
	.doc-toc-fold > summary { min-height: 48px; padding: 0 var(--pad-row); border-radius: inherit; color: var(--iz-ink); cursor: pointer; list-style: none; }
	.doc-toc-fold > summary::-webkit-details-marker { display: none; }
	.doc-toc-fold > summary .iz-count { margin-inline-start: 2px; }
	.doc-toc-fold > summary .fa-chevron-down { margin-inline-start: auto; color: var(--iz-ink-soft); }
	.doc-toc-fold[open] > summary .fa-chevron-down { rotate: 180deg; }
	.doc-toc-fold > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); }
	.doc-toc-fold ol { padding: 0 var(--space-2) var(--space-2); }
}
@media (max-width: 767px) { .doc-wrap { width: calc(100% - 32px); } }
@media (max-width: 599px) { .doc-main { padding: var(--pad-row); } }

/* ---------------------------------------------------------------------------------------------
   The article card — template-parts/content/post-card.php, the one article card on the site
   (2026-09-26). The homepage drew its own `.home-post` beside the blog's `.public-post-card`; the
   two had drifted to different data (the blog's showed only a numeric date, the homepage's a
   topic and a reading time), different fallbacks (a 76px tinted strip against the drawn
   illustration) and different link counts (two per card against one). Here once, in the sheet
   every route already loads.

   Three variants: `card` (the grids), `featured` (the homepage's lead article), `row` (the
   compact lines beside it). The title's link is stretched over the card. Titles hold two lines
   and excerpts three, so cards in a row share their heights without a min-height reserving
   blank space under a short title.
   --------------------------------------------------------------------------------------------- */
.post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--iz-line-soft);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	transition: transform 220ms var(--iz-ease-out), box-shadow 220ms var(--iz-ease-out), border-color 220ms var(--iz-ease-out);
}
.post-card__media { position: relative; display: grid; place-items: center; flex: none; aspect-ratio: 16 / 9; overflow: hidden; background: var(--iz-sunk); color: var(--primary-600); }
.post-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--iz-ease-out); }
/* The placeholder glyph, sized from the ladder like every icon in this sheet. */
.post-card__media > .fa-solid { font-size: var(--text-h1-size); opacity: .6; }
.post-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--pad-card) var(--pad-card); }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); margin: 0; color: var(--iz-ink-soft); font: var(--text-caption); }
.post-card__topic { color: var(--color-text-accent); font-weight: 600; }
.post-card__title { display: -webkit-box; margin: 0; overflow: hidden; color: var(--color-heading); font: var(--text-h4); text-wrap: balance; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.post-card__title a { color: inherit; text-decoration: none; transition: color 180ms var(--iz-ease); }
/* The excerpt steps back from the title (owner, 2026-09-29: "description with less opacity"). A
   softer ink, not `opacity`: --iz-ink-soft is #58707a, 5.2:1 on the white card — AA for body text —
   where opacity would blend toward whatever ground the card sits on. */
.post-card__excerpt { display: -webkit-box; margin: 0; overflow: hidden; color: var(--iz-ink-soft); font: var(--text-body-s); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
/* «ادامهٔ مطلب» — a label, not a link (see post-card.php). Hidden until phone width, where there is no
   hover to say the card is one. `margin-block-start: auto` pins it to the card's foot so cards in a
   row keep their labels on one line. */
.post-card__more { display: none; align-items: center; gap: var(--gap-inline); align-self: flex-start; margin-block-start: auto; padding-block-start: var(--space-0); color: var(--color-link); font: var(--text-caption); font-weight: 600; }
.post-card__more .fa-solid { font-size: var(--text-body-size); transition: translate 180ms var(--iz-ease-out); }
.post-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-card); }
.post-card__link:focus-visible { outline: none; }
.post-card:has(.post-card__link:focus-visible) { box-shadow: 0 0 0 3px var(--color-focus-ring); }

.post-card--featured .post-card__title { font: var(--text-h3); }

.post-card--row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: var(--space-2); }
.post-card--row .post-card__media { aspect-ratio: 1; border-radius: 12px; }
.post-card--row .post-card__media > .fa-solid { font-size: var(--text-number-l-size); }
.post-card--row .post-card__body { gap: var(--gap-title); padding: 0; }
.post-card--row .post-card__excerpt { font: var(--text-caption); -webkit-line-clamp: 2; }

@media (hover: hover) and (pointer: fine) {
	.post-card:hover { transform: translateY(-2px); border-color: var(--primary-200); box-shadow: var(--iz-shadow-lift); }
	.post-card:hover .post-card__title a { color: var(--secondary-700); }
	.post-card:hover .post-card__media img { transform: scale(1.04); }
	.post-card:hover .post-card__more .fa-solid { translate: -3px 0; }
}

/* The grids the card sits in. A column never drops below 260px, and the count is capped — three
   across on a full-width row, two beside the blog's filter rail — so the tablet width gets fewer,
   wider cards instead of three 230px ones. */
.public-post-grid { --cols: 3; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(260px, (100% - (var(--cols) - 1) * var(--gap-grid)) / var(--cols))), 1fr)); gap: var(--gap-grid); }

/* The compact line (`line`): a square picture, the title, the reading time; hairlines between. The
   homepage's list beside its picture grid and the articles' sidebar. Moved here from home.css
   2026-09-30. No lift on hover: a line in a list is not a card. */
.post-card--line {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	align-items: center;
	gap: var(--space-3);
	padding: var(--pad-row) 0;
	border: 0;
	border-radius: var(--radius-input);
	background: transparent;
	overflow: visible;
}
.post-card--line + .post-card--line { border-top: 1px solid var(--iz-line-soft); border-radius: 0; }
.post-card--line .post-card__media { width: 72px; aspect-ratio: 1; border-radius: var(--space-2); }
.post-card--line .post-card__media > .fa-solid { font-size: var(--icon-l); }
.post-card--line .post-card__body { gap: var(--gap-title); padding: 0; }
.post-card--line .post-card__title { font: var(--text-body-s); font-weight: 700; }
.post-card--line .post-card__link::after { border-radius: 0; }
.post-card--line:has(.post-card__link:focus-visible) { border-radius: var(--radius-input); }
@media (hover: hover) and (pointer: fine) {
	.post-card--line:hover { transform: none; box-shadow: none; }
	.post-card--line:hover .post-card__media img { transform: none; }
}

@media (max-width: 560px) {
	.post-card--row { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-2); }
	.post-card--row .post-card__excerpt { display: none; }
	.post-card__more { display: inline-flex; }

/* The archive's cards on a phone: the `row` card the rest of the site uses — a rounded square picture
   inset in the card, the meta and title beside it, one row per article (owner, 2026-09-30). The lead
   card and the list share it; the excerpt and «ادامهٔ مطلب» drop so a row stays short. */
@media (max-width: 560px) {
	.blog-main .post-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: var(--space-2); }
	.blog-main .post-card__media { aspect-ratio: 1; min-height: 0; border-radius: 12px; }
	.blog-main .post-card__media > .fa-solid { font-size: var(--text-number-l-size); }
	.blog-main .post-card__body { gap: var(--gap-title); padding: 0; }
	.blog-main .post-card__title { font: var(--text-body-s); font-weight: 700; }
	.blog-main .post-card__excerpt, .blog-main .post-card__more { display: none; }
	.blog-main .public-post-grid, .blog-lead { gap: var(--space-3); }
}
}
}