/* ============================================================
   MVEB — Selected Work
   Editorial portfolio. Bilingual FA/EN, direction-agnostic.
   All directional CSS uses logical properties so one sheet
   serves both /fa (rtl) and /en (ltr).
   ============================================================ */

/* ---------- 1. Fonts ---------- */

@font-face {
  font-family: 'Estedad';
  src: url('../fonts/Estedad-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */

:root {
  /* Light is the default plate. Dark is defined once below and
     applied via [data-theme] so a manual choice always wins over
     the OS preference. */
  --paper: #f1efea;
  --paper-deep: #e8e5de;
  --ink: #131211;
  --ink-soft: #6f6b63;
  --ink-faint: #a4a099;
  --rule: rgba(19, 18, 17, 0.13);
  --rule-strong: rgba(19, 18, 17, 0.28);
  --nav-ink: #f1efea;
  --shadow: rgba(19, 18, 17, 0.1);

  --font-latin: 'Geist', system-ui, sans-serif;
  --font-farsi: 'Estedad', system-ui, sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --stack: clamp(5rem, 12vw, 11rem);
  --maxw: 100rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}

/* Dark plate. Same relationships, inverted: the paper becomes the
   ink and the type is knocked back a touch from pure paper so large
   display sizes don't bloom on an OLED panel. */
[data-theme='dark'] {
  --paper: #121110;
  --paper-deep: #1d1b19;
  --ink: #ece8e1;
  --ink-soft: #9a938a;
  --ink-faint: #6b655d;
  --rule: rgba(236, 232, 225, 0.15);
  --rule-strong: rgba(236, 232, 225, 0.32);
  /* difference(#fef9f1, #121110) resolves to the dark plate's ink. */
  --nav-ink: #fef9f1;
  --shadow: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* No JS: still honour the OS preference. The inline boot script sets
   data-theme before paint, so this only ever applies as a fallback. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --paper: #121110;
    --paper-deep: #1d1b19;
    --ink: #ece8e1;
    --ink-soft: #9a938a;
    --ink-faint: #6b655d;
    --rule: rgba(236, 232, 225, 0.15);
    --rule-strong: rgba(236, 232, 225, 0.32);
    --nav-ink: #fef9f1;
    --shadow: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

/* Only the plate cross-fades. Everything else keeps its own timing,
   and a theme switch must never animate layout. */
body {
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* The hero is three lines of nowrap display type. Sizing it on width
   alone made it taller than the screen on every common laptop, so the
   size is min()'d against a share of the viewport height too: whichever
   of the two runs out first governs.

   The two languages need different numbers because their leading
   differs. Persian sets at 1.02 against Latin's 0.82, so the same font
   size costs Persian ~25% more vertical space — it gets the smaller
   share of both axes to land in the same place. */
html[lang='en'] {
  --font: var(--font-latin);
  --hero-size: clamp(3.2rem, min(15vw, 24vh), 15rem);
  --hero-track: -0.045em;
  --hero-lead: 0.82;
  --display-track: -0.035em;
}

html[lang='fa'] {
  --font: var(--font-farsi);
  --hero-size: clamp(3.4rem, min(13vw, 19vh), 12rem);
  --hero-track: -0.01em;
  --hero-lead: 1.02;
  --display-track: -0.005em;
}

/* ---------- 3. Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* The nav is fixed, so anchored sections need room or their heading
   lands underneath it. */
:target,
[id] {
  scroll-margin-block-start: clamp(5rem, 10vw, 7rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

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

/* Numerals stay Latin inside Persian pages where they're technical */
.num {
  font-family: var(--font-latin);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Latin fragments embedded in Persian copy */
.lat {
  font-family: var(--font-latin);
  direction: ltr;
  unicode-bidi: isolate;
}

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* ---------- 4. Preloader ---------- */

.loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--gutter);
  transition: transform 0.9s var(--ease), visibility 0.9s;
}

.js .loader {
  display: flex;
}

.js .loader[hidden] {
  display: flex;
  visibility: hidden;
  transform: translateY(-101%);
}

.loader__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.1rem clamp(1rem, 4vw, 4rem);
  margin-block-end: auto;
  padding-block-start: clamp(4rem, 12vh, 9rem);
  max-width: 46rem;
}

.loader__item {
  font-size: clamp(0.8rem, 0.75rem + 0.3vw, 1rem);
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.4s ease, transform 0.4s var(--ease);
}

.loader__item.is-lit {
  opacity: 1;
  transform: none;
}

.loader__meter {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-block-start: 1px solid var(--rule);
  padding-block-start: 1rem;
}

.loader__count {
  font-family: var(--font-latin);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: clamp(3.5rem, 14vw, 11rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  direction: ltr;
}

.loader__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  padding-block-end: 0.6rem;
}

html[lang='fa'] .loader__label {
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- 5. Nav ---------- */

.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  mix-blend-mode: difference;
  pointer-events: none;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1rem, 2.5vw, 1.9rem);
  color: var(--nav-ink);
}

.nav a,
.nav button {
  pointer-events: auto;
}

.nav__name {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  font-size: 0.85rem;
}

.nav__link {
  position: relative;
  padding-block: 0.2rem;
}

.nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--origin-end, right);
  transition: transform 0.45s var(--ease);
}

html[dir='ltr'] .nav__link {
  --origin-end: right;
  --origin-start: left;
}

html[dir='rtl'] .nav__link {
  --origin-end: left;
  --origin-start: right;
}

.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
  transform-origin: var(--origin-start);
}

