/* ============================================================
   ALT F4 — DESIGN SYSTEM
   MATTE BLACK / GRAPHITE / CHROME / WARM WHITE
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  /* surfaces */
  --bg: #080808;
  --bg-2: #0c0c0c;
  --bg-3: #111111;
  --surface: #131313;
  --surface-2: #181818;
  --surface-3: #1f1f1f;

  /* lines */
  --line: rgba(216, 213, 203, 0.08);
  --line-strong: rgba(216, 213, 203, 0.16);
  --line-soft: rgba(216, 213, 203, 0.045);

  /* text */
  --text: #f2f0ea;
  --text-2: #c8c8c8;
  --text-3: #92908a;
  --text-4: #5c5a55;

  /* chrome */
  --chrome: #c8c8c8;
  --chrome-hi: #e6e4dd;
  --chrome-lo: #6f6f6f;

  /* accent — warm silver */
  --accent: #d9d6cc;
  --accent-dim: #9a978e;

  /* status */
  --ok: #b9c4b1;
  --warn: #cfc0a3;

  /* type */
  --font-display: "Bricolage Grotesque", "Schibsted Grotesk", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-fa: "Alexandria", "Vazirmatn", system-ui, sans-serif;

  /* scale */
  --fs-giant: clamp(2.9rem, 9.5vw, 8.6rem);
  --fs-hero: clamp(2.5rem, 7vw, 6.2rem);
  --fs-h1: clamp(2.1rem, 5vw, 4.4rem);
  --fs-h2: clamp(1.7rem, 3.6vw, 3rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.5rem);
  --fs-body: 1.0rem;
  --fs-lead: clamp(1.05rem, 1.6vw, 1.28rem);
  --fs-small: 0.86rem;
  --fs-meta: 0.66rem;
  --fs-micro: 0.6rem;

  /* rhythm */
  --pad: clamp(1.25rem, 4.5vw, 4.5rem);
  --section: clamp(5.5rem, 12vw, 11rem);
  --gutter: clamp(2rem, 5vw, 5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4), 0 24px 60px -30px rgba(0, 0, 0, 0.85);
  --shadow-2: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}

[data-theme="light"] {
  --bg: #f3f0e8;
  --bg-2: #edeae1;
  --bg-3: #e6e2d7;
  --surface: #faf8f2;
  --surface-2: #f1eee5;
  --surface-3: #e9e5da;

  --line: rgba(24, 22, 18, 0.12);
  --line-strong: rgba(24, 22, 18, 0.22);
  --line-soft: rgba(24, 22, 18, 0.06);

  --text: #17140f;
  --text-2: #3d3a33;
  --text-3: #6f6a5f;
  --text-4: #a09b8e;

  --chrome: #7c7a72;
  --chrome-hi: #5c5a52;
  --chrome-lo: #a5a29a;

  --accent: #27241e;
  --accent-dim: #6b675d;

  --ok: #55654a;
  --warn: #7c6a3f;

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.06), 0 24px 60px -34px rgba(60, 50, 30, 0.35);
  --shadow-2: 0 40px 90px -44px rgba(60, 50, 30, 0.4);
}

/* Persian / Arabic type switch — intentionally designed, not mirrored */
html[lang="fa"] {
  --font-display: var(--font-fa);
  --font-body: var(--font-fa);
}
/* Arabic script needs more air: slightly larger, taller lines, no letterspacing */
html[lang="fa"] .display { letter-spacing: 0; line-height: 1.24; }
html[lang="fa"] .text-giant,
html[lang="fa"] .hero-name { line-height: 1.28; }
html[lang="fa"] body { line-height: 1.9; font-size: calc(var(--fs-body) * 1.04); }
html[lang="fa"] .lead { line-height: 1.95; }
html[lang="fa"] .work-title,
html[lang="fa"] .wr-title,
html[lang="fa"] .lr-title,
html[lang="fa"] .svc-name { letter-spacing: 0; line-height: 1.3; }
html[lang="fa"] .eyebrow { letter-spacing: 0.06em; }
html[lang="fa"] .hero-name { letter-spacing: 0; }
html[lang="fa"] .prose h2,
html[lang="fa"] .prose h3 { letter-spacing: 0; line-height: 1.4; }
html[lang="fa"] .prose { line-height: 2; }
html[lang="fa"] .prose blockquote { line-height: 1.9; }

html[lang="fa"] .meta,
html[lang="fa"] .eyebrow,
html[lang="fa"] .nav-link,
html[lang="fa"] .hero-kicker,
html[lang="fa"] .hero-roles,
html[lang="fa"] .hero-scroll,
html[lang="fa"] .status,
html[lang="fa"] .tag,
html[lang="fa"] .btn,
html[lang="fa"] .btn-box,
html[lang="fa"] .filter-btn,
html[lang="fa"] .lr-date,
html[lang="fa"] .cr-label,
html[lang="fa"] .svc-num,
html[lang="fa"] .m-num,
html[lang="fa"] .loader-sub,
html[lang="fa"] .footer-col h4,
html[lang="fa"] .aside-block h4,
html[lang="fa"] .dm .k,
html[lang="fa"] .note-strip .k,
html[lang="fa"] .show-cell .cap .c,
html[lang="fa"] .svc-list li span:last-child,
html[lang="fa"] .lang-switch a {
  font-family: var(--font-fa);
  letter-spacing: 0.02em;
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(58% 34% at 50% -4%, rgba(214, 212, 202, 0.045), transparent 70%),
    radial-gradient(100% 58% at 50% 112%, rgba(0, 0, 0, 0.5), transparent 75%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}
[data-theme="light"] body {
  background-image:
    radial-gradient(58% 34% at 50% -4%, rgba(255, 252, 244, 0.55), transparent 70%),
    radial-gradient(100% 58% at 50% 112%, rgba(120, 105, 80, 0.12), transparent 75%);
}

/* theme switch — surfaces cross-fade instead of snapping */
.empty-state, .frame, .note-strip, .work-row, .list-row, .skill-row,
.svc-row, .build-row, .connect-row, .show-cell, .tag,
.prose blockquote, .prose pre, .prose code, .footer, .mobile-menu {
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease), color 0.5s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  body,
  .empty-state, .frame, .note-strip, .work-row, .list-row, .skill-row,
  .svc-row, .build-row, .connect-row, .show-cell, .tag,
  .prose blockquote, .prose pre, .prose code, .footer, .mobile-menu {
    transition: none;
  }
}

