/* Hallmark · shape: Marquee Hero, from draw 674e0a · draw: 674e0a · genre: modern-minimal · theme: Rim (by request) · redesign: full · copy: verbatim
 * hero: Stage (/), Banner (/gallery/, /certificates/) · nav: edge-aligned · footer: letter close · imagery: the owner's photographs, project screenshots and certificates in true colour · signature: the name at marquee scale beside the colour portrait · rim: night
 * axes: dark/grotesk-sans/warm · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: S, the two archive pages are a filter bar over an image grid that any portfolio could carry; kept them the owner's by setting his organisation glossary as a column beside the grid, his photos and certificates in true colour, and left the composition plain rather than adding material the site never had */
/* Hallmark · note photo · natural, untreated: the owner asked for his photographs in full colour, so Rim's sat=-20 con=10 treatment is not applied */
/* Hallmark · reworded "Netilfy" to "Netlify" · spelling fix in the MediSightAI tech stack (plan C2) */
/* Hallmark · reworded "Predincting wheter a customer leave bussiness or not" to "Predicting whether a customer leave business or not" · spelling fix in the churn project description, grammar kept */
/* Hallmark · reworded "Stramlit" to "Streamlit" · spelling fix in the diabetes webapp tech stack */
/* Hallmark · reworded "IEEE Xtream 2016" to "IEEE Xtreme 2016", "IEEE Xtream" to "IEEE Xtreme", "IEEE Xtream is a 24 hour competition" to "IEEE Xtreme is a 24 hour competition" · the contest name, fixed in four photo titles and one photo description */
/* Hallmark · reworded "Look at the shinny MVP" to "Look at the shiny MVP" · spelling fix in a Rahhat photo description */
/* Hallmark · reworded "Did you saw those cute I and Es?" to "Did you see those cute I and Es?" · tense fix in an IEEE photo description */
/* Hallmark · reworded "Azad University Centeral Tehran Branch" to "Azad University Central Tehran Branch" · spelling fix in both glossaries */
/* Hallmark · reworded "Are interested in my work?" to "Are you interested in my work?" · missing word in the contact paragraph, fixed at the owner's request */
/* Hallmark · reworded "Natural Language Processing and Computer vision" to "Natural Language Processing and Computer Vision" · capitalisation in the biography, at the owner's request */
/* Hallmark · reworded "Python, Tensorflow, Keras" to "Python, TensorFlow, Keras", "Python - Tensorflow - Keras" to "Python - TensorFlow - Keras" · the library's official name, in the hero and two project tech stacks */
/* Hallmark · reworded "Select a Category" to "Select a category" · one sentence-case filter label on every page, at the owner's request */
/* Hallmark · reworded "DL_C4 _small.jpg" to "DL_C4%20_small.jpg", "DL_C5 _small.jpg" to "DL_C5%20_small.jpg", "certificate_8 _small.jpg" to "certificate_8%20_small.jpg" · the same certificate files, their spaces now URL-encoded in the img src */
/* Hallmark · dropped the link emoji icon on project cards · Floor 11 bans an emoji as an icon; the screenshot itself is the link */
/* Hallmark · dropped the category-key hover overlay Cv/Nlp/Strucdata/Etc · replaced by the human category labels listed on every project card */
/* Hallmark · dropped _includes/services.html · the include was never rendered on any page of the old site */
/* Hallmark · dropped /BacTermFinder.html · removed at the owner's request; it was never linked from any page */
/* Hallmark · dropped img/header.jpg hero background · removed at the owner's request; the Stage hero leads with the portrait */
/* Hallmark · dropped /index.html, /gallery.html, /cert_gal.html · relinked to the Zola routes /, /gallery/ and /certificates/; the old .html URLs stay as redirect pages that keep the hash */
/* Hallmark · relinked gallery.html to /gallery/ · Zola alias page, JS location.replace keeping the hash plus a noscript meta refresh */
/* Hallmark · relinked cert_gal.html to /certificates/ · Zola alias page, JS location.replace keeping the hash plus a noscript meta refresh */
/* Hallmark · relinked index.html to / · in-site Back and brand links now point at the Zola home route */
/* Hallmark · relinked projects.html to /#projects · static page with a meta refresh, a canonical link and a plain link */
/* Hallmark · waive 8 · kept sequence Hero, Biography, Projects, Contact in a new composition · the hero's More link targets the Biography directly under it, so the owner's order stays */
/* Hallmark · waive 44c · Banner posture on /gallery/ and /certificates/ · the archive pages open on a compact head so the chips, glossary and first photos sit above the fold */
/* Hallmark · waive 59 · a dense archive separated by hairline rules and the sticky chip bar · the Banner head, chip bar and grid read as one unit; a 120px gap would push the photos below the fold */
/* Hallmark · waive 83 · a gallery of the owner's own photographs and certificates · these two pages are the photo and certificate archives the old site had, and nothing else belongs on them */
/* Hallmark · dismissed 77 · four sections is the owner's own home (Hero, Biography, Projects, Contact) and each one has mass: the marquee portrait, the panel of research and education, the twelve-cell project index, the full-width contact close */
/* Hallmark · note 58 · copy: verbatim; the Projects index is a dense index of the owner's own twelve projects, and the gallery captions are his own photo titles */