.nav__toggle {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  transition: background 0.3s ease, color 0.3s ease;
}

.nav__toggle:hover {
  background: currentColor;
}

.nav__toggle:hover span {
  mix-blend-mode: difference;
}

/* ---------- 6. Hero ---------- */

.hero {
  padding-block: clamp(6rem, 14vh, 9rem) clamp(3rem, 8vw, 7rem);
}

/* The masks carry equal positive padding and negative margin so the ink
   room costs no layout height. As block siblings their negative margins
   would collapse to one, leaving the hero ~0.36em taller per line —
   enough to push it back off short screens. In a flex column margins
   don't collapse, so both apply and the two cancel exactly. */
.hero h1 {
  display: flex;
  flex-direction: column;
}

.hero__line {
  display: block;
  font-size: var(--hero-size);
  font-weight: 600;
  line-height: var(--hero-lead);
  letter-spacing: var(--hero-track);
  white-space: nowrap;
}

html[lang='fa'] .hero__line {
  font-weight: 800;
}

/* Staggered entrance, one line at a time.
   Scoped to .js so a blocked script leaves the hero visible
   rather than parked off-screen. */
.hero__mask {
  display: block;
  overflow: hidden;
  /* `em` here resolves against the h1, not the display size, so the
     room has to be computed from --hero-size directly. Persian ink
     (diacritics above, descenders below) runs ~15% past the line box
     at this leading; 18% leaves a margin. */
  padding-block: calc(var(--hero-size) * 0.18);
  margin-block: calc(var(--hero-size) * -0.18);
}

.js .hero__line {
  /* 102% cleared the old, tighter mask. With the ink padding above it
     has to travel further or the line peeks out along the bottom edge. */
  transform: translateY(140%);
  transition: transform 1s var(--ease);
}

.js.is-ready .hero__line {
  transform: none;
}

.js.is-ready .hero__mask:nth-child(2) .hero__line {
  transition-delay: 0.08s;
}

.js.is-ready .hero__mask:nth-child(3) .hero__line {
  transition-delay: 0.16s;
}

/* ---------- 7. Section scaffold (label + content) ---------- */

.section {
  padding-block: var(--stack);
  border-block-start: 1px solid var(--rule);
}

.section__grid {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) minmax(0, 4fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}

.section__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  padding-block-start: 0.5rem;
  position: sticky;
  inset-block-start: clamp(4.5rem, 9vw, 6rem);
}

html[lang='fa'] .section__label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
}

/* ---------- 8. About block ---------- */

.about__body {
  max-width: 46rem;
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.9rem);
  line-height: 1.45;
  letter-spacing: var(--display-track);
}

html[lang='fa'] .about__body {
  line-height: 1.85;
}

.about__body p + p {
  margin-block-start: 1.4em;
}

/* ---------- 9. Work list ---------- */

.work__list {
  border-block-start: 1px solid var(--rule);
}

.work__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(0.85rem, 1.8vw, 1.5rem);
  border-block-end: 1px solid var(--rule);
  position: relative;
  transition: opacity 0.4s ease;
}