::selection { background: var(--chrome-hi); color: #0a0a0a; }
[data-theme="light"] ::selection { background: #17140f; color: #f3f0e8; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

:focus-visible { outline: 1px solid var(--text-2); outline-offset: 3px; }

/* compact controls — tighter, clearly visible focus ring */
.btn:focus-visible, .btn-box:focus-visible, .icon-btn:focus-visible,
.nav-link:focus-visible, .connect-row:focus-visible, .show-cell:focus-visible,
.wr-go:focus-visible, .b-go:focus-visible, .filter-btn:focus-visible,
.burger:focus-visible, .skip-link:focus-visible { outline-offset: 2px; }

.btn-box:active { transform: translateY(1px); }
.wr-go:active, .b-go:active { transform: translateY(1px); }

/* skip link */
.skip-link {
  position: fixed; top: -100px; inset-inline-start: 1rem; z-index: 300;
  background: var(--text); color: var(--bg);
  padding: 0.7rem 1.1rem; font-family: var(--font-mono);
  font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase;
  transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- atmosphere ---------- */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
[data-theme="light"] .grain { opacity: 0.05; mix-blend-mode: multiply; }

.vignette {
  position: fixed; inset: 0; z-index: 59; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 8%, transparent 55%, rgba(0, 0, 0, 0.42) 100%);
}
[data-theme="light"] .vignette { opacity: 0.55; }

/* ---------- type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 350;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.display em { font-style: normal; color: var(--text-2); }

h1, h2, h3, h4 { font-weight: 400; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-3);
}
[dir="rtl"] .eyebrow { letter-spacing: 0.08em; }
.eyebrow::before {
  content: ""; width: 34px; height: 1px; background: var(--line-strong);
}
[dir="rtl"] .eyebrow::before { order: 2; }
[dir="rtl"] .eyebrow::after { order: 1; content: ""; width: 0; }

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-4);
}
.lead { font-size: var(--fs-lead); color: var(--text-2); line-height: 1.78; max-width: 62ch; }
.muted { color: var(--text-3); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: 1680px; margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section); position: relative; }
.section.tight { padding-block: calc(var(--section) * 0.6); }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.section-head .display { font-size: var(--fs-h1); }
.section-head .eyebrow { margin-bottom: 1.1rem; }
/* small screens: let the action wrap under the title instead of overflowing */
@media (max-width: 640px) {
  .section-head { flex-wrap: wrap; gap: 1.1rem 1.6rem; }
}

.hairline { border: 0; border-top: 1px solid var(--line); }
.hairline-v { border: 0; border-inline-start: 1px solid var(--line); }

/* ---------- buttons / links ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text);
  padding: 0.35rem 0;
  white-space: nowrap;
}
html[lang="fa"] .btn { font-family: var(--font-fa); letter-spacing: 0.02em; font-size: 0.82rem; }
.btn .btn-line {
  position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: var(--line-strong);
  transform-origin: right; transition: transform 0.5s var(--ease);
}
.btn .btn-line::after {
  content: ""; position: absolute; inset: 0; background: var(--chrome-hi);
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease);
}
.btn:hover .btn-line::after { transform: scaleX(1); }
.btn .btn-arrow { transition: transform 0.45s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(5px); }
[dir="rtl"] .btn:hover .btn-arrow { transform: translateX(-5px); }

.btn-box {
  display: inline-flex; align-items: center; gap: 0.85rem;
  border: 1px solid var(--line-strong);
  padding: 0.95rem 1.6rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
html[lang="fa"] .btn-box { font-family: var(--font-fa); letter-spacing: 0.02em; font-size: 0.8rem; }
.btn-box:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-box .btn-arrow { transition: transform 0.45s var(--ease); }
.btn-box:hover .btn-arrow { transform: translateX(4px); }
[dir="rtl"] .btn-box:hover .btn-arrow { transform: translateX(-4px); }

.link-quiet {
  position: relative; color: var(--text-2); font-size: var(--fs-small);
  padding-bottom: 3px;
}
.link-quiet::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--line-strong); transform: scaleX(0.3); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.link-quiet:hover::after { transform: scaleX(1); }

/* ---------- status marks ---------- */
.status {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-3);
}
html[lang="fa"] .status { font-family: var(--font-fa); letter-spacing: 0.06em; }
.status::before { content: ""; width: 5px; height: 5px; background: var(--text-4); border-radius: 50%; }
.status.live::before { background: var(--ok); }
.status.dev::before { background: var(--warn); }
.status.exp::before { background: var(--chrome); }
.status.archived::before { background: var(--text-4); }

/* ---------- reveal motion ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: opacity, transform, filter;
}
html.js [data-reveal].in { opacity: 1; transform: none; filter: none; }

/* masked hero headline reveal */
[data-hero-reveal] .mline { display: inline-block; overflow: hidden; vertical-align: top; }
[data-hero-reveal] .mword {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.95s var(--ease);
  transition-delay: calc(0.1s + var(--d, 0s));
}
html.js body.revealed [data-hero-reveal] .mword { transform: translateY(0); }
html:not(.js) [data-hero-reveal] .mword { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  [data-hero-reveal] .mword { transform: none; transition: none; }
}

/* ============================================================
   LOADER — signature brand intro
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: #040404;
  display: grid; place-items: center;
  transition: opacity 0.75s var(--ease), visibility 0.75s;
}
.loader::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.loader-halo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 44% at 50% 46%, rgba(214, 212, 202, 0.07), transparent 62%),
    radial-gradient(130% 95% at 50% 108%, transparent 52%, rgba(0, 0, 0, 0.65) 100%);
}
.loader-inner { text-align: center; position: relative; }
.loader-mark {
  position: relative;
  width: 72px; height: 72px; margin: 0 auto 1.5rem;
  animation: markIn 0.9s cubic-bezier(0.72, 0, 0.16, 1) both;
}
.loader-mark svg, .loader-mark img { width: 100%; height: 100%; display: block; }
.loader-mark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(240, 238, 230, 0.5) 50%, transparent 58%);
  mix-blend-mode: screen;
  -webkit-mask: url("../assets/logo/logo.svg") center / contain no-repeat;
  mask: url("../assets/logo/logo.svg") center / contain no-repeat;
  transform: translateX(-80%);
  animation: markSweep 0.55s var(--ease-io) 0.48s both;
  pointer-events: none;
}
.loader-word {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 500;
  letter-spacing: var(--lw-to, 0.46em); text-transform: uppercase;
  color: var(--text);
  padding-inline-start: 0.46em;
  --lw-from: 0.72em; --lw-to: 0.46em;
  opacity: 0; transform: translateY(12px);
  animation: wordIn 0.55s var(--ease) 0.55s forwards;
}
html[lang="fa"] .loader-word { font-size: 1.1rem; --lw-from: 0.3em; --lw-to: 0.1em; }
.loader-word span:last-child { color: var(--text-3); }
.loader-rule {
  width: 0; height: 1px; margin: 1.15rem auto;
  background: linear-gradient(90deg, transparent, var(--chrome) 25%, var(--chrome-hi) 50%, var(--chrome) 75%, transparent);
  animation: ruleGrow 0.5s var(--ease) 0.75s forwards;
}
.loader-sub {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--ls-to, 0.4em); text-transform: uppercase; color: var(--text-4);
  margin-top: 0.15rem;
  --ls-from: 0.62em; --ls-to: 0.4em;
  opacity: 0; transform: translateY(8px);
  animation: subIn 0.5s var(--ease) 0.88s forwards;
}
html[lang="fa"] .loader-sub { --ls-from: 0.16em; --ls-to: 0.05em; font-size: 0.66rem; }
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader.done .loader-inner { transform: scale(1.02); transition: transform 0.7s var(--ease); }
/* instant hide when the signature intro already played this session */
.loader.skip { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.loader.skip .loader-inner { transform: none; transition: none; }

@keyframes markIn {
  0% { opacity: 0; transform: scale(0.88) rotate(0deg); filter: blur(10px); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(360deg); filter: blur(0); }
}
@keyframes markSweep { from { transform: translateX(-80%); } to { transform: translateX(80%); } }
@keyframes wordIn { from { opacity: 0; transform: translateY(12px); letter-spacing: var(--lw-from); } to { opacity: 1; transform: none; letter-spacing: var(--lw-to); } }
@keyframes subIn { from { opacity: 0; transform: translateY(8px); letter-spacing: var(--ls-from); } to { opacity: 1; transform: none; letter-spacing: var(--ls-to); } }
@keyframes ruleGrow { to { width: 230px; } }
@media (prefers-reduced-motion: reduce) {
  .loader-mark { animation: none; opacity: 1; filter: none; }
  .loader-mark::after { animation: none; opacity: 0; }
  .loader-word, .loader-sub { animation: none; opacity: 1; transform: none; }
  .loader-rule { animation: none; width: 230px; }
  .loader { transition: opacity 0.3s linear, visibility 0.3s; }
  .loader.done .loader-inner { transform: none; transition: none; }
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
/* on the homepage the un-scrolled header floats over the dark photograph —
   keep its controls light in both themes until the scrolled state takes over */
body[data-page="home"] .site-header:not(.scrolled) {
  --text: #f2f0ea;
  --text-2: #c8c8c8;
  --text-3: #a5a39d;
  --text-4: #8a8880;
  --line-strong: rgba(216, 213, 203, 0.3);
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border-bottom-color: var(--line-strong);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.7);
}
[data-theme="light"] .site-header.scrolled {
  background: color-mix(in srgb, var(--bg-2) 84%, transparent);
  box-shadow: 0 24px 60px -40px rgba(60, 50, 30, 0.45);
}

.header-inner {
  display: flex; align-items: center;
  gap: clamp(1.6rem, 4vw, 3.6rem);
  padding-block: 1.2rem;
  transition: padding 0.5s var(--ease);
}
.site-header.scrolled .header-inner { padding-block: 0.68rem; }

.brand { display: inline-flex; align-items: center; gap: 0.85rem; flex-shrink: 0; }
.brand-mark { width: 26px; height: 26px; transition: transform 0.6s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-8deg); }
.brand-word {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 500;
  letter-spacing: 0.36em; text-transform: uppercase;
}
html[lang="fa"] .brand-word { font-size: 1rem; letter-spacing: 0.12em; }
.brand-word span { color: var(--text-3); }

.main-nav {
  display: flex; align-items: center; gap: clamp(1.2rem, 2.5vw, 2.4rem);
  padding-inline-start: clamp(1.2rem, 2.5vw, 2.4rem);
  border-inline-start: 1px solid var(--line);
  position: relative;
}
.nav-link {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-3);
  padding: 0.45rem 0;
  transition: color 0.35s var(--ease), opacity 0.35s var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--chrome-hi); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--text); }
.nav-link.active::after { transform: scaleX(1); }
html[lang="fa"] .nav-link { font-size: 0.78rem; letter-spacing: 0.02em; font-weight: 500; }

.header-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 1rem; }

