/* =============================================================================
   Mohsen Nezhadyousefi — Portfolio & Résumé
   Hand-written CSS. No frameworks, no build step.

   Structure:
     01 Tokens & themes      06 Hero
     02 Reset & base         07 Sections (about, projects, experience, skills)
     03 Layout primitives    08 Contact & footer
     04 Buttons & icons      09 Utilities & motion
     05 Header & navigation  10 Responsive
                             11 Print
   Everything uses CSS logical properties (inline-start/end) so the entire
   layout mirrors automatically when dir="rtl" is set for Persian.
   ========================================================================== */

/* ============================================================ 01 TOKENS === */
:root {
  /* The Latin face the printed résumé is measured in. A theme may replace
     --font-latin for the screen; it must never touch --font-resume, and the
     print block below must never stop resolving to it. */
  --font-resume: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-latin: var(--font-resume);
  --font-fa: "Vazirmatn", "Inter", ui-sans-serif, Tahoma, system-ui, sans-serif;
  --font: var(--font-latin);

  /* fluid type scale */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --fs-xl: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
  --fs-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
  --fs-3xl: clamp(2.1rem, 1.5rem + 3vw, 3.9rem);

  /* spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --r-sm: 9px;
  --r: 14px;
  --r-lg: 20px;
  --r-full: 999px;

  --wrap: 1160px;
  --header-h: 68px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------- dark (default) */
[data-theme="dark"] {
  --bg: #080d12;
  --bg-alt: #0b1219;
  --surface: #101a22;
  --surface-2: #16222c;
  --border: #1e2c37;
  --border-strong: #2c3f4d;
  --text: #e9f1f6;
  --text-dim: #9cadba;
  --text-faint: #6c7e8c;
  --accent: #2dd4bf;
  --accent-strong: #5eead4;
  --accent-soft: rgba(45, 212, 191, 0.12);
  --accent-line: rgba(45, 212, 191, 0.32);
  --accent-ink: #04211f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 30px 60px -28px rgba(0, 0, 0, 0.9);
  --glow: rgba(45, 212, 191, 0.16);
  --header-bg: rgba(8, 13, 18, 0.72);
  color-scheme: dark;
}

/* ----------------------------------------------------------------- light */
[data-theme="light"] {
  --bg: #fbfcfd;
  --bg-alt: #f1f5f8;
  --surface: #ffffff;
  --surface-2: #f6f9fb;
  --border: #e2e9ee;
  --border-strong: #c9d6de;
  --text: #0b1a24;
  --text-dim: #52636f;
  --text-faint: #7a8a96;
  --accent: #0f766e;
  --accent-strong: #0d9488;
  --accent-soft: rgba(15, 118, 110, 0.09);
  --accent-line: rgba(15, 118, 110, 0.28);
  --accent-ink: #ffffff;
  --shadow-sm: 0 1px 2px rgba(12, 32, 44, 0.06);
  --shadow: 0 14px 32px -18px rgba(12, 32, 44, 0.26);
  --shadow-lg: 0 30px 60px -30px rgba(12, 32, 44, 0.3);
  --glow: rgba(15, 118, 110, 0.1);
  --header-bg: rgba(251, 252, 253, 0.78);
  color-scheme: light;
}

/* Persian typography */
html[lang="fa"] {
  --font: var(--font-fa);
  --fs-base: 0.9375rem;
}

/* ==================================================== 02 RESET & BASE === */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
html[lang="fa"] h4 { letter-spacing: 0; line-height: 1.4; }

p { text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
a:hover { color: var(--accent-strong); }

img { max-width: 100%; display: block; height: auto; }

ul, ol { list-style: none; padding: 0; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: var(--accent-ink); }

.skip-link {
  position: fixed;
  inset-block-start: -100px;
  inset-inline-start: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: inset-block-start 0.2s var(--ease);
}
.skip-link:focus { inset-block-start: var(--sp-4); color: var(--accent-ink); }

/* ============================================== 03 LAYOUT PRIMITIVES === */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

.section {
  padding-block: clamp(3.5rem, 8vw, var(--sp-9));
  position: relative;
}
.section--alt { background: var(--bg-alt); }
.section--alt::before,
.section--alt::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.section--alt::before { inset-block-start: 0; }
.section--alt::after { inset-block-end: 0; }

.section__head { margin-block-end: clamp(2rem, 4vw, var(--sp-7)); }
.section__head--sub { margin-block: var(--sp-8) var(--sp-5); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: var(--sp-2);
}
html[lang="fa"] .kicker { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }

.kicker::before {
  content: "";
  inline-size: 22px;
  block-size: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.section__title { font-size: var(--fs-2xl); }
.subsection__title {
  font-size: var(--fs-xl);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.subsection__title::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--border);
}

/* cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.card--quiet { background: var(--surface-2); }
.card__title {
  font-size: var(--fs-md);
  margin-block-end: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ================================================ 04 BUTTONS & ICONS === */
.icon {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

/* mirror directional icons in RTL */
html[dir="rtl"] .icon--dir { transform: scaleX(-1); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.7rem 1.25rem;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  font-size: var(--fs-base);
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), background-color 0.2s var(--ease),
              border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 6px 20px -8px var(--glow);
}
.btn--primary:hover {
  background: var(--accent-strong);
  color: var(--accent-ink);
  box-shadow: 0 12px 28px -10px var(--glow);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.btn--sm { padding: 0.5rem 0.95rem; font-size: var(--fs-sm); }
.btn--block { inline-size: 100%; }

.btn-icon {
  display: inline-grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background-color 0.2s var(--ease);
}
.btn-icon:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.btn-icon .icon { inline-size: 18px; block-size: 18px; }

.lang-btn {
  inline-size: auto;
  gap: 0.35rem;
  padding-inline: 0.7rem;
  grid-auto-flow: column;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.lang-btn__label { font-family: var(--font-fa); }
html[lang="fa"] .lang-btn__label { font-family: var(--font-latin); }

/* theme icon swap */
[data-theme="dark"] .icon--sun { display: none; }
[data-theme="light"] .icon--moon { display: none; }

/* ============================================ 05 HEADER & NAVIGATION === */
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}
.progress__bar {
  display: block;
  block-size: 100%;
  inline-size: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: inline-size 0.1s linear;
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-block-end: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.site-header.is-stuck { border-block-end-color: var(--border); }

.site-header__inner {
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  flex: none;
}
.brand:hover { color: var(--text); }
.brand__mark {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  font-family: var(--font-latin);
  box-shadow: 0 4px 14px -6px var(--glow);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__text strong { font-size: var(--fs-sm); font-weight: 700; }
.brand__text small { font-size: 0.68rem; color: var(--text-faint); font-weight: 500; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-inline-start: auto;
}
.nav a {
  position: relative;
  padding: 0.45rem 0.8rem;
  border-radius: var(--r-full);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

.menu-btn { display: none; }
#menuToggle .icon--close { display: none; }
#menuToggle[aria-expanded="true"] .icon--menu { display: none; }
#menuToggle[aria-expanded="true"] .icon--close { display: block; }

.mobile-nav {
  position: fixed;
  inset-block-start: var(--header-h);
  inset-inline: 0;
  z-index: 99;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: var(--sp-3) clamp(1.1rem, 4vw, 2.5rem) var(--sp-5);
  transform: translateY(-12px);
  opacity: 0;
  transition: transform 0.25s var(--ease-out), opacity 0.2s var(--ease);
}
.mobile-nav.is-open { transform: translateY(0); opacity: 1; }
.mobile-nav nav { display: flex; flex-direction: column; }
.mobile-nav a {
  padding: 0.85rem var(--sp-2);
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 600;
  border-block-end: 1px solid var(--border);
}
.mobile-nav a:last-child { border-block-end: none; }
.mobile-nav a[aria-current="true"] { color: var(--accent); }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.scrim.is-open { opacity: 1; }

/* ================================================= AMBIENT BACKGROUND === */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ambient__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.ambient__glow--a {
  inline-size: 46vw;
  block-size: 46vw;
  inset-block-start: -14vw;
  inset-inline-end: -10vw;
  background: radial-gradient(circle, var(--glow), transparent 70%);
  animation: drift 22s var(--ease) infinite alternate;
}
.ambient__glow--b {
  inline-size: 38vw;
  block-size: 38vw;
  inset-block-end: -12vw;
  inset-inline-start: -8vw;
  background: radial-gradient(circle, var(--glow), transparent 70%);
  animation: drift 28s var(--ease) infinite alternate-reverse;
}
.ambient__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.28;
  mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 75%);
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(4%, 6%, 0) scale(1.12); }
}

/* ============================================================ 06 HERO === */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-dim);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface);
  margin-block-end: var(--sp-4);
}
.hero__sep { color: var(--text-faint); }
.dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: pulse 2.4s var(--ease) infinite;
  flex: none;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}