.work__title {
  font-size: clamp(1.4rem, 1rem + 2.6vw, 3.6rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--display-track);
  transition: transform 0.55s var(--ease);
}

html[lang='fa'] .work__title {
  font-weight: 700;
  line-height: 1.35;
}

.work__row:hover .work__title {
  transform: translateX(var(--nudge, 1.5rem));
}

html[dir='rtl'] .work__row {
  --nudge: -1.5rem;
}

html[dir='ltr'] .work__row {
  --nudge: 1.5rem;
}

.work__meta {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  text-transform: uppercase;
  white-space: nowrap;
}

html[lang='fa'] .work__meta {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
}

/* Dim siblings on hover — the row you're on stays full strength */
.work__list:hover .work__row:not(:hover) {
  opacity: 0.35;
}

/* Cursor-follow image reveal (desktop only, wired in main.js) */
.reveal {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 60;
  width: clamp(14rem, 22vw, 22rem);
  aspect-ratio: 16 / 11;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 0.35s ease, transform 0.5s var(--ease);
  overflow: hidden;
  background: var(--paper-deep);
}

.reveal.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 10. History ---------- */

.history__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: 1rem;
  padding-block: clamp(1rem, 2vw, 1.6rem);
  border-block-end: 1px solid var(--rule);
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1.05rem);
}

.history__row:first-child {
  border-block-start: 1px solid var(--rule);
}

.history__org {
  font-weight: 500;
}

.history__row span:not(.history__org) {
  color: var(--ink-soft);
}

/* ---------- 11. Skills ---------- */

.skills__list {
  border-block-start: 1px solid var(--rule);
}

.skills__item {
  padding-block: clamp(0.7rem, 1.4vw, 1.1rem);
  border-block-end: 1px solid var(--rule);
  font-size: clamp(1.05rem, 0.9rem + 1vw, 1.75rem);
  font-weight: 500;
  letter-spacing: var(--display-track);
}

html[lang='fa'] .skills__item {
  font-weight: 600;
}

/* ---------- 12. Contact ---------- */

.contact__lines a {
  display: inline-block;
  font-size: clamp(1.2rem, 0.9rem + 2vw, 2.6rem);
  font-weight: 500;
  letter-spacing: var(--display-track);
  line-height: 1.3;
  position: relative;
}

.contact__lines a::after {
  content: '';
  position: absolute;
  inset-block-end: 0.12em;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--origin-end, right);
  transition: transform 0.45s var(--ease);
}

.contact__lines a:hover::after {
  transform: scaleX(1);
  transform-origin: var(--origin-start, left);
}

html[dir='ltr'] .contact__lines a {
  --origin-end: right;
  --origin-start: left;
}

html[dir='rtl'] .contact__lines a {
  --origin-end: left;
  --origin-start: right;
}

.contact__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-block-start: clamp(2rem, 5vw, 3.5rem);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.contact__socials a:hover {
  color: var(--ink);
}

/* ---------- 13. Footer ---------- */

.foot {
  border-block-start: 1px solid var(--rule);
  padding-block: 2rem clamp(2rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.foot a:hover {
  color: var(--ink);
}

/* ---------- 14. Stickers ---------- */

.stickers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.sticker {
  position: absolute;
  width: clamp(4.5rem, 9vw, 8rem);
  will-change: transform;
}

.sticker--spin {
  animation: spin 22s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- 15. Project page ---------- */

.proj__head {
  padding-block: clamp(7rem, 18vh, 11rem) clamp(2rem, 5vw, 4rem);
}

.proj__title {
  font-size: clamp(2.4rem, 8vw, 7rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: var(--hero-track);
  max-width: 18ch;
}

html[lang='fa'] .proj__title {
  font-weight: 800;
  line-height: 1.25;
}

.proj__sub {
  margin-block-start: 1rem;
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.4rem);
  color: var(--ink-soft);
}

.proj__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.5rem 2rem;
  border-block: 1px solid var(--rule);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.proj__fact dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-block-end: 0.5rem;
}

html[lang='fa'] .proj__fact dt {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
}

.proj__fact dd {
  margin: 0;
  font-size: 0.95rem;
}

.proj__body {
  padding-block: var(--stack);
}

.proj__desc {
  max-width: 42rem;
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.5;
}

html[lang='fa'] .proj__desc {
  line-height: 1.9;
}

.proj__figure {
  margin-block-start: clamp(3rem, 8vw, 6rem);
  background: var(--paper-deep);
}

.proj__figure img {
  width: 100%;
}

.proj__placeholder {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html[lang='fa'] .proj__placeholder {
  text-transform: none;
  letter-spacing: 0;
}

.proj__next {
  border-block-start: 1px solid var(--rule);
  padding-block: var(--stack);
}

.proj__next-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}

html[lang='fa'] .proj__next-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
}

.proj__next-title {
  display: block;
  margin-block-start: 1rem;
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--hero-track);
  transition: transform 0.55s var(--ease);
}