/* refined language switch */
.lang-switch {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.lang-switch a {
  position: relative;
  padding: 0.42rem 0.55rem; color: var(--text-4);
  transition: color 0.35s var(--ease);
}
.lang-switch a + a { border-inline-start: 1px solid var(--line-strong); }
.lang-switch a::after {
  content: ""; position: absolute; inset-inline: 0.55rem; bottom: 0.22rem; height: 1px;
  background: var(--chrome-hi);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.4s var(--ease);
}
.lang-switch a:hover { color: var(--text-2); }
.lang-switch a.on { color: var(--text); }
.lang-switch a.on::after { transform: scaleX(1); }
html[lang="fa"] .lang-switch { font-family: var(--font-fa); letter-spacing: 0.02em; font-size: 0.78rem; }

.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--text-2);
  transition: all 0.3s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--text-3); background: var(--surface-2); }
.icon-btn svg { width: 16px; height: 16px; }

/* geometric theme control — sun/moon crossfade */
.theme-btn { position: relative; overflow: hidden; }
.theme-btn .t-sun, .theme-btn .t-moon {
  position: absolute; inset: 0; display: grid; place-items: center;
  transition: transform 0.55s var(--ease), opacity 0.55s var(--ease);
}
.theme-btn .t-sun svg, .theme-btn .t-moon svg { width: 16px; height: 16px; }
.theme-btn[data-active="dark"] .t-sun { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-btn[data-active="dark"] .t-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
.theme-btn[data-active="light"] .t-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-btn[data-active="light"] .t-moon { opacity: 1; transform: rotate(0deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .theme-btn .t-sun, .theme-btn .t-moon { transition: none; }
}

.burger { display: none; width: 42px; height: 38px; position: relative; border: 1px solid var(--line-strong); }
.burger span {
  position: absolute; left: 12px; right: 12px; height: 1px; background: var(--text);
  transition: transform 0.4s var(--ease), top 0.4s var(--ease);
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 22px; }
.burger.open span:nth-child(1) { top: 18.5px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { top: 18.5px; transform: rotate(-45deg); }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 95;
  background: var(--bg-2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  padding: calc(var(--pad) + 3rem) var(--pad) var(--pad);
  opacity: 0; visibility: hidden; transform: translateY(-2%);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0.5s, background-color 0.5s var(--ease);
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 0; margin-top: auto; }
.mobile-menu .m-link {
  font-family: var(--font-display); font-size: clamp(1.9rem, 8.5vw, 3.1rem);
  font-weight: 350;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.2;
  color: var(--text-2); display: flex; align-items: baseline;
  transition: color 0.35s var(--ease), padding 0.35s var(--ease), letter-spacing 0.35s var(--ease);
  border-bottom: 1px solid var(--line-soft);
  padding-block: 0.42rem;
}
.mobile-menu .m-link:hover { color: var(--text); padding-inline-start: 0.5rem; letter-spacing: 0.005em; }
.mobile-menu .m-foot { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; align-items: center; }
html[lang="fa"] .mobile-menu .m-link { letter-spacing: 0; line-height: 1.5; font-size: clamp(1.7rem, 7.5vw, 2.7rem); }

@media (max-width: 1060px) {
  .main-nav { display: none; }
  .burger { display: block; }
  .header-tools .lang-switch { display: none; }
}

/* ============================================================
   SCROLL INDICATOR — architectural rail
   ============================================================ */
.scroll-ind {
  position: fixed; z-index: 85;
  inset-inline-end: 22px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 132px;
  background: linear-gradient(180deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
}
.scroll-ind .fill {
  position: absolute; top: 0; left: -1.5px; width: 4px; height: 0%;
  background: linear-gradient(180deg, var(--chrome-lo), var(--chrome-hi));
  box-shadow: 0 0 10px rgba(214, 212, 202, 0.35);
  transition: height 0.12s linear;
}
.scroll-ind .tip {
  position: absolute; left: -3px; width: 7px; height: 7px;
  transform: translateY(-50%) rotate(45deg);
  border: 1px solid var(--chrome-hi); background: var(--bg);
  box-shadow: 0 0 8px rgba(214, 212, 202, 0.45);
  transition: top 0.12s linear;
}
[data-theme="light"] .scroll-ind .fill { box-shadow: 0 0 10px rgba(60, 56, 46, 0.3); }
[data-theme="light"] .scroll-ind .tip { box-shadow: 0 0 8px rgba(60, 56, 46, 0.35); }
@media (max-width: 900px) { .scroll-ind { display: none; } }

/* ============================================================
   IMAGERY
   ============================================================ */
.frame { position: relative; overflow: hidden; background: var(--surface-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 0.8s var(--ease); filter: saturate(0.9) contrast(1.02); }
.frame:hover img { transform: scale(1.045); filter: saturate(0.98) contrast(1.05); }
/* editorial portrait crop: the 1:1 hoodie photograph sits in the 4:5 frame with
   the face — just right of centre — kept fully in view */
#aboutImage, #homeAboutImage { object-position: 55% 38%; }
.frame .frame-line { position: absolute; inset: 12px; border: 1px solid rgba(230, 228, 221, 0.12); pointer-events: none; z-index: 2; }
[data-theme="light"] .frame .frame-line { border-color: rgba(20, 18, 14, 0.14); }

/* ============================================================
   PAGE HERO (sub pages)
   ============================================================ */
.page-hero { position: relative; padding-top: clamp(7rem, 16vh, 10rem); padding-bottom: clamp(3rem, 7vw, 5rem); overflow: hidden; }
.page-hero .ph-scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 45%, var(--bg) 100%); }
.page-hero .display { font-size: var(--fs-giant); margin-top: 1.2rem; }
.page-hero .lead { margin-top: 1.4rem; }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
/* the hero photograph is dark in BOTH themes — keep its typography light so the
   name, roles and CTAs always stay readable over the image */
.hero {
  --text: #f2f0ea;
  --text-2: #c8c8c8;
  --text-3: #a5a39d;
  --text-4: #8a8880;
  --line-strong: rgba(216, 213, 203, 0.3);
}
.hero-media { position: absolute; inset: 0; z-index: -3; }
.hero-media img { --zoom: 1.06; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; transform: scale(var(--zoom)); filter: saturate(0.9) contrast(1.04); animation: heroIn 1.8s var(--ease-io) both; }
@keyframes heroIn { from { transform: scale(calc(var(--zoom) * 1.057)); } to { transform: scale(var(--zoom)); } }

/* responsive art direction — the 2.33:1 cinematic shot keeps its seated
   subject (and the wall mark on desktop) inside the crop at every width */
@media (max-width: 640px) {                 /* mobile: centre the figure in the narrow slice */
  .hero-media img { object-position: 52% 50%; }
}
/* quiet cinematic depth behind the hero typography (no raster imagery) */
.hero-scrim { position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.62) 0%, rgba(5,5,5,0.14) 24%, rgba(5,5,5,0) 44%),
    linear-gradient(0deg, var(--bg) 2%, rgba(5,5,5,0.72) 30%, rgba(5,5,5,0) 62%),
    radial-gradient(140% 100% at 50% 50%, transparent 52%, rgba(0,0,0,0.5) 100%);
}
[data-theme="light"] .hero-scrim {
  background: linear-gradient(0deg, var(--bg) 2%, rgba(5,5,5,0.55) 32%, rgba(5,5,5,0) 64%);
}
.hero-content {
  margin-top: auto;
  padding-bottom: clamp(4rem, 9vh, 7rem);
  max-width: 1100px;
  color: var(--text); /* re-resolve inside .hero's light tokens (body computes dark in light theme) */
}
.hero-kicker {
  font-family: var(--font-mono); font-size: var(--fs-meta); letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 1rem;
}
.hero-kicker::before { content: ""; width: 44px; height: 1px; background: var(--chrome); }
.hero-name {
  font-size: clamp(2.7rem, 9vw, 8.2rem);
  margin-top: 1rem;
  font-weight: 300;
}
.hero-roles {
  display: flex; flex-wrap: wrap; gap: 0.6rem 0;
  margin-top: 1.6rem;
  font-family: var(--font-mono); font-size: var(--fs-small);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2);
}
.hero-roles span + span::before { content: "—"; margin-inline: 1rem; color: var(--text-4); }
.hero-intro { margin-top: 1.8rem; max-width: 46ch; color: var(--text-2); font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 2.6rem; }

.hero-scroll {
  position: absolute; bottom: 2rem; inset-inline-end: var(--pad);
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--text-4);
}
.hero-scroll .line { width: 1px; height: 44px; background: var(--line-strong); position: relative; overflow: hidden; }
.hero-scroll .line::after {
  content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%;
  background: var(--chrome); animation: scrollDrip 2.2s var(--ease-io) infinite;
}
@keyframes scrollDrip { 0% { top: -50%; } 60%, 100% { top: 110%; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll .line::after { animation: none; } }

/* ============================================================
   EDITORIAL ROWS (projects / articles / resources)
   ============================================================ */
.work-featured { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: var(--gutter); }
.work-featured .frame { aspect-ratio: 21 / 10; }
.work-featured-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-top: 1.4rem; min-width: 0;
}
@media (max-width: 640px) {
  .work-featured-meta { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}
.work-title { font-family: var(--font-display); font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; }
.work-title a { transition: color 0.35s var(--ease); }
.work-title a:hover { color: var(--text-3); }

.work-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto;
  align-items: center; gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.6rem, 3.4vw, 2.6rem);
  border-top: 1px solid var(--line);
  position: relative;
}
.work-row:last-child { border-bottom: 1px solid var(--line); }
.work-row .thumb {
  width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2);
  opacity: 0.92; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.work-row:hover .thumb { opacity: 1; transform: translateY(-3px); }