.hero__name {
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-block-end: 0.35rem;
  background: linear-gradient(150deg, var(--text) 30%, var(--accent) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text);
  padding-block-end: 0.08em;
}
html[lang="fa"] .hero__name { letter-spacing: 0; }

.hero__role {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--accent);
  margin-block-end: var(--sp-4);
}

.hero__tagline {
  font-size: var(--fs-lg);
  color: var(--text-dim);
  max-inline-size: 56ch;
  margin-block-end: var(--sp-5);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-end: var(--sp-5);
}

.hero__socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.hero__socials a {
  display: inline-grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  transition: transform 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.hero__socials a:hover {
  transform: translateY(-3px);
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.hero__socials .icon { inline-size: 19px; block-size: 19px; }

/* portrait */
.portrait {
  position: relative;
  inline-size: clamp(150px, 20vw, 210px);
  aspect-ratio: 1;
  flex: none;
}
.portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
  position: relative;
  z-index: 1;
}
.portrait__ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px dashed var(--accent-line);
  animation: spin 30s linear infinite;
}
.portrait__ring::before,
.portrait__ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
}
.portrait__ring::before {
  inline-size: 9px; block-size: 9px;
  inset-block-start: 8%; inset-inline-end: 6%;
  box-shadow: 0 0 12px 2px var(--glow);
}
.portrait__ring::after {
  inline-size: 5px; block-size: 5px;
  inset-block-end: 14%; inset-inline-start: 4%;
  opacity: 0.7;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-block-start: clamp(2rem, 5vw, 3.5rem);
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.stats li {
  background: var(--surface);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  transition: background-color 0.25s var(--ease);
}
.stats li:hover { background: var(--surface-2); }
.stat__value {
  display: block;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin-block-start: 0.3rem;
}

/* ======================================================== 07 SECTIONS === */

/* ---- about */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, var(--sp-7));
  align-items: start;
}
.about__prose p {
  font-size: var(--fs-lg);
  color: var(--text-dim);
  margin-block-end: var(--sp-4);
}
.about__prose p:last-child { margin-block-end: 0; }
.about__prose strong { color: var(--text); font-weight: 600; }