/* Shared components only. Load order: tokens.css, base.css, site.css, then the page's own sheet.
   Page layouts (hero, about, projects grid, gallery grid) live in home.css and gallery.css. */

:root {
  --nav-h: 64px;
  --radius-chip: 0;
  --icon-size: 1.25rem;
}

/* ---------- Document ---------- */
html, body { overflow-x: clip; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
[id] { scroll-margin-top: calc(var(--nav-h) + var(--space-md)); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

a { color: var(--color-ink); text-decoration-color: var(--color-muted-2); transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
a:hover { color: var(--color-accent); text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 0; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.icon { width: var(--icon-size); height: var(--icon-size); flex-shrink: 0; fill: currentColor; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-gap-s); }
.section + .section { border-top: var(--rule-hair) solid var(--color-rule); }
.band { background: var(--color-paper-3); color: var(--color-ink); }
.section-head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.section-head > p { color: var(--color-ink-2); }
.muted { color: var(--color-muted); }
.label { font-size: var(--text-sm); font-weight: 500; line-height: 1.4; color: var(--color-muted); letter-spacing: 0; }
/* A heading set as a label: the panel and glossary heads (Research Interest, Education, Description:). */
.label-head { margin: 0; max-width: none; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; line-height: 1.4; letter-spacing: 0; color: var(--color-ink); text-wrap: wrap; }

/* Rim heads: Switzer 500, the hero at --tracking-display, section heads at -0.03em, line-height 1.02. */
h1, h2 { line-height: 1.02; }
h2 { letter-spacing: -0.03em; }
h3 { letter-spacing: -0.02em; }

/* ---------- Buttons (the Rim pair: square orange primary, square outlined secondary) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 44px; padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  background: var(--color-paper-2); color: var(--color-ink);
  font: 500 var(--text-md)/1 var(--font-body); letter-spacing: 0;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-rule); border-color: var(--color-muted); color: var(--color-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 85%, var(--color-ink)); border-color: color-mix(in oklab, var(--color-accent) 85%, var(--color-ink)); color: var(--color-accent-ink); }
.btn--primary:active { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-accent-ink)); border-color: color-mix(in oklab, var(--color-accent) 88%, var(--color-accent-ink)); }
.btn--quiet { background: transparent; border-color: var(--color-rule); }
.btn--quiet:hover { background: var(--color-paper-2); border-color: var(--color-muted-2); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ---------- Chips (filters; the current state = orange edge on a dark orange fill) ---------- */
.chips__label { max-width: none; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--color-muted); margin: 0 0 var(--space-xs); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-chip);
  background: var(--color-paper); color: var(--color-ink-2);
  font: 500 var(--text-sm)/1 var(--font-body); letter-spacing: 0; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.chip:hover { border-color: var(--color-muted-2); background: var(--color-paper-2); color: var(--color-ink); }
.chip:active { background: var(--color-rule); }
.chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chip[aria-pressed="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-ink); }
.chip[aria-pressed="true"]:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.chip:disabled, .chip[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.chip[aria-busy="true"] { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .chip { transition: none; } }

/* ---------- Glossary ---------- */
.glossary { margin: 0; display: grid; gap: var(--space-xs); }
.glossary__item { display: grid; gap: var(--space-3xs); }
.glossary dt { font-weight: 500; color: var(--color-ink); font-size: var(--text-sm); }
.glossary dd { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- Panels (one surface, 1px seams) ---------- */
.panels { display: grid; gap: var(--rule-hair); background: var(--color-rule); color: var(--color-ink); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.panels > * { background: var(--color-paper-2); color: var(--color-ink); min-width: 0; }

/* ---------- Figures and photographs ---------- */
figure { margin: 0; }
figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.45; color: var(--color-muted); }
figcaption strong, .caption__title { display: block; margin: 0; max-width: none; font: inherit; font-weight: 500; letter-spacing: 0; color: var(--color-ink-2); }
.caption__desc { display: block; }
picture { display: block; }
/* Every picture sits in a .frame: true colour on a paper-3 ground, so an image that has not painted yet (or a letterboxed one) shows the deepest step. */
.frame { display: block; background: var(--color-paper-3); border-radius: var(--radius-card); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; overflow: hidden; }

/* ---------- Social links ---------- */
.social { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.social__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-pill); color: var(--color-muted); transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.social__link:hover { color: var(--color-ink); background: var(--color-paper-2); }
.social__link:active { background: var(--color-rule); }
.social__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--space-lg); min-height: calc(var(--nav-h) - var(--rule-hair)); }
.nav__brand { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--color-ink); text-decoration: none; white-space: nowrap; padding-block: var(--space-xs); }
.nav__brand:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-muted-2); }
.nav__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md); margin: 0; padding: 0; list-style: none; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-decoration: none; }
.nav__links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-muted-2); }
.nav__links a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.4em; }
.nav__toggle { display: none; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.nav__toggle:hover { background: var(--color-rule); }
.nav__toggle:active { background: var(--color-paper-3); }
.nav__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav__toggle[aria-expanded="true"] { background: var(--color-accent-soft); border-color: var(--color-accent); }
@media (max-width: 60rem) {
  .nav__links { padding-bottom: var(--space-xs); column-gap: var(--space-md); }
  /* With JS the toggle is revealed and collapses the links; without JS the links simply wrap. */
  .js .nav__toggle:not([hidden]) { display: inline-flex; }
  .js .nav__toggle:not([hidden]) ~ .nav__links { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xs); }
  .js .nav__toggle:not([hidden]) ~ .nav__links a { width: 100%; font-size: var(--text-md); }
  .js .nav__toggle[aria-expanded="false"]:not([hidden]) ~ .nav__links { display: none; }
}

