/**
 * About — «درباره من» (page-about.php). 2026-09-30.
 *
 * The site's direction throughout: small headings, grey for inner boxes, colour only on the one
 * full-width band («رویکرد من»), the type ladder and spacing scale from tokens.css. Motion follows
 * the kit's contract — transform and opacity only, the kit's ease-out, nothing over 300ms except
 * the rail's fill, which tracks the scroll rather than playing on its own; tokens.css's
 * reduced-motion rule collapses every duration here.
 */

/* ------------------------------------------------------------------ head */
.about-head .iz-pagehead__media { aspect-ratio: 4 / 5; max-width: 320px; justify-self: end; }
.about-head.iz-pagehead--media { grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr); }

/* Four facts. A grey strip, not four cards: they are one sentence about her, read left to right. */
.about-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--iz-line-soft); border-radius: var(--radius-card); background: var(--iz-line-soft); list-style: none; }
.about-facts li { display: grid; align-content: start; gap: var(--gap-title); padding: var(--pad-card); background: var(--iz-sunk); }
.about-facts strong { color: var(--secondary-700); font: var(--text-number-m); }
.about-facts span { color: var(--iz-text); font: var(--text-caption); text-wrap: pretty; }

/* ----------------------------------------------------------------- story */
.about-story { padding-block: var(--space-section) var(--space-section); }
.about-story__box { padding: var(--pad-card) clamp(var(--space-3), 4vw, var(--space-6)); border: 1px solid var(--iz-line-soft); border-radius: var(--iz-r-lg); background: #fff; }
.about-prose { color: var(--iz-text); font: var(--text-body); line-height: 2; }
.about-prose > * { margin: 0 0 var(--space-3); }
.about-prose h3 { margin-top: var(--space-5); color: var(--iz-ink); font: var(--text-h3); }
.about-prose strong { color: var(--iz-ink); font-weight: 600; }
/* The two litanies of the story («حنانه بود و…», «آیا…») are set as verse: a quiet rule on the
   start side and one line each, the way the owner wrote them. */
.about-prose .about-verse { margin-block: var(--space-4); padding: var(--space-2) var(--space-4); border-inline-start: 2px solid var(--secondary-300); border-radius: 0; background: none; color: var(--iz-ink); font: var(--text-subtitle); line-height: 2; }
.about-prose .about-verse p { margin: 0; }
.about-prose blockquote.about-quote { margin-block: var(--space-5); padding: var(--space-4); border-radius: var(--radius-card); background: var(--iz-sunk); color: var(--iz-ink); font: var(--text-h4); line-height: 1.9; }
.about-prose blockquote.about-quote p { margin: 0; }

/* The second half. It fades in when opened; it never slides, so a long block of text does not
   travel under the reader's eye. The button stays where it is and only its label and chevron
   change, so focus and the reading position are both undisturbed. */
.about-story__more { transition: opacity 240ms var(--iz-ease-out); }
.about-story__more[hidden] { display: none; }
.about-story__more.is-entering { opacity: 0; }
.about-story__toggle { margin-top: var(--space-1); }
.about-story__toggle .fa-solid { transition: transform 200ms var(--iz-ease-out); }
.about-story__toggle[aria-expanded="true"] .fa-solid { transform: rotate(180deg); }
.about-story__sign { margin: var(--space-4) 0 0; color: var(--secondary-700); font: var(--text-h4); text-align: end; }

/* Story and journey beside a narrow side column, the article page's proportions. The column is
   sticky so the chapters stay in reach through a long read; it is an editorial rail rather than
   a stack of floating cards. Below 768px it drops under the text, where the quote closes the
   section instead of opening it. */
.about-split { display: grid; grid-template-columns: minmax(0, 46rem) minmax(220px, 300px); justify-content: space-between; gap: var(--space-6); align-items: start; }
.about-aside { position: sticky; top: calc(var(--space-6) + var(--wp-admin--admin-bar--height, 0px)); display: grid; gap: var(--space-4); padding-block: var(--space-1); padding-inline-start: var(--space-4); border-inline-start: 1px solid var(--iz-line-soft); }
.about-aside__eyebrow { display: flex; align-items: center; gap: var(--space-1); margin: 0; color: var(--secondary-700); font: var(--text-eyebrow); }
.about-aside__eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: var(--radius-pill); background: var(--secondary-400); }
.about-aside__quote { margin: 0; padding: 0; border-radius: 0; background: none; }
.about-aside__quote blockquote { margin: 0; }
.about-aside__quote p { margin: 0; color: var(--iz-ink); font: var(--text-subtitle); line-height: 1.85; text-wrap: balance; }
.about-aside__quote p::before { content: "«"; color: var(--secondary-400); }
.about-aside__quote p::after { content: "»"; color: var(--secondary-400); }
.about-aside__quote figcaption { margin-top: var(--space-2); color: var(--iz-ink-soft); font: var(--text-caption); }
.about-aside__quote--green { background: none; }
.about-aside--journey { border-color: var(--secondary-200); }
.about-aside--journey .about-aside__quote p::before, .about-aside--journey .about-aside__quote p::after { color: var(--secondary-500); }
.about-aside__toc { padding-top: var(--space-3); border-top: 1px solid var(--iz-line-soft); }
.about-aside__label { margin: 0 0 var(--space-2); color: var(--iz-ink-soft); font: var(--text-eyebrow); }
.about-aside__toc ol { display: grid; gap: var(--space-0); margin: 0; padding: 0; list-style: none; }
.about-aside__toc a { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: var(--space-0) 0; color: var(--iz-text); font: var(--text-body-s); text-decoration: none; transition: color .16s var(--iz-ease), transform .16s var(--iz-ease-out); }
.about-aside__toc a::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--secondary-300); transition: background-color .16s var(--iz-ease), transform .16s var(--iz-ease-out); }
.about-aside__toc a:focus-visible { outline: none; box-shadow: var(--iz-focus); border-radius: 8px; }
@media (hover: hover) and (pointer: fine) {
	.about-aside__toc a:hover { color: var(--iz-ink); transform: translateX(-3px); }
	.about-aside__toc a:hover::before { background: var(--secondary-500); transform: scale(1.25); }
}
.about-prose h3[id] { scroll-margin-top: var(--space-7); }