.work-row .thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88); }
.work-row .wr-body { min-width: 0; }
.work-row .wr-title { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 2rem); text-transform: uppercase; line-height: 1.1; }
.work-row .wr-title a:hover { color: var(--text-3); }
.work-row .wr-desc { margin-top: 0.6rem; color: var(--text-3); font-size: var(--fs-small); max-width: 52ch; }
.work-row .wr-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: 0.8rem; }
.work-row .wr-go { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--line-strong); transition: all 0.45s var(--ease); color: var(--text-2); }
.work-row:hover .wr-go { background: var(--text); color: var(--bg); border-color: var(--text); }
.work-row .wr-go svg { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .work-row { grid-template-columns: 1fr; gap: 1.2rem; }
  .work-row .wr-go { display: none; }
}

/* ---------- generic editorial list (articles/resources) ---------- */
.list-row {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.list-row:last-child { border-bottom: 1px solid var(--line); }
.list-row .lr-date { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.2em; color: var(--text-4); text-transform: uppercase; }
.list-row .lr-title { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.7rem); text-transform: uppercase; line-height: 1.14; }
.list-row .lr-title a:hover { color: var(--text-3); }
.list-row .lr-sub { margin-top: 0.5rem; color: var(--text-3); font-size: var(--fs-small); }
.list-row .lr-tags { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.7rem; }
.tag {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line-strong); padding: 0.28rem 0.6rem;
}
@media (max-width: 640px) {
  .list-row { grid-template-columns: 1fr; }
  .list-row .lr-date { order: 2; }
}

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split.rev { direction: ltr; }
.split.rev > * { direction: ltr; }
.split > .frame { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.about-prose .prose { max-width: 72ch; }

/* ---------- skills ---------- */
.skill-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 1.5rem; padding-block: 1.4rem; border-top: 1px solid var(--line);
}
.skill-row:last-child { border-bottom: 1px solid var(--line); }
.skill-row .sk-name { font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.4rem); text-transform: uppercase; color: var(--text-2); }
.skill-row .sk-items { display: flex; flex-wrap: wrap; gap: 0.5rem 0.4rem; }
.skill-row .sk-item {
  font-size: var(--fs-small); color: var(--text-3);
  padding: 0.4rem 0.9rem; border: 1px solid transparent;
  transition: all 0.35s var(--ease);
}
.skill-row:hover .sk-item { color: var(--text-2); }
.skill-row .sk-item + .sk-item::before { content: "·"; margin-inline-end: 0.9rem; color: var(--text-4); }
.skill-row:hover { border-color: var(--line-strong); }
@media (max-width: 720px) { .skill-row { grid-template-columns: 1fr; } }

/* ---------- contact rows ---------- */
.connect-lead { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.connect-rows { border-top: 1px solid var(--line-strong); }
.connect-row {
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.connect-row .cr-label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-4); width: 110px; flex-shrink: 0; }
html[lang="fa"] .connect-row .cr-label { font-family: var(--font-fa); width: 110px; letter-spacing: 0.06em; }
.connect-row .cr-value { font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 1.7rem); text-transform: none; color: var(--text-2); transition: color 0.4s var(--ease), transform 0.5s var(--ease); }
.connect-row .cr-arrow { margin-inline-start: auto; color: var(--text-4); transition: all 0.4s var(--ease); opacity: 0; transform: translateX(-10px); }
[dir="rtl"] .connect-row .cr-arrow { transform: translateX(10px); }
.connect-row:hover .cr-value { color: var(--text); transform: translateX(6px); }
[dir="rtl"] .connect-row:hover .cr-value { transform: translateX(-6px); }
.connect-row:hover .cr-arrow { opacity: 1; transform: translateX(0); }
.connect-row::before {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: var(--chrome); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.connect-row:hover::before { transform: scaleX(1); }
.connect-row .cr-value { min-width: 0; overflow-wrap: anywhere; }
.connect-row .cr-arrow { flex-shrink: 0; }
@media (max-width: 640px) {
  .connect-row { flex-wrap: wrap; row-gap: 0.25rem; }
  .connect-row .cr-label { width: auto; min-width: 84px; }
  .connect-row .cr-value { flex: 1 1 auto; font-size: clamp(0.98rem, 4.6vw, 1.2rem); }
  .connect-row .cr-arrow { display: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { position: relative; overflow: hidden; }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem;
  padding-block: clamp(3.2rem, 6vw, 5.5rem); border-top: 1px solid var(--line-strong);
}
.footer-col h4 { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-4); margin-bottom: 1.2rem; }
html[lang="fa"] .footer-col h4 { font-family: var(--font-fa); letter-spacing: 0.05em; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a, .footer-col li { font-size: var(--fs-small); color: var(--text-3); transition: color 0.3s var(--ease); }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  padding-block: 1.6rem; border-top: 1px solid var(--line);
}
.footer-bottom .meta { letter-spacing: 0.24em; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   CONTENT (article / docs)
   ============================================================ */
.prose { max-width: 720px; }
.prose h2 { font-family: var(--font-display); font-size: var(--fs-h2); text-transform: uppercase; line-height: 1.1; margin: 2.6rem 0 1rem; }
.prose h3 { font-family: var(--font-display); font-size: var(--fs-h3); text-transform: uppercase; margin: 2rem 0 0.8rem; }
.prose p { margin: 1rem 0; color: var(--text-2); }
.prose ul, .prose ol { margin: 1rem 0; padding-inline-start: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; color: var(--text-2); }
.prose ul { list-style: none; }
.prose ul li::before { content: "—"; margin-inline-end: 0.7rem; color: var(--text-4); }
.prose ol { list-style: decimal; }
.prose blockquote {
  margin: 1.8rem 0; padding: 1.4rem 1.8rem; border-inline-start: 2px solid var(--chrome);
  background: var(--surface); font-family: var(--font-display); font-size: 1.2rem; line-height: 1.5;
  color: var(--text); text-transform: uppercase; letter-spacing: 0.01em;
}
.prose code {
  font-family: var(--font-mono); font-size: 0.85em; background: var(--surface-2);
  padding: 0.15rem 0.45rem; border: 1px solid var(--line);
}
.prose pre {
  background: #0d0d0d; border: 1px solid var(--line); padding: 1.4rem; overflow-x: auto;
  margin: 1.6rem 0; font-size: 0.85rem;
}
.prose pre code { background: none; border: 0; padding: 0; color: var(--text-2); }
[data-theme="light"] .prose pre { background: #e9e5da; }
[data-theme="light"] .prose pre code { color: #3d3a33; }
.prose img { margin: 1.8rem 0; }
.prose a { color: var(--text); border-bottom: 1px solid var(--line-strong); }
.prose a:hover { border-color: var(--chrome); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }

/* ============================================================
   DETAIL PAGES
   ============================================================ */
.detail-hero { position: relative; padding-top: clamp(7rem, 14vh, 9rem); }
.detail-hero .frame { aspect-ratio: 21 / 9; margin-top: clamp(2rem, 4vw, 3rem); }
.detail-meta-bar {
  display: flex; flex-wrap: wrap; gap: 0.8rem 2.4rem; align-items: center;
  margin-top: 2rem; padding-block: 1.4rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.detail-meta-bar .dm { display: flex; flex-direction: column; gap: 0.3rem; }
.detail-meta-bar .dm .k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-4); }
.detail-meta-bar .dm .v { font-size: var(--fs-small); color: var(--text-2); }
.detail-body { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(3rem, 6vw, 5rem); }
@media (max-width: 900px) { .detail-body { grid-template-columns: 1fr; } }

.aside { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; gap: 2.2rem; }
.aside-block { border-top: 1px solid var(--line-strong); padding-top: 1.1rem; }
.aside-block h4 { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-4); margin-bottom: 0.9rem; }
html[lang="fa"] .aside-block h4 { font-family: var(--font-fa); letter-spacing: 0.05em; }
.aside-block ul { display: flex; flex-direction: column; gap: 0.55rem; font-size: var(--fs-small); color: var(--text-2); }
.aside-block ul li { display: flex; justify-content: space-between; gap: 1rem; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.gallery .frame { aspect-ratio: 4 / 3; }
.gallery .frame:first-child { grid-column: span 2; aspect-ratio: 21 / 10; }

/* ============================================================
   SHOWCASE (asymmetric gallery)
   ============================================================ */
.show-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.5vw, 2rem);
}
.show-cell { position: relative; overflow: hidden; background: var(--surface-2); }
.show-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); filter: saturate(0.88); }
.show-cell:hover img { transform: scale(1.04); }
.show-cell .cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: 2.6rem 1.4rem 1.2rem;
  background: linear-gradient(0deg, rgba(5,5,5,0.75), transparent);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.show-cell:hover .cap { opacity: 1; }