html[lang='fa'] .proj__next-title {
  font-weight: 800;
  line-height: 1.3;
}

.proj__next:hover .proj__next-title {
  transform: translateX(var(--nudge, 1.5rem));
}

html[dir='rtl'] .proj__next {
  --nudge: -1.5rem;
}

html[dir='ltr'] .proj__next {
  --nudge: 1.5rem;
}

/* ---------- 16. About page ---------- */

/* Capped at the portrait's native 512px so the frame never shows
   a strip of backing colour beside the image. Raise this only if
   you re-export the portrait larger. */
.bio__portrait {
  margin-block: clamp(2rem, 6vw, 4rem);
  max-width: 32rem;
  background: var(--paper-deep);
}

.bio__portrait img {
  width: 100%;
}

.bio__body {
  max-width: 42rem;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.65;
}

html[lang='fa'] .bio__body {
  line-height: 2.05;
}

.bio__body p + p {
  margin-block-start: 1.5em;
}

/* ---------- 17. Scroll reveal ---------- */

/* Same guard: without JS these stay visible. */
.js .rise {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.8s ease, transform 0.8s var(--ease);
}

.js .rise.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- 20. Skip link ---------- */

.skip {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 300;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.skip:focus-visible {
  transform: none;
}

/* ---------- 21. Theme toggle ---------- */

.nav__theme {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0;
  transition: background 0.3s ease, color 0.3s ease;
}

.nav__theme:hover {
  background: currentColor;
}

.nav__theme:hover svg {
  mix-blend-mode: difference;
}

/* One icon, two states: the sun shows on the light plate, the moon
   on the dark one. Both live in the SVG so there is nothing to load
   on switch. */
.ico-moon {
  display: none;
}

[data-theme='dark'] .ico-sun {
  display: none;
}

[data-theme='dark'] .ico-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .ico-sun {
    display: none;
  }
  html:not([data-theme]) .ico-moon {
    display: block;
  }
}

/* ---------- 22. Services ---------- */

.svc__lead {
  max-width: 40rem;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-block-end: clamp(2.5rem, 6vw, 4.5rem);
}

html[lang='fa'] .svc__lead {
  line-height: 1.9;
}

.svc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(2rem, 3vw, 3rem);
  border-block-start: 1px solid var(--rule);
  padding-block-start: clamp(2rem, 4vw, 3.5rem);
}

.svc__n {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin-block-end: 1rem;
}

.svc__title {
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.7rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--display-track);
}

html[lang='fa'] .svc__title {
  font-weight: 700;
  line-height: 1.5;
}

.svc__body {
  margin-block-start: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

html[lang='fa'] .svc__body {
  line-height: 2;
}

.svc__points {
  margin-block-start: 1.4rem;
  border-block-start: 1px solid var(--rule);
  font-size: 0.85rem;
}

.svc__points li {
  padding-block: 0.6rem;
  border-block-end: 1px solid var(--rule);
  color: var(--ink-soft);
  display: flex;
  gap: 0.6rem;
}

.svc__points li::before {
  content: '—';
  color: var(--ink-faint);
  flex: none;
}

/* ---------- 23. Work filters ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: clamp(1.75rem, 4vw, 2.75rem);
}

.filter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.filter:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.filter[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.filter__n {
  font-size: 0.7rem;
  opacity: 0.6;
}

/* Filtered-out rows leave the flow entirely so the rules between
   rows stay continuous. */
.work__row[hidden] {
  display: none;
}

.work__empty {
  padding-block: 2.5rem;
  color: var(--ink-faint);
  font-size: 0.9rem;
}

/* ---------- 24. Breadcrumb ---------- */

.crumb {
  padding-block-start: clamp(6rem, 14vh, 8.5rem);
  display: flex;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.crumb a:hover {
  color: var(--ink);
}

.crumb + .proj__head {
  padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

/* ---------- 25. Call to action ---------- */

.cta__title {
  font-size: clamp(1.6rem, 1.1rem + 3vw, 3.6rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--display-track);
}

html[lang='fa'] .cta__title {
  font-weight: 700;
  line-height: 1.45;
}

.cta__body {
  margin-block-start: 1.1rem;
  max-width: 34rem;
  font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.15rem);
  line-height: 1.65;
  color: var(--ink-soft);
}

html[lang='fa'] .cta__body {
  line-height: 2;
}

.cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: clamp(2rem, 4vw, 3rem);
}

.cta__btn {
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0.7rem 1.5rem;
  font-size: 0.9rem;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s var(--ease);
}

.cta__btn:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}