/* -------------------------------------------------------------- approach */
.about-approach { padding-block: var(--space-band); background: var(--iz-sunk); }
.about-approach .iz-h2 { margin-bottom: var(--space-block); }
.about-approach__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-grid); margin: 0; padding: 0; list-style: none; }
.about-approach__item { padding: var(--pad-card); border: 1px solid var(--iz-line-soft); border-radius: var(--radius-card); background: #fff; }
.about-approach__item .iz-tile { margin-bottom: var(--space-head); }
.about-approach__item h3 { margin: 0; color: var(--iz-ink); font: var(--text-h4); }
.about-approach__item p { margin: var(--gap-title) 0 0; color: var(--iz-text); font: var(--text-body-s); line-height: 1.9; text-wrap: pretty; }

/* --------------------------------------------------------------- journey */
.about-journey { padding-block: var(--space-section); }
.about-journey .iz-h2 { margin-bottom: var(--space-block); }
.about-journey__rail { gap: var(--space-4); }
/* The kit's fill runs a .9s transition for a step change; here it follows the scroll, so it moves
   in small increments and takes a short, even catch-up instead. */
.about-journey__rail::after { transition: height 120ms linear; }
.about-journey__step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.about-journey__step .iz-rail__node { font-size: var(--iz-icon-s); transition: background-color 200ms var(--iz-ease), border-color 200ms var(--iz-ease), color 200ms var(--iz-ease); }
.about-journey__step.is-passed .iz-rail__node { border-color: var(--secondary-500); background: var(--secondary-500); color: #fff; }
.about-journey__body { padding-top: var(--space-1); }
.about-journey__year { margin: 0; color: var(--secondary-600); font: var(--text-number-s); }
.about-journey__body h3 { margin: var(--gap-title) 0 0; color: var(--iz-ink); font: var(--text-h4); }
.about-journey__body p:last-child { margin: var(--gap-title) 0 0; color: var(--iz-text); font: var(--text-body-s); line-height: 1.9; max-width: 56ch; }

/* ----------------------------------------------------------- credentials */
.about-creds { padding-block: 0 var(--space-section); }
.about-creds__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-block); }
.about-creds__head .iz-h2 { margin: 0; }
.about-creds__n { color: var(--iz-ink-soft); font: var(--text-micro); font-weight: 600; }
.about-creds__filter [aria-pressed="true"] { background: #fff; box-shadow: var(--iz-shadow-1); color: var(--iz-ink); }
.about-creds__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-list); margin: 0; padding: 0; list-style: none; }
.about-cred { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; padding: var(--pad-row); border: 1px solid var(--iz-line-soft); border-radius: var(--radius-card); background: #fff; }
.about-cred[hidden] { display: none; }
.about-cred__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary-50); color: var(--primary-600); font-size: var(--iz-icon-m); }
.about-cred--license .about-cred__icon { background: var(--secondary-50); color: var(--secondary-600); }
.about-cred--research .about-cred__icon { background: var(--accent-50); color: var(--accent-600); }
.about-cred h3 { margin: 0; color: var(--iz-ink); font: var(--text-body-s); font-weight: 600; text-wrap: pretty; }
.about-cred h3 a { color: inherit; text-decoration: none; }
.about-cred h3 a .fa-solid { margin-inline-start: var(--space-0); color: var(--iz-ink-soft); font-size: var(--iz-icon-xs); }
.about-cred h3 a:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--iz-focus); }
@media (hover: hover) and (pointer: fine) { .about-cred h3 a:hover { color: var(--primary-700); text-decoration: underline; text-underline-offset: 3px; } }
.about-cred p { margin: var(--gap-title) 0 0; color: var(--iz-ink-soft); font: var(--text-caption); }
/* Entering after a filter change: a short fade and a 6px rise, staggered 30ms by about.js through
   --i and capped, so seventeen rows never take longer than a quarter second to settle. */