.show-cell .cap .t { font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; }
.show-cell .cap .c { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); }
html[lang="fa"] .show-cell .cap .c { font-family: var(--font-fa); }
.s-a { grid-column: span 7; aspect-ratio: 16 / 10; }
.s-b { grid-column: span 5; aspect-ratio: 16 / 10; }
.s-c { grid-column: span 4; aspect-ratio: 4 / 5; }
.s-d { grid-column: span 4; aspect-ratio: 4 / 5; }
.s-e { grid-column: span 4; aspect-ratio: 4 / 5; }
.s-f { grid-column: span 6; aspect-ratio: 16 / 9; }
.s-g { grid-column: span 6; aspect-ratio: 16 / 9; }
@media (max-width: 760px) {
  .s-a, .s-b, .s-c, .s-d, .s-e, .s-f, .s-g { grid-column: span 12; }
}

/* ============================================================
   SERVICES
   ============================================================ */
.svc-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem); padding-block: clamp(2.4rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
.svc-row:last-of-type { border-bottom: 1px solid var(--line); }
.svc-row .svc-head { display: flex; gap: 1.6rem; align-items: flex-start; }
.svc-row .svc-name { font-family: var(--font-display); font-size: var(--fs-h2); text-transform: uppercase; line-height: 1.08; font-weight: 350; }
.svc-row .svc-desc { color: var(--text-3); margin-top: 0.9rem; max-width: 52ch; }
.svc-row .svc-list { display: flex; flex-direction: column; gap: 0.1rem; }
.svc-row .svc-list li {
  position: relative; padding: 0.65rem 0 0.65rem 1.4rem;
  border-bottom: 1px solid var(--line-soft); font-size: var(--fs-small); color: var(--text-2);
  transition: color 0.3s var(--ease), padding 0.3s var(--ease);
}
[dir="rtl"] .svc-row .svc-list li { padding: 0.65rem 1.4rem 0.65rem 0; }
.svc-row .svc-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%;
  width: 10px; height: 1px; background: var(--chrome-lo);
  transition: width 0.3s var(--ease), background 0.3s var(--ease);
}
.svc-row .svc-list li:hover { color: var(--text); padding-inline-start: 1.8rem; }
.svc-row .svc-list li:hover::before { width: 16px; background: var(--chrome-hi); }
html[lang="fa"] .svc-row .svc-name { letter-spacing: 0; }
@media (max-width: 800px) { .svc-row { grid-template-columns: 1fr; } }

/* ---------- home "what I build" — editorial capability rows ---------- */
.build-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: center; gap: clamp(1.2rem, 3vw, 3rem);
  padding-block: clamp(1.3rem, 2.6vw, 2rem);
  border-top: 1px solid var(--line);
}
.build-row:last-child { border-bottom: 1px solid var(--line); }
.build-row .b-title {
  font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  text-transform: uppercase; line-height: 1.1; transition: color 0.35s var(--ease);
}
.build-row:hover .b-title { color: var(--text-3); }
.build-row .b-desc { color: var(--text-3); font-size: var(--fs-small); max-width: 56ch; }
.build-row .b-go {
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--line-strong); color: var(--text-2);
  transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.build-row:hover .b-go { background: var(--text); color: var(--bg); border-color: var(--text); }
.build-row .b-go svg { width: 16px; height: 16px; }
html[lang="fa"] .build-row .b-title { letter-spacing: 0; }
@media (max-width: 760px) {
  .build-row { grid-template-columns: 1fr; gap: 0.7rem; }
  .build-row .b-go { display: none; }
}

/* arrow glyphs — sized + mirrored in RTL */
.btn-arrow svg, .btn-box .btn-arrow svg { width: 14px; height: 14px; display: block; }
.cr-arrow svg { width: 16px; height: 16px; display: block; }
[dir="rtl"] .cr-arrow svg, [dir="rtl"] .btn-arrow svg, [dir="rtl"] .wr-go svg, [dir="rtl"] .b-go svg { transform: scaleX(-1); }

/* ---------- empty states ---------- */
.empty-state {
  border: 1px solid var(--line);
  padding: clamp(2.6rem, 6vw, 4.5rem) 2rem;
  text-align: center;
  background:
    radial-gradient(60% 90% at 50% 0%, color-mix(in srgb, var(--chrome) 4%, transparent), transparent 70%),
    var(--surface);
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
}
.empty-state .es-mark { opacity: 0.5; }
.empty-state .es-note {
  font-family: var(--font-display); font-size: var(--fs-h3);
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-2);
}
html[lang="fa"] .empty-state .es-note { letter-spacing: 0; line-height: 1.6; }
.empty-state .es-sub { color: var(--text-4); font-size: var(--fs-small); max-width: 46ch; }

/* ============================================================
   UTILITIES
   ============================================================ */
.center { text-align: center; }
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mt-4 { margin-top: 4rem; }
.mb-2 { margin-bottom: 2rem; }
.stack { display: flex; flex-direction: column; gap: 1.4rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.text-giant { font-family: var(--font-display); font-size: var(--fs-giant); text-transform: uppercase; line-height: 0.96; font-weight: 300; letter-spacing: -0.02em; }
.outline-text {
  color: transparent; -webkit-text-stroke: 1px var(--line-strong);
}
@supports not (-webkit-text-stroke: 1px #000) {
  .outline-text { color: var(--text-3); -webkit-text-stroke: 0; }
}

/* filters */
.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.filter-btn {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--line-strong); padding: 0.5rem 1rem;
  transition: all 0.35s var(--ease);
}
html[lang="fa"] .filter-btn { font-family: var(--font-fa); letter-spacing: 0.04em; }
.filter-btn:hover { color: var(--text); border-color: var(--text-3); }
.filter-btn.on { background: var(--text); color: var(--bg); border-color: var(--text); }

/* search */
.search-box { display: flex; align-items: center; gap: 0.8rem; border: 1px solid var(--line-strong); padding: 0.6rem 1rem; max-width: 320px; }
.search-box input { background: none; border: 0; outline: none; color: var(--text); width: 100%; font-size: var(--fs-small); }
.search-box svg { width: 15px; height: 15px; color: var(--text-4); flex-shrink: 0; }

/* misc */
.note-strip {
  border: 1px solid var(--line); padding: 1.1rem 1.4rem; font-size: var(--fs-small);
  color: var(--text-3); display: flex; gap: 1rem; align-items: flex-start;
}
.note-strip .k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-4); flex-shrink: 0; padding-top: 0.2rem; }