.cta__btn--solid {
  background: var(--ink);
  color: var(--paper);
}

.cta__btn--solid:hover {
  background: transparent;
  color: var(--ink);
}

/* ---------- 26. Project category eyebrow ---------- */

.proj__cat {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-block-end: 1rem;
}

html[lang='fa'] .proj__cat {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
}

/* ---------- 27. Reveal card depth ---------- */

.reveal {
  box-shadow: 0 1.5rem 3rem var(--shadow);
}

/* ---------- 28. Project sections ---------- */

.proj__sections {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  max-width: 42rem;
}

.proj__sections-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-block-end: 1.2rem;
}

html[lang='fa'] .proj__sections-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
}

.proj__sections-list {
  border-block-start: 1px solid var(--rule);
}

.proj__sections-list li {
  display: flex;
  gap: 0.85rem;
  padding-block: clamp(0.6rem, 1.2vw, 0.9rem);
  border-block-end: 1px solid var(--rule);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
}

.proj__sections-list li::before {
  content: '—';
  color: var(--ink-faint);
  flex: none;
}

/* ---------- 29. Justified prose ---------- */

/* Justification only earns its keep on a measure wide enough to absorb
   the extra word spacing, so it is switched off on narrow screens.
   `text-wrap: pretty` and hyphenation keep the rivers under control —
   Persian in particular goes ragged fast without them. */
.about__body,
.bio__body,
.proj__desc,
.svc__body,
.svc__lead,
.cta__body {
  text-align: justify;
  text-justify: inter-word;
  text-wrap: pretty;
}

html[lang='en'] .about__body,
html[lang='en'] .bio__body,
html[lang='en'] .proj__desc,
html[lang='en'] .svc__body,
html[lang='en'] .cta__body {
  hyphens: auto;
}

@media (max-width: 34rem) {
  .about__body,
  .bio__body,
  .proj__desc,
  .svc__body,
  .svc__lead,
  .cta__body {
    text-align: start;
  }
}

/* ---------- 18. Responsive ---------- */

@media (max-width: 62rem) {
  .stickers {
    display: none;
  }

  .section__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .section__label {
    position: static;
    padding-block-start: 0;
  }

  .history__row {
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem 1rem;
  }
}

@media (max-width: 40rem) {
  .loader__list {
    grid-template-columns: 1fr;
  }

  .loader__item:nth-child(n + 8) {
    display: none;
  }

  .hero__line {
    white-space: normal;
  }

  .history__row {
    grid-template-columns: 1fr;
  }

  .work__row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .work__row:hover .work__title {
    transform: none;
  }

  .filters {
    gap: 0.4rem;
  }

  .filter {
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
  }

  .cta__btn {
    flex: 1 1 100%;
    text-align: center;
  }

  /* The "Services" link is the first thing to go when the bar gets
     tight — it is one scroll away in the page anyway. */
  .nav__link--wide {
    display: none;
  }
}

/* ---------- 19. Motion & print ---------- */

@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;
  }

  .hero__line,
  .rise {
    transform: none;
    opacity: 1;
  }

  .reveal {
    display: none;
  }
}

@media print {
  .loader,
  .nav,
  .reveal,
  .stickers,
  .skip,
  .filters,
  .cta__row {
    display: none !important;
  }

  body {
    background: #fff;
  }
}