.about-cred.is-entering { opacity: 0; transform: translateY(6px); }
.about-cred { transition: opacity 220ms var(--iz-ease-out), transform 220ms var(--iz-ease-out); transition-delay: calc(min(var(--i, 0), 8) * 30ms); }

/* The certificate thumbnail at the card's end: a scanned page, so it keeps a paper edge and is
   cropped to the top, where the title sits. Press scales it, like every pressable in the kit. */
.about-cred__cert { position: relative; display: block; width: 64px; height: 46px; overflow: hidden; border: 1px solid var(--iz-line); border-radius: 8px; background: #fff; transition: transform 160ms var(--iz-ease-out), border-color .16s var(--iz-ease), box-shadow .16s var(--iz-ease); }
.about-cred__cert:active { transform: scale(var(--iz-press)); }
.about-cred__cert:focus-visible { outline: none; box-shadow: var(--iz-focus); }
.about-cred__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.about-cred__more { position: absolute; inset-block-end: 2px; inset-inline-end: 2px; padding: 0 5px; border-radius: var(--radius-pill); background: rgb(20 46 55 / .78); color: #fff; font: var(--text-micro); font-weight: 600; line-height: 18px; }
@media (hover: hover) and (pointer: fine) {
	.about-cred__cert:hover { border-color: var(--primary-300); box-shadow: var(--iz-shadow-1); }
}

/* The lightbox. A modal, so it scales from the centre, not from the thumbnail. Enter and exit are
   CSS alone (@starting-style, `allow-discrete` on display and overlay): 200ms in, 150ms out, the
   kit's ease-out, opacity and a .96 scale. A browser without them opens and closes it instantly. */
.about-lightbox { width: min(960px, calc(100vw - 2 * var(--space-3))); max-height: calc(100dvh - 2 * var(--space-3)); padding: 0; border: 0; border-radius: var(--iz-r-lg); background: #fff; box-shadow: var(--iz-shadow-3); color: var(--iz-text); opacity: 0; transform: scale(.96);
	transition: opacity 150ms var(--iz-ease-out), transform 150ms var(--iz-ease-out), overlay 150ms allow-discrete, display 150ms allow-discrete; }
.about-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; opacity: 1; transform: none; transition-duration: 200ms; }
@starting-style { .about-lightbox[open] { opacity: 0; transform: scale(.96); } }
.about-lightbox::backdrop { background: rgb(13 47 61 / 0); transition: background-color 200ms var(--iz-ease-out), overlay 200ms allow-discrete, display 200ms allow-discrete; }
.about-lightbox[open]::backdrop { background: rgb(13 47 61 / .6); }
@starting-style { .about-lightbox[open]::backdrop { background: rgb(13 47 61 / 0); } }
.about-lightbox__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--pad-card); border-bottom: 1px solid var(--iz-line-soft); }
.about-lightbox__head h2 { margin: 0; color: var(--iz-ink); font: var(--text-h4); text-wrap: pretty; }
.about-lightbox__head p { margin: var(--gap-title) 0 0; color: var(--iz-ink-soft); font: var(--text-caption); }
.about-lightbox__figure { display: grid; place-items: center; min-height: 0; margin: 0; padding: var(--space-3); overflow: auto; background: var(--iz-sunk); }
.about-lightbox__figure img { display: block; max-width: 100%; max-height: calc(100dvh - 220px); width: auto; height: auto; border-radius: 6px; box-shadow: var(--iz-shadow-1); transition: opacity 150ms var(--iz-ease-out); }
.about-lightbox__figure img.is-loading { opacity: 0; }
.about-lightbox__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--pad-card); border-top: 1px solid var(--iz-line-soft); }
.about-lightbox__nav[hidden] { display: none; }
.about-lightbox__nav span { color: var(--iz-ink-soft); font: var(--text-caption); }