.about__side { display: grid; gap: var(--sp-4); }

.deflist { display: grid; gap: 0.6rem; }
.deflist > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-base);
  padding-block-end: 0.6rem;
  border-block-end: 1px dashed var(--border);
}
.deflist > div:last-child { border-block-end: none; padding-block-end: 0; }
.deflist dt { color: var(--text-faint); }
.deflist dd { color: var(--text); font-weight: 600; }

.edu__degree { font-weight: 600; font-size: var(--fs-base); }
.edu__school { color: var(--accent); font-size: var(--fs-sm); margin-block-start: 0.15rem; }
.edu__period { color: var(--text-faint); font-size: var(--fs-sm); }

.langs { display: grid; gap: var(--sp-4); }
.lang__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  margin-block-end: 0.45rem;
}
.lang__name { font-weight: 600; font-size: var(--fs-base); }
.lang__level { color: var(--text-faint); font-size: var(--fs-sm); }
.lang__track {
  block-size: 6px;
  border-radius: var(--r-full);
  background: var(--border);
  overflow: hidden;
}
.lang__fill {
  display: block;
  block-size: 100%;
  inline-size: 0;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: inline-size 1.1s var(--ease-out);
}

/* ---- projects */
.projects { display: grid; gap: clamp(1rem, 2.5vw, var(--sp-5)); }

.project {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.25rem, 3vw, var(--sp-6));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 3vw, var(--sp-6));
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease);
}
.project::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  block-size: 100%;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.project:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.project:hover::before { opacity: 1; }