.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-21-9 { aspect-ratio: 21 / 9; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-1 { aspect-ratio: 1; }

/* nav transition overlay — dark veil + brand mark */
.nav-overlay {
  position: fixed; inset: 0; z-index: 150;
  background:
    radial-gradient(60% 50% at 50% 48%, rgba(214, 212, 202, 0.05), transparent 60%),
    #040404;
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.nav-overlay::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.nav-overlay.on { opacity: 1; visibility: visible; pointer-events: auto; }
.nav-overlay .no-mark {
  position: relative; width: 56px; height: 56px; opacity: 0;
}
.nav-overlay.on .no-mark { animation: spin360 0.55s var(--ease-io) both; }
.nav-overlay .no-mark svg, .nav-overlay .no-mark img { width: 100%; height: 100%; display: block; }
.nav-overlay .no-mark::after {
  content: ""; position: absolute; inset: -16%;
  background: linear-gradient(105deg, transparent 40%, rgba(236, 234, 226, 0.55) 50%, transparent 60%);
  mix-blend-mode: screen;
  transform: translateX(-70%);
  animation: markSweep 0.5s var(--ease-io) 0.15s both;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .nav-overlay .no-mark { animation: none; opacity: 1; }
  .nav-overlay .no-mark::after { animation: none; opacity: 0; }
}

/* ============================================================
   CMS filter bars + draft preview banner
   ============================================================ */
.filterbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 2.2rem; }
.fb-cats { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.fb-chip {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-4); background: transparent; border: 1px solid var(--line); padding: 0.42rem 0.85rem;
  cursor: pointer; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
html[lang="fa"] .fb-chip { letter-spacing: 0.02em; font-family: var(--font-body); font-size: 0.72rem; }
.fb-chip:hover { color: var(--text); border-color: var(--chrome); }
.fb-chip.on { color: var(--text); border-color: var(--chrome-hi); background: color-mix(in srgb, var(--chrome) 12%, transparent); }
.fb-search {
  margin-inline-start: auto; background: transparent; border: 1px solid var(--line); color: var(--text);
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; padding: 0.5rem 0.9rem;
  min-width: 180px; transition: border-color 0.25s var(--ease);
}
html[lang="fa"] .fb-search { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0; }
.fb-search:focus { outline: none; border-color: var(--chrome); }
@media (max-width: 640px) { .fb-search { margin-inline-start: 0; width: 100%; } }
.draft-banner {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 300; text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.3em; text-transform: uppercase;
  color: #0a0a0a; background: var(--chrome-hi); padding: 0.5rem 1rem;
}

/* ============================================================
   HOME — ecosystem constellation + method diagram + eco strip
   ============================================================ */
.eco-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 2.4rem; }
.eco-node { display: flex; flex-direction: column; gap: 0.7rem; padding: 2.1rem 0 2.4rem; border-top: 1px solid var(--line); position: relative; color: inherit; }
.eco-node:hover { color: inherit; }
.eco-k { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: 0.01em; color: var(--text); }
html[lang="fa"] .eco-k { letter-spacing: 0; }
.eco-s { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; color: var(--text-4); max-width: 46ch; }
html[lang="fa"] .eco-s { font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0; }
.eco-bar { width: 34px; height: 1px; background: var(--chrome); margin-top: auto; transition: width 0.5s var(--ease), background 0.4s; }
.eco-node:hover .eco-bar { width: 96px; background: var(--chrome-hi); }
.eco-a { grid-column: span 7; } .eco-a .eco-k { font-size: var(--fs-h2); }
.eco-b { grid-column: span 5; } .eco-b .eco-k { font-size: var(--fs-h3); }
.eco-c { grid-column: span 4; } .eco-c .eco-k { font-size: var(--fs-h3); }
.eco-d { grid-column: span 4; } .eco-d .eco-k { font-size: var(--fs-h3); }
.eco-e { grid-column: span 4; } .eco-e .eco-k { font-size: var(--fs-h3); }
.eco-f { grid-column: span 12; flex-direction: row; align-items: baseline; gap: 2rem; }
.eco-f .eco-k { font-size: var(--fs-h3); }
.eco-f .eco-bar { margin-top: 0; align-self: center; }
@media (max-width: 900px) {
  .eco-grid { grid-template-columns: 1fr 1fr; gap: 0 1.6rem; }
  .eco-a, .eco-b, .eco-c, .eco-d, .eco-e { grid-column: span 1; }
  .eco-f { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
}
@media (max-width: 560px) { .eco-grid { grid-template-columns: 1fr; } }

.method-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6rem; padding-top: 1.4rem; }
.method-flow::before { content: ""; position: absolute; top: calc(1.4rem + 4px); inset-inline: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--chrome) 6%, var(--chrome) 94%, transparent); opacity: 0.55; }
.mf-step { display: flex; flex-direction: column; gap: 0.55rem; position: relative; }
.mf-i { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--chrome); background: var(--bg); position: relative; z-index: 1; transition: background 0.4s var(--ease), transform 0.4s var(--ease); }
.mf-step:hover .mf-i { background: var(--chrome); transform: rotate(45deg) scale(1.15); }
.mf-w { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); padding-inline-start: 0.16em; }
html[lang="fa"] .mf-w { letter-spacing: 0.02em; font-size: 0.95rem; }
.mf-d { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; color: var(--text-4); max-width: 22ch; }
html[lang="fa"] .mf-d { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0; max-width: 26ch; }
@media (max-width: 900px) {
  .method-flow { grid-template-columns: 1fr; gap: 1.8rem; padding-top: 0; padding-inline-start: 1.4rem; }
  .method-flow::before { top: 0; bottom: 0; inset-inline: 0; width: 1px; height: auto; background: linear-gradient(180deg, transparent, var(--line-2) 8%, var(--line-2) 92%, transparent); }
  .mf-i { position: absolute; inset-inline-start: calc(-1.4rem - 5px); top: 0.35rem; }
}

.eco-line { display: flex; align-items: center; justify-content: center; gap: 1.3rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.34em; text-transform: uppercase; color: var(--text-4); padding: 1.2rem 0; }
html[lang="fa"] .eco-line { font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0.08em; }
.eco-line i { width: 46px; height: 1px; background: var(--chrome); opacity: 0.5; }
.eco-line span:last-child { color: var(--chrome); }

/* ============================================================
   CONTENT-FIRST LUXURY — FINAL PREMIUM ELEVATION
   No decorative images. Typography + Layout + Spacing + Motion
   ============================================================ */

/* ---------- INTERLUDE TYPO — cinematic without image ---------- */
.interlude-typo {
  position: relative;
  width: 100vw;
  margin-inline-start: calc(50% - 50vw);
  min-height: 88vh;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 10vw, 10rem) var(--pad);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background:
    radial-gradient(62% 48% at 50% 12%, color-mix(in srgb, var(--chrome) 6%, transparent), transparent 68%),
    radial-gradient(90% 70% at 50% 88%, rgba(0,0,0,0.22), transparent 70%),
    var(--bg-2);
  overflow: hidden;
  isolation: isolate;
}
[data-theme="light"] .interlude-typo {
  background:
    radial-gradient(62% 48% at 50% 12%, color-mix(in srgb, var(--chrome) 10%, transparent), transparent 68%),
    radial-gradient(90% 70% at 50% 88%, rgba(120,105,80,0.08), transparent 70%),
    var(--bg-2);
}
.interlude-typo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.interlude-typo-inner { position: relative; z-index: 1; max-width: 1680px; width: 100%; }
.interlude-typo .eyebrow { margin-bottom: 2.2rem; }
.interlude-typo-title {
  font-size: clamp(3.2rem, 12vw, 11rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  font-weight: 300;
  text-transform: uppercase;
}
.interlude-typo-title .mline { display: block; overflow: hidden; }
.interlude-typo-title em { color: var(--text-2); font-style: normal; }
.interlude-typo-rule {
  width: 0; height: 1px; margin: clamp(2rem, 4vw, 3rem) 0;
  background: linear-gradient(90deg, var(--chrome) 0%, var(--chrome-hi) 50%, transparent 100%);
  transition: width 1.2s var(--ease) 0.6s;
}
html.js .interlude-typo-rule.in,
html.js body.revealed .interlude-typo-rule { width: min(100%, 680px); }
html:not(.js) .interlude-typo-rule { width: min(100%, 680px); }
.interlude-typo-sub {
  max-width: 48ch;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: var(--text-3);
  line-height: 1.6;
  margin-top: 0;
}
@media (max-width: 700px) {
  .interlude-typo { min-height: 76vh; padding-block: clamp(4rem, 16vw, 8rem); }
  .interlude-typo-title { font-size: clamp(2.8rem, 16vw, 5.5rem); }
}

/* ---------- WHAT I BUILD — editorial rows, no image ---------- */
#build .section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.build-row--editorial {
  display: grid;
  grid-template-columns: 72px minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line);
  position: relative;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.build-row--editorial:last-child { border-bottom: 1px solid var(--line); }
.build-row--editorial::before {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: var(--chrome); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.build-row--editorial:hover::before { transform: scaleX(1); }
.build-row--editorial:hover { border-top-color: var(--line-strong); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.build-row--editorial .b-index {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.2em;
  color: var(--text-4); transition: color 0.35s var(--ease);
}
.build-row--editorial:hover .b-index { color: var(--chrome); }
.build-row--editorial .b-title {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.8vw, 2.2rem);
  text-transform: uppercase; line-height: 0.95; letter-spacing: -0.02em; font-weight: 350;
  transition: transform 0.5s var(--ease), color 0.35s var(--ease), letter-spacing 0.4s var(--ease);
}
.build-row--editorial:hover .b-title { transform: translateX(8px); color: var(--text); letter-spacing: -0.01em; }
[dir="rtl"] .build-row--editorial:hover .b-title { transform: translateX(-8px); }
.build-row--editorial .b-desc { color: var(--text-3); font-size: var(--fs-small); max-width: 52ch; transition: color 0.35s var(--ease), transform 0.5s var(--ease); }
.build-row--editorial:hover .b-desc { color: var(--text-2); transform: translateX(4px); }
[dir="rtl"] .build-row--editorial:hover .b-desc { transform: translateX(-4px); }
.build-row--editorial .b-go {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--text-3);
  transition: all 0.45s var(--ease); flex-shrink: 0;
}
.build-row--editorial:hover .b-go { background: var(--text); color: var(--bg); border-color: var(--text); transform: translateX(4px); }
[dir="rtl"] .build-row--editorial:hover .b-go { transform: translateX(-4px); }
.build-row--editorial .b-go svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .build-row--editorial { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .build-row--editorial .b-desc { grid-column: 2 / span 2; }
}
@media (max-width: 640px) {
  .build-row--editorial { grid-template-columns: 1fr; gap: 0.6rem; padding-block: 1.4rem; }
  .build-row--editorial .b-go { display: none; }
  .build-row--editorial .b-desc { grid-column: 1; }
}