/* ---------- Contact (on every page) ---------- */
.contact { background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); }
.contact__inner { display: grid; gap: var(--space-lg); align-items: start; }
.contact__body { display: grid; gap: var(--space-lg); justify-items: start; }
.contact__body p { color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.5; max-width: 52ch; }
.contact .btn--primary { white-space: normal; text-align: left; overflow-wrap: anywhere; }
@media (min-width: 60rem) {
  .contact__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); }
}

/* ---------- Footer (letter close) ---------- */
.footer { padding-block: var(--space-2xl) var(--space-xl); }
.footer__sign { margin: 0; padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-section); letter-spacing: var(--tracking-display); line-height: 1.04; color: var(--color-ink); max-width: none; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-decoration: none; }
.footer__links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-muted-2); }

/* ---------- Lightbox (markup created by site.js) ---------- */
.lightbox { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: var(--space-md); border: 0; background: transparent; color: var(--color-ink); overflow: hidden; }
.lightbox::backdrop { background: color-mix(in oklab, var(--color-paper-3) 94%, transparent); }
/* Bar on top; picture, caption and controls held together and centred in what is left. */
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, 1fr); gap: var(--space-sm); }
.lightbox__bar { grid-row: 1; }
.lightbox__figure { grid-row: 3; }
.lightbox__nav { grid-row: 4; }
.lightbox__bar { display: flex; justify-content: flex-end; gap: var(--space-xs); }
.lightbox__figure { display: grid; grid-template-rows: auto auto; align-content: center; gap: var(--space-sm); min-height: 0; margin: 0; justify-items: center; }
.lightbox__img { max-width: 100%; max-height: calc(100svh - 2 * var(--space-md) - 4 * var(--space-sm) - 88px - 4.5rem); width: auto; height: auto; min-height: 0; object-fit: contain; border-radius: var(--radius-card); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.lightbox__caption { margin: 0; max-width: 65ch; text-align: center; font-size: var(--text-sm); color: var(--color-muted); }
.lightbox__title { display: block; font-weight: 500; color: var(--color-ink); }
.lightbox__desc { display: block; }
.lightbox__nav { display: flex; justify-content: center; gap: var(--space-sm); }
.lightbox__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-width: 44px; min-height: 44px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.lightbox__btn:hover { background: var(--color-rule); }
.lightbox__btn:active { background: var(--color-paper-3); }
.lightbox__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.lightbox__btn:disabled { opacity: 0.55; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lightbox-in var(--dur-short) var(--ease-out); }
}
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lightbox__btn, .nav__toggle, .social__link, a { transition: none; } }