.project__head { min-inline-size: 0; }
.project__index {
  font-family: var(--font-latin);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  display: block;
  margin-block-end: var(--sp-2);
}
.project__name {
  font-size: var(--fs-xl);
  margin-block-end: 0.35rem;
}
.project__meta {
  font-size: var(--fs-sm);
  color: var(--accent);
  font-weight: 600;
  margin-block-end: var(--sp-2);
}
.project__period {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 0.2rem 0.65rem;
  margin-block-end: var(--sp-4);
  margin-inline-end: 0.5rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.project__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-block-start: var(--sp-2);
}
.project__link .icon { inline-size: 15px; block-size: 15px; }

.project__body { min-inline-size: 0; }
.project__summary {
  color: var(--text-dim);
  margin-block-end: var(--sp-4);
  font-size: var(--fs-md);
}
.project__highlights { display: grid; gap: 0.55rem; margin-block-end: var(--sp-4); }
.project__highlights li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  font-size: var(--fs-base);
  color: var(--text-dim);
}
.project__highlights li::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  margin-block-start: 0.62em;
}

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 0.28rem 0.7rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.project:hover .tag { border-color: var(--border-strong); }

/* other work */
.otherwork {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--sp-4);
}
.otherwork li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-4) var(--sp-5);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease-out);
}
.otherwork li:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.otherwork h4 { font-size: var(--fs-md); margin-block-end: 0.25rem; }
.otherwork p {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  margin-block-end: var(--sp-3);
}

/* ---- experience timeline */
.timeline {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 3vw, var(--sp-6));
  padding-inline-start: clamp(1.6rem, 4vw, 2.6rem);
}
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 0.7rem 1rem;
  inset-inline-start: 5px;
  inline-size: 2px;
  background: linear-gradient(180deg, var(--accent-line), var(--border) 45%, transparent);
}

.job { position: relative; }
.job::before {
  content: "";
  position: absolute;
  inset-block-start: 0.55rem;
  inset-inline-start: calc(-1 * clamp(1.6rem, 4vw, 2.6rem) + 0px);
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 2px solid var(--border-strong);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.job:hover::before { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.job--current::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.job__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
}
.job__role {
  font-size: var(--fs-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.badge {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-full);
  padding: 0.15rem 0.55rem;
}
html[lang="fa"] .badge { letter-spacing: 0; text-transform: none; font-size: var(--fs-xs); }

.job__period {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.job__company {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--accent);
  margin-block: 0.2rem 0.5rem;
}
.job__company span { color: var(--text-faint); font-weight: 500; }
.job__desc { color: var(--text-dim); max-inline-size: 78ch; }

/* ---- skills */
.skills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-4);
}
.skillgroup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--sp-5);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease);
}
.skillgroup:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.skillgroup__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-4);
}
.skillgroup__icon {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
  flex: none;
}
.skillgroup__icon .icon { inline-size: 19px; block-size: 19px; }
.skillgroup__title { font-size: var(--fs-md); }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.34rem 0.7rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
              background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.chip:hover {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

/* ================================================ 08 CONTACT & FOOTER === */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, var(--sp-7));
  align-items: start;
}
.contact__intro {
  font-size: var(--fs-lg);
  color: var(--text-dim);
  max-inline-size: 52ch;
  margin-block-end: var(--sp-5);
}
.contact__list { display: grid; gap: var(--sp-2); margin-block-end: var(--sp-5); }
.contact__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.contact__row:hover { border-color: var(--accent-line); background: var(--surface-2); }
.contact__row > .icon {
  inline-size: 18px;
  block-size: 18px;
  color: var(--accent);
  flex: none;
}
.contact__body { min-inline-size: 0; flex: 1; }
.contact__label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
html[lang="fa"] .contact__label { text-transform: none; letter-spacing: 0; }
.contact__value {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
  direction: ltr;
  text-align: start;
}
html[dir="rtl"] .contact__value { text-align: right; }
a.contact__value:hover { color: var(--accent); }

.copy-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  color: var(--text-faint);
  flex: none;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent-line); }
.copy-btn .icon { inline-size: 15px; block-size: 15px; }
.copy-btn .icon--check { display: none; }
.copy-btn.is-copied { color: var(--accent); border-color: var(--accent); }
.copy-btn.is-copied .icon--copy { display: none; }
.copy-btn.is-copied .icon--check { display: block; }