/* ---------- SELECTED WORK — premium empty state ---------- */
.work-empty {
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 80% at 12% 0%, color-mix(in srgb, var(--chrome) 5%, transparent), transparent 60%),
    var(--surface);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}
.work-empty::before {
  content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--chrome) 20%, var(--chrome-hi) 50%, transparent);
  opacity: 0.6;
}
.work-empty-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.work-empty-title { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 4.2rem); text-transform: uppercase; line-height: 0.9; letter-spacing: -0.03em; font-weight: 300; }
.work-empty-title em { color: var(--text-2); }
.work-empty-lead { margin-top: 1.6rem; max-width: 56ch; color: var(--text-3); font-size: var(--fs-lead); line-height: 1.6; }
.work-empty-archive {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line-strong);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.work-empty-archive .wa-label {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-4);
}
.work-empty-archive .wa-line { flex: 1; min-width: 80px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden; }
.work-empty-archive .wa-line::after {
  content: ""; position: absolute; left: -30%; top: 0; width: 30%; height: 100%; background: var(--chrome);
  animation: waMove 2.8s var(--ease-io) infinite;
}
@keyframes waMove { 0% { left: -30%; } 100% { left: 110%; } }
.work-empty-archive .wa-status { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--line); padding: 0.35rem 0.75rem; }

/* ---------- METHOD — engineered premium ---------- */
.method-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding-top: 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.method-flow::before { content: none; }
.mf-step {
  display: flex; flex-direction: column; gap: 0; padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2vw, 1.8rem) clamp(1.8rem, 3vw, 2.8rem);
  border-inline-end: 1px solid var(--line); position: relative; transition: background 0.4s var(--ease);
}
.mf-step:last-child { border-inline-end: 0; }
.mf-step:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.mf-step .mf-index { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.22em; color: var(--text-4); margin-bottom: 1.2rem; }
.mf-step .mf-i { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--chrome); background: transparent; margin-bottom: 1.4rem; transition: background 0.4s var(--ease), transform 0.4s var(--ease); }
.mf-step:hover .mf-i { background: var(--chrome); transform: rotate(45deg) scale(1.2); }
.mf-step .mf-w { font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.5rem); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); margin-bottom: 0.8rem; }
.mf-step .mf-d { font-family: var(--font-body); font-size: var(--fs-small); color: var(--text-3); line-height: 1.6; max-width: 24ch; transition: color 0.3s var(--ease); }
.mf-step:hover .mf-d { color: var(--text-2); }
@media (max-width: 900px) {
  .method-flow { grid-template-columns: 1fr; border: 1px solid var(--line); }
  .mf-step { border-inline-end: 0; border-bottom: 1px solid var(--line); flex-direction: row; align-items: flex-start; gap: 1.2rem; padding-block: 1.4rem; }
  .mf-step:last-child { border-bottom: 0; }
  .mf-step .mf-index { margin-bottom: 0; min-width: 32px; }
  .mf-step .mf-i { margin-bottom: 0; margin-top: 0.4rem; }
}

/* ---------- CURRENTLY BUILDING — CMS-ready ---------- */
.currently-empty {
  border: 1px solid var(--line); padding: clamp(2rem, 4vw, 3rem);
  background: var(--surface);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 2rem; align-items: center;
}
.currently-empty .ce-title { font-family: var(--font-display); font-size: var(--fs-h3); text-transform: uppercase; line-height: 1.1; }
.currently-empty .ce-sub { color: var(--text-3); font-size: var(--fs-small); margin-top: 0.8rem; max-width: 48ch; line-height: 1.6; }
.currently-empty .ce-meta { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-4); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1.2rem; }
@media (max-width: 700px) { .currently-empty { grid-template-columns: 1fr; } }

/* ---------- ECOSYSTEM — typography constellation ---------- */
.eco-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
.eco-node { display: flex; flex-direction: column; gap: 0.7rem; padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.2rem, 2vw, 1.8rem); border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; color: inherit; transition: background 0.4s var(--ease); }
.eco-node:hover { background: color-mix(in srgb, var(--surface) 80%, transparent); }
.eco-node:nth-child(3n) { border-inline-end: 0; }
.eco-k { font-family: var(--font-display); font-weight: 350; line-height: 0.95; letter-spacing: -0.02em; color: var(--text); text-transform: uppercase; transition: transform 0.45s var(--ease), color 0.35s var(--ease); }
.eco-node:hover .eco-k { transform: translateY(-2px); color: var(--text); }
.eco-s { font-family: var(--font-body); font-size: var(--fs-small); color: var(--text-3); line-height: 1.5; max-width: 38ch; transition: color 0.35s var(--ease); }
.eco-node:hover .eco-s { color: var(--text-2); }
.eco-bar { width: 28px; height: 1px; background: var(--chrome); margin-top: auto; transition: width 0.6s var(--ease), background 0.4s; }
.eco-node:hover .eco-bar { width: 72px; background: var(--chrome-hi); }
.eco-a { grid-column: span 7; } .eco-a .eco-k { font-size: clamp(1.8rem, 4vw, 3.2rem); }
.eco-b { grid-column: span 5; } .eco-b .eco-k { font-size: clamp(1.4rem, 2.8vw, 2rem); }
.eco-c { grid-column: span 4; } .eco-c .eco-k { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.eco-d { grid-column: span 4; } .eco-d .eco-k { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.eco-e { grid-column: span 4; } .eco-e .eco-k { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
.eco-f { grid-column: span 12; flex-direction: row; align-items: center; gap: 2rem; border-inline-end: 0; }
.eco-f .eco-k { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }
@media (max-width: 900px) {
  .eco-grid { grid-template-columns: 1fr 1fr; }
  .eco-a, .eco-b, .eco-c, .eco-d, .eco-e, .eco-f { grid-column: span 1; }
  .eco-node:nth-child(3n) { border-inline-end: 1px solid var(--line); }
  .eco-node:nth-child(2n) { border-inline-end: 0; }
  .eco-f { grid-column: 1 / -1; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) { .eco-grid { grid-template-columns: 1fr; } .eco-node { border-inline-end: 0 !important; } }
.eco-line { display: flex; align-items: center; justify-content: center; gap: 1.3rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.34em; text-transform: uppercase; color: var(--text-4); padding: 1.2rem 0; }
.eco-line i { width: 46px; height: 1px; background: var(--chrome); opacity: 0.5; }
.eco-line span:last-child { color: var(--chrome); }

/* ---------- CONTACT — extremely premium ---------- */
.connect-lead .display { font-size: clamp(2.8rem, 8vw, 6.5rem); line-height: 0.9; letter-spacing: -0.04em; font-weight: 300; }
.connect-rows { border-top: 1px solid var(--line-strong); margin-top: clamp(2rem, 4vw, 3rem); }
.connect-row { display: flex; align-items: center; gap: 1.5rem; padding-block: clamp(1.2rem, 2.4vw, 1.8rem); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.connect-row .cr-label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-4); width: 120px; flex-shrink: 0; }
.connect-row .cr-value { font-family: var(--font-display); font-size: clamp(1.2rem, 2.6vw, 2rem); color: var(--text-2); transition: color 0.4s var(--ease), transform 0.5s var(--ease); }
.connect-row .cr-arrow { margin-inline-start: auto; color: var(--text-4); transition: all 0.45s var(--ease); opacity: 0; transform: translateX(-12px); }
.connect-row:hover .cr-value { color: var(--text); transform: translateX(8px); }
.connect-row:hover .cr-arrow { opacity: 1; transform: translateX(0); }
.connect-row::before { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--chrome); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.connect-row:hover::before { transform: scaleX(1); }

/* ---------- EMPTY STATES — editorial, not generic ---------- */
.empty-state--editorial {
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 80% at 10% 0%, color-mix(in srgb, var(--chrome) 5%, transparent), transparent 60%),
    var(--surface);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  position: relative; overflow: hidden;
}
.empty-state--editorial::before {
  content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--chrome) 22%, var(--chrome-hi) 50%, transparent);
  opacity: 0.5;
}
.empty-state--editorial .es-top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.empty-state--editorial .es-eyebrow { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-4); display: flex; align-items: center; gap: 0.9rem; }
.empty-state--editorial .es-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--line-strong); }
.empty-state--editorial .es-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); text-transform: uppercase; line-height: 0.95; letter-spacing: -0.02em; font-weight: 350; }
.empty-state--editorial .es-lead { color: var(--text-3); font-size: var(--fs-lead); max-width: 56ch; line-height: 1.6; margin-top: 1rem; }
.empty-state--editorial .es-meta { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-strong); padding-top: 1.2rem; display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.empty-state--editorial .es-meta .em-label { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-4); }
.empty-state--editorial .es-meta .em-line { flex: 1; min-width: 60px; height: 1px; background: var(--line-strong); position: relative; overflow: hidden; }
.empty-state--editorial .es-meta .em-line::after { content: ""; position: absolute; left: -30%; top: 0; width: 30%; height: 100%; background: var(--chrome); animation: waMove 2.8s var(--ease-io) infinite; }