/* ------------------------------------------------------------------ work */
.about-work { padding-block: 0 var(--space-band); }
.about-work .iz-h2 { margin-bottom: var(--space-block); }
.about-work__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); margin: 0; padding: 0; list-style: none; }
.about-work__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--pad-card); border-radius: var(--radius-card); background: var(--iz-sunk); }
.about-work__item .iz-tile { background: #fff; }
.about-work__item h3 { margin: var(--space-2) 0 0; color: var(--iz-ink); font: var(--text-h4); }
.about-work__topics { display: flex; flex-wrap: wrap; gap: var(--space-0); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.about-work__topics li { padding: var(--pad-chip-y) var(--pad-chip-x); border-radius: var(--radius-pill); background: #fff; color: var(--iz-text); font: var(--text-caption); }

/* ---------------------------------------------------------------- reveal */
/* Set only by about.js, and only on what starts below the fold: without the script, or above the
   fold, nothing is ever hidden. */
[data-about-reveal].will-reveal { opacity: 0; transform: translateY(8px); }
[data-about-reveal] { transition: opacity 280ms var(--iz-ease-out), transform 280ms var(--iz-ease-out); transition-delay: calc(var(--i, 0) * 50ms); }
[data-about-reveal].is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- narrow */
/* The About head deliberately keeps its two-column composition through tablet widths. Its desktop
   rule is more specific than the kit's generic 860px stack; phone is the only layout that stacks. */
/* Tablet: two columns leave the copy ~190px wide beside a large portrait, so stack — portrait first. */
@media (min-width: 768px) and (max-width: 1023px) {
	.about-head.iz-pagehead--media { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
	.about-head .iz-pagehead__media { order: -1; width: min(40vw, 260px); max-width: 260px; justify-self: center; }
	.about-head .iz-pagehead__summary { max-width: 52ch; }
}
@media (max-width: 767px) {
	.about-head.iz-pagehead--media { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
	.about-head .iz-pagehead__media { order: -1; width: min(52vw, 200px); max-width: 200px; justify-self: center; }
	.about-head .iz-pagehead__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-4); }
	.about-head .iz-pagehead__actions .iz-btn { min-width: 0; padding-inline: var(--space-2); }
	.about-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
	.about-aside { position: static; padding-inline-start: var(--space-3); }
	.about-aside__toc { display: none; }
	.about-approach__list { grid-template-columns: minmax(0, 1fr); }
	.about-creds__list, .about-work__list { grid-template-columns: minmax(0, 1fr); }
	.about-creds__filter { width: 100%; }
	.about-creds__filter button { flex: 1 0 auto; }
}
@media (max-width: 480px) {
	.about-facts { grid-template-columns: minmax(0, 1fr); }
	.about-facts li { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: var(--space-2); }
}