.contact__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.contact__form { display: grid; gap: var(--sp-4); }
.form__note {
  font-size: var(--fs-sm);
  color: var(--text-faint);
  margin-block-start: -0.6rem;
}
.field { display: grid; gap: 0.35rem; }
.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dim);
}
.field input,
.field textarea {
  inline-size: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: vertical; min-block-size: 110px; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }

.form__error {
  font-size: var(--fs-sm);
  color: #f87171;
  margin-block-start: -0.5rem;
}
[data-theme="light"] .form__error { color: #dc2626; }

.site-footer {
  border-block-start: 1px solid var(--border);
  background: var(--bg-alt);
  padding-block: var(--sp-5);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}
.site-footer__meta { font-variant-numeric: tabular-nums; }

.to-top {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 90;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease-out);
}
.to-top.is-visible { opacity: 1; transform: none; }
.to-top:hover { background: var(--accent-strong); }
.to-top .icon { inline-size: 20px; block-size: 20px; }

.noscript {
  padding-block: var(--sp-7);
  text-align: center;
}
.noscript h2 { margin-block-end: var(--sp-4); }
.noscript p { margin-block-end: var(--sp-3); color: var(--text-dim); }

/* ============================================= SHARED PAGE FURNITURE === */
/* Breadcrumbs and the prev/next pager started in case.css. The blog needs the
   same two components, so they live here and each page type only overrides its
   own accent colour. */

.crumbs {
  padding-block: var(--sp-5) 0;
  font-size: var(--fs-sm);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-faint);
}
.crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 32px;
}
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--accent); }
.crumbs .icon { inline-size: 13px; block-size: 13px; opacity: 0.55; }
.crumbs [aria-current="page"] { color: var(--text); font-weight: 600; }

.pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-block-end: clamp(1.5rem, 4vw, var(--sp-6));
}
.pager__link {
  display: grid;
  gap: 0.35rem;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease-out),
              background-color 0.25s var(--ease);
}
.pager__link:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
  color: var(--text);
  transform: translateY(-2px);
}
.pager__link--next { text-align: end; }
.pager__dir {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
html[lang="fa"] .pager__dir { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.pager__link--next .pager__dir { justify-content: flex-end; }
.pager__dir .icon { inline-size: 14px; block-size: 14px; }
.pager__link strong { font-size: var(--fs-lg); letter-spacing: -0.01em; }

@media (max-width: 620px) {
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager__link--next { text-align: start; }
  .pager__link--next .pager__dir { justify-content: flex-start; }
}

/* ================================================ 09 MOTION & UTILS === */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Résumé contact line — print only (see @media print for its styling) */
.print-contact { display: none; }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Latin runs inside Persian text keep their own font + LTR flow */
html[lang="fa"] .ltr {
  font-family: var(--font-latin);
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .lang__fill { transition: none; }
}

/* ====================================================== 10 RESPONSIVE === */
@media (max-width: 980px) {
  .about,
  .contact { grid-template-columns: minmax(0, 1fr); }
  .project { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .project__period { margin-block-end: var(--sp-2); }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .menu-btn { display: inline-grid; }
  .header-cv { display: none; }
  .brand__text small { display: none; }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: start;
  }
  .hero__aside { order: -1; }
  .portrait { inline-size: clamp(120px, 34vw, 160px); }
}

@media (max-width: 560px) {
  :root { --header-h: 60px; }
  .brand__text { display: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__cta .btn { flex: 1 1 100%; }
  .site-footer__inner { justify-content: center; text-align: center; }
  .to-top { inset-block-end: var(--sp-4); inset-inline-end: var(--sp-4); }
}

/* =========================================================== 11 PRINT === */
@page { margin: 11mm 12mm; }

@media print {
  :root {
    --bg: #fff; --bg-alt: #fff; --surface: #fff; --surface-2: #fff;
    --text: #111; --text-dim: #333; --text-faint: #555;
    --border: #ccc; --border-strong: #999;
    --accent: #0f766e; --accent-strong: #0f766e;
    --shadow: none; --shadow-sm: none; --shadow-lg: none;

    /* The screen scale is rem-based, so it has to be restated in points
       here — otherwise printed text comes out roughly 50% too large. */
    --fs-xs: 7pt;
    --fs-sm: 8pt;
    --fs-base: 9pt;
    --fs-md: 9.5pt;
    --fs-lg: 9.5pt;
    --fs-xl: 12pt;
    --fs-2xl: 13.5pt;
    --fs-3xl: 21pt;
  }

  /* A4 is narrow enough to hit the mobile breakpoints, which would stack
     everything into one very long column. Restore multi-column layouts. */
  .about { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0.9rem; }
  .about__side { gap: 0.5rem; }
  .skills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .otherwork { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .wrap { padding-inline: 0; max-inline-size: none; }

  .site-header, .mobile-nav, .scrim, .progress, .ambient, .to-top,
  .hero__cta, .hero__socials, .contact__form, .contact__actions,
  .copy-btn, .skip-link, .portrait__ring, .noscript,
  .contact__list, .contact__intro,
  .site-footer { display: none !important; }

  /* --- theme-supplied markup ---------------------------------------------
     Themes may replace the page shell (App\Support\Themes::view()), but the
     printed résumé is theme-independent: it is always laid out from <main>'s
     canonical section children. So print — not the theme stylesheet — owns the
     rules that undo a theme's shell. Two things are needed, and both are safe
     no-ops for themes that never emit these classes:

       1. Screen-only chrome a theme adds gets hidden, exactly like the default
          header and footer above.
       2. Layout wrappers a theme puts *between* <main> and the sections get
          `display: contents`, handing the sections back to <main> as direct
          flex children so the `order` rules below still reorder the résumé. */
  .n-rail__index, .n-rail__tools, .n-rail--sub { display: none !important; }
  .sg-chrome { display: none !important; }
  .n-bento, .n-bento__col { display: contents !important; }

  /* Scroll-reveal elements are opacity:0 until observed — without this, any
     section the visitor hadn't scrolled past prints as a blank gap. */
  .reveal { opacity: 1 !important; transform: none !important; }

  body { background: #fff; color: #111; font-size: 9pt; line-height: 1.45; }

  /* --- résumé contact line, directly under the name/title --- */
  .print-contact {
    display: block;
    font-size: 8.5pt;
    line-height: 1.5;
    color: #222;
    margin-block: 0.15rem 0.45rem;
  }
  /* Each item is isolated so Latin runs (phone, email, URLs) keep their own
     direction inside the Persian RTL line instead of being reordered. */
  .print-contact span {
    white-space: nowrap;
    unicode-bidi: isolate;
  }
  .print-contact span + span::before {
    content: " · ";
    color: #888;
    white-space: normal;
  }

  .section { padding-block: 0.9rem; break-inside: auto; }
  .section--alt::before, .section--alt::after { display: none; }
  .hero { padding-block: 0 0.9rem; }

  .hero__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .portrait { inline-size: 88px; }
  .portrait img { border: 1px solid #ccc; box-shadow: none; }

  /* The eyebrow becomes a plain availability note. Its location is dropped —
     the contact line right below already carries it. */
  .hero__eyebrow {
    border: none;
    background: none;
    padding: 0;
    margin-block-end: 0.15rem;
    font-size: 8.5pt;
    color: #555;
  }
  .hero__eyebrow .dot,
  .hero__eyebrow .hero__sep,
  .hero__eyebrow span:last-child { display: none; }

  /* Résumé convention puts employment history ahead of project write-ups.
     Reorder for paper only; the DOM (and the website) keeps projects first. */
  main { display: flex; flex-direction: column; }
  .hero       { order: 1; }
  #about      { order: 2; }
  #experience { order: 3; }
  #projects   { order: 4; }
  #skills     { order: 5; }

  .hero__name {
    -webkit-text-fill-color: #111;
    background: none;
    color: #111;
    font-size: 22pt;
  }
  .hero__role { font-size: 12pt; }
  .hero__tagline { font-size: 10.5pt; }

  .stats { border-color: #ccc; }
  .stats li { padding: 0.5rem; }
  .stat__value { font-size: 14pt; }

  .section__title { font-size: 14pt; }
  .kicker { display: none; }
  .section__head { margin-block-end: 0.6rem; }
  .section__head--sub { margin-block: 0.9rem 0.5rem; }

  .project, .skillgroup, .otherwork li, .card {
    border: 1px solid #ddd;
    box-shadow: none;
    break-inside: avoid;
    padding: 0.5rem 0.7rem;
  }
  .project { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 0.8rem; }
  .projects { gap: 0.4rem; }
  .project__highlights { gap: 0.15rem; margin-block-end: 0.4rem; }
  .project__summary { margin-block-end: 0.4rem; }
  .job, .card, .otherwork li { break-inside: avoid; }
  .timeline { gap: 0.5rem; padding-inline-start: 1.1rem; }
  .job::before { inset-inline-start: -1.1rem; }
  .job__desc { margin-block-start: 0.1rem; }
  .stats { margin-block-start: 0.6rem; }
  .stats li { padding: 0.4rem; }

  /* Keep the skills block whole so it can't strand a near-empty final page */
  #skills { break-inside: avoid; }
  .skills { gap: 0.4rem; }
  .skillgroup__head { margin-block-end: 0.35rem; }
  .skillgroup__icon { display: none; }
  .chips { gap: 0.25rem; }
  .chip { padding: 0.15rem 0.45rem; }
  .otherwork p { margin-block-end: 0.35rem; }
  .about__prose p { margin-block-end: 0.4rem; }

  a { color: #0f766e; text-decoration: none; }
  .project__link::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; }

  .lang__fill { background: #0f766e !important; }
  .site-footer { border-color: #ccc; padding-block: 0.6rem; }

  /* --- pagination: never orphan a heading from the block it introduces --- */
  h2, h3, h4 { break-after: avoid; break-inside: avoid; }
  .section__head, .section__head--sub { break-after: avoid; }
  .section { break-before: auto; }
  .project__summary, .job__company { break-after: avoid; }

  /* The whole contact section collapses to nothing useful on paper — the
     contact line in the header already carries it. Drop it entirely so the
     printed résumé ends on the last substantive section. */
  #contact { display: none !important; }
}

/* =============================================================================
   Server-rendered additions (Laravel build)
   ========================================================================== */

/* Successful contact-form submission */
.form__ok {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  padding: 0.6rem 0.8rem;
}

/* Keeps the résumé's Latin face resident on every page, in every theme.

   Web fonts are fetched lazily, on first use. A theme that swaps the screen
   font (Blueprint does) means Inter is never used on screen and therefore never
   downloaded — and then @media print, which deliberately keeps Inter's metrics,
   falls back to a system font and re-wraps every paragraph of the printed CV.
   This 1px probe uses Inter for real so the browser fetches it.

   It cannot be display:none or visibility:hidden — neither triggers a font
   load. Zero opacity and one pixel do. */
.font-probe {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-resume);
  font-size: 1px;
  line-height: 1;
}

/* Honeypot field: present in the DOM for bots, never shown to people.
   Off-screen rather than display:none, which some bots skip. */
.honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Field-level validation errors returned by the server */
.field .form__error { margin-block-start: 0.1rem; }

@media print {
  .form__ok, .honeypot, .font-probe { display: none !important; }
}

/* =============================================================================
   Project cards → case-study pages
   ========================================================================== */

/* The card is clickable through a stretched link on the title, keeping exactly
   one focusable anchor per card (no nested-link or duplicate-target problems). */
.project--linked { position: relative; }

.project__titlelink {
  color: inherit;
  text-decoration: none;
}
.project__titlelink::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.project__titlelink:hover { color: var(--accent); }
.project--linked:hover .project__name { color: var(--accent); }

/* Keep the external "live site" link clickable above the stretched overlay. */
.project__link { position: relative; z-index: 2; }

/* Focus ring belongs on the card, not the bare text. */
.project__titlelink:focus-visible { outline: none; }
.project--linked:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.project__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease-out);
}
html[dir="rtl"] .project__cta { transform: translateX(6px); }
.project--linked:hover .project__cta,
.project--linked:focus-within .project__cta {
  opacity: 1;
  transform: none;
}
.project__cta .icon { inline-size: 15px; block-size: 15px; }

/* On touch devices there is no hover, so always show the affordance. */
@media (hover: none) {
  .project__cta { opacity: 1; transform: none; }
}

/* Other-work cards link too */
.otherwork__item { position: relative; }
.otherwork__item h4 a {
  color: inherit;
  text-decoration: none;
}
.otherwork__item h4 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.otherwork__item:hover h4 a { color: var(--accent); }
.otherwork__item h4 a:focus-visible { outline: none; }
.otherwork__item:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media print {
  .project__cta { display: none !important; }
}