/* keep legacy .empty-state for CMS fallback but style same */
.empty-state {
  border: 1px solid var(--line);
  padding: clamp(2.6rem, 6vw, 4.5rem) 2rem;
  text-align: left;
  background: var(--surface);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.empty-state .es-mark { opacity: 0.4; }
.empty-state .es-note { font-family: var(--font-display); font-size: var(--fs-h3); text-transform: uppercase; color: var(--text-2); }
.empty-state .es-sub { color: var(--text-4); font-size: var(--fs-small); max-width: 52ch; line-height: 1.6; }

/* ---------- SERVICES — premium editorial rows with index ---------- */
.svc-row {
  display: grid; grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(2rem, 4vw, 3.2rem);
  border-top: 1px solid var(--line); position: relative; transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.svc-row:last-of-type { border-bottom: 1px solid var(--line); }
.svc-row::before { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--chrome); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.svc-row:hover::before { transform: scaleX(1); }
.svc-row:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); border-top-color: var(--line-strong); }
.svc-row .svc-index { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.2em; color: var(--text-4); padding-top: 0.4rem; transition: color 0.35s var(--ease); }
.svc-row:hover .svc-index { color: var(--chrome); }
.svc-row .svc-name { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.4rem); text-transform: uppercase; line-height: 0.95; letter-spacing: -0.02em; font-weight: 350; transition: transform 0.5s var(--ease), color 0.35s var(--ease); }
.svc-row:hover .svc-name { transform: translateX(6px); }
[dir="rtl"] .svc-row:hover .svc-name { transform: translateX(-6px); }
.svc-row .svc-desc { color: var(--text-3); margin-top: 0.8rem; max-width: 52ch; font-size: var(--fs-small); line-height: 1.6; transition: color 0.35s var(--ease); }
.svc-row:hover .svc-desc { color: var(--text-2); }
.svc-row .svc-list { display: flex; flex-direction: column; gap: 0; margin-top: 0.2rem; }
.svc-row .svc-list li { position: relative; padding: 0.6rem 0 0.6rem 1.2rem; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-small); color: var(--text-3); transition: color 0.3s var(--ease), padding 0.3s var(--ease); }
[dir="rtl"] .svc-row .svc-list li { padding: 0.6rem 1.2rem 0.6rem 0; }
.svc-row .svc-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 8px; height: 1px; background: var(--chrome-lo); transition: width 0.3s var(--ease), background 0.3s var(--ease); }
.svc-row .svc-list li:hover { color: var(--text); padding-inline-start: 1.6rem; }
.svc-row .svc-list li:hover::before { width: 14px; background: var(--chrome-hi); }
@media (max-width: 800px) { .svc-row { grid-template-columns: 48px minmax(0, 1fr); } .svc-row .svc-list { grid-column: 2; } }

/* ---------- PROJECTS / ARTICLES / RESOURCES / SHOWCASE — CMS-first lists ---------- */
.list-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: clamp(1rem, 2.5vw, 2rem); align-items: center; padding-block: clamp(1.4rem, 2.8vw, 2rem); border-top: 1px solid var(--line); transition: background 0.35s var(--ease), border-color 0.35s var(--ease); }
.list-row:last-child { border-bottom: 1px solid var(--line); }
.list-row:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); border-top-color: var(--line-strong); }
.list-row .lr-date { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.2em; color: var(--text-4); text-transform: uppercase; }
.list-row .lr-title { font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.6rem); text-transform: uppercase; line-height: 1.1; letter-spacing: -0.01em; }
.list-row .lr-title a { transition: color 0.35s var(--ease), transform 0.45s var(--ease); display: inline-block; }
.list-row:hover .lr-title a { color: var(--text); transform: translateX(4px); }
[dir="rtl"] .list-row:hover .lr-title a { transform: translateX(-4px); }
.list-row .lr-sub { margin-top: 0.4rem; color: var(--text-3); font-size: var(--fs-small); max-width: 56ch; }
@media (max-width: 640px) { .list-row { grid-template-columns: 1fr; } }

/* ---------- SHOWCASE — asymmetric typography-led, no image header ---------- */
.show-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.show-cell { position: relative; background: var(--surface); padding: clamp(1.5rem, 3vw, 2.4rem); min-height: 220px; display: flex; flex-direction: column; justify-content: space-between; transition: background 0.4s var(--ease); text-align: left; }
.show-cell:hover { background: var(--surface-2); }
.show-cell .sc-top { display: flex; justify-content: space-between; gap: 1rem; }
.show-cell .sc-index { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.2em; color: var(--text-4); }
.show-cell .sc-cat { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-4); border: 1px solid var(--line); padding: 0.25rem 0.55rem; }
.show-cell .sc-title { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.9rem); text-transform: uppercase; line-height: 0.95; margin-top: auto; padding-top: 2rem; transition: transform 0.45s var(--ease); }
.show-cell:hover .sc-title { transform: translateY(-4px); }
.show-cell .sc-arrow { margin-top: 1.2rem; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--text-3); transition: all 0.4s var(--ease); opacity: 0; transform: translateX(-6px); }
.show-cell:hover .sc-arrow { opacity: 1; transform: none; background: var(--text); color: var(--bg); border-color: var(--text); }
.s-a { grid-column: span 7; } .s-b { grid-column: span 5; } .s-c { grid-column: span 4; } .s-d { grid-column: span 4; } .s-e { grid-column: span 4; } .s-f { grid-column: span 6; } .s-g { grid-column: span 6; }
@media (max-width: 760px) { .s-a, .s-b, .s-c, .s-d, .s-e, .s-f, .s-g { grid-column: span 12; } }

/* ---------- 404 — intentional editorial ---------- */
.page-404 { min-height: 72vh; display: grid; place-items: center; padding: clamp(3rem, 8vw, 6rem) var(--pad); text-align: left; }
.page-404-inner { max-width: 900px; width: 100%; }
.page-404 .giant { font-family: var(--font-display); font-size: clamp(6rem, 22vw, 18rem); line-height: 0.8; letter-spacing: -0.06em; font-weight: 200; color: transparent; -webkit-text-stroke: 1px var(--line-strong); }
.page-404 .lead { margin-top: 1.5rem; max-width: 48ch; }

/* ---------- FOOTER — minimal substantial upgrade ---------- */
.footer { position: relative; overflow: hidden; border-top: 1px solid var(--line-strong); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; padding-block: clamp(3.5rem, 7vw, 6rem); }
.footer-col h4 { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-4); margin-bottom: 1.2rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a, .footer-col li { font-size: var(--fs-small); color: var(--text-3); transition: color 0.3s var(--ease), transform 0.3s var(--ease); }
.footer-col a:hover { color: var(--text); transform: translateX(2px); }
[dir="rtl"] .footer-col a:hover { transform: translateX(-2px); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; padding-block: 1.6rem; border-top: 1px solid var(--line); }

/* ---------- MICRO-INTERACTIONS — premium subtle ---------- */
.btn, .btn-box, .nav-link, .connect-row, .list-row, .build-row--editorial, .svc-row, .eco-node, .show-cell {
  will-change: transform, color, background, border-color;
}
@media (prefers-reduced-motion: no-preference) {
  .build-row--editorial, .svc-row, .list-row, .eco-node, .show-cell, .mf-step, .connect-row {
    transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.6s var(--ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  .build-row--editorial:hover .b-title,
  .svc-row:hover .svc-name,
  .list-row:hover .lr-title a,
  .eco-node:hover .eco-k,
  .show-cell:hover .sc-title,
  .connect-row:hover .cr-value,
  .footer-col a:hover { transform: none !important; }
  .waMove, .wa-line::after, .em-line::after { animation: none !important; }
}

/* ---------- CLEANUP — hide legacy visual containers ---------- */
.svc-visual-sec, .page-visual-sec, .page-visual, .svc-visual, .interlude { display: none !important; }
.interlude-typo { display: grid !important; }

/* but keep .frame for protected portraits */
.frame { display: block !important; }

/* ---------- ABOUT — premium editorial biography ---------- */
.split--about { align-items: start; }
.split--about .frame { aspect-ratio: 4 / 5; position: sticky; top: 100px; }
.split--about .prose { max-width: 62ch; }
.split--about .prose p { font-size: var(--fs-lead); line-height: 1.8; }
.about-meta { margin-top: 2rem; border-top: 1px solid var(--line-strong); padding-top: 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.about-meta .am-k { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-4); }
.about-meta .am-v { font-family: var(--font-display); font-size: var(--fs-h3); text-transform: uppercase; margin-top: 0.3rem; }
@media (max-width: 900px) { .split--about .frame { position: relative; top: auto; } }

/* ---------- DETAIL PAGES — no fake content ---------- */
.detail-hero .frame { display: none; } /* hide if cover missing, real CMS will show when exists via JS */

/* ---------- UTILITIES preserved ---------- */