/* ==========================================================================
   MANGO — fonts, reset, typography, layout primitives
   ========================================================================== */

/* --- Persian: Yekan Bakh FaNum (client asked for it by name) -------------
   Available cuts: Thin Light Regular SemiBold Bold ExtraBold Black ExtraBlack.
   There is no Medium — do not map 500 to a face that does not exist.       */
@font-face{font-family:"Yekan Bakh FaNum";src:url("../fonts/YekanBakhFaNum-Light.woff2")format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Yekan Bakh FaNum";src:url("../fonts/YekanBakhFaNum-Regular.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Yekan Bakh FaNum";src:url("../fonts/YekanBakhFaNum-SemiBold.woff2")format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Yekan Bakh FaNum";src:url("../fonts/YekanBakhFaNum-Bold.woff2")format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Yekan Bakh FaNum";src:url("../fonts/YekanBakhFaNum-ExtraBold.woff2")format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Yekan Bakh FaNum";src:url("../fonts/YekanBakhFaNum-Black.woff2")format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Yekan Bakh XBlack";src:url("../fonts/YekanBakhFaNum-ExtraBlack.woff2")format("woff2");font-weight:400 900;font-style:normal;font-display:swap}

/* --- Latin (self-hosted; Google's CDN is unreliable from Iran) ---------- */
@font-face{font-family:"Russo One";src:url("../fonts/RussoOne-400.woff2")format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2212}
@font-face{font-family:"Michroma";src:url("../fonts/Michroma-400.woff2")format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Inter";src:url("../fonts/Inter-var.woff2")format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0}
img,svg,video{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p,figure{margin:0}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:4px}

/* ----------------------------------------------------------------- body */
body{
  background:var(--page-bg);
  color:var(--fg-primary);
  font-family:var(--font-fa);
  font-size:var(--fs-body);
  /* Persian descenders need the room — do not tighten to Latin values */
  line-height:1.9;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Latin runs inside Persian text pick up the Latin face automatically via
   the unicode-range above, so no per-element font switching is needed.    */
.en{font-family:var(--font-en-body);direction:ltr;unicode-bidi:isolate}
.num{font-feature-settings:"ss01";font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- layout */
/* One source for the container inset. Anything that has to line up with the
   container edge from outside it — the giant hero wordmark — reads the same
   variable, so the two can never drift apart. */
/* ---------------------------------------------- browser-owned surfaces */
/* Selection, caret, scrollbar and native control accents ship with defaults
   that belong to no design system. They are part of the page whether or not
   we draw them, so they are themed from the same tokens as everything else. */
:root{
  color-scheme:light;
  accent-color:var(--accent-default);
  caret-color:var(--accent-text);
  scrollbar-color:var(--ink-300) transparent;   /* Firefox */
}
::selection{
  /* amber is a FILL token, so text on it takes the on-accent foreground —
     the same pairing the buttons use, at 10.78:1. */
  background:var(--accent-default);
  color:var(--fg-on-accent);
}
::-moz-selection{background:var(--accent-default);color:var(--fg-on-accent)}
/* Selection inside a dark panel keeps its contrast the other way round. */
.on-dark ::selection{background:var(--accent-default);color:var(--fg-on-accent)}

/* The sticky header's height is referenced by the mobile drawer and by every
   in-page anchor, so it lives in one place. It is the nav's own height and
   nothing else — the hairline below is drawn by a pseudo-element precisely so
   it cannot add a pixel to it. */
:root{--header-h:86px}
:root{--wrap-pad:75px}                                /* measured: ~75px side margins */
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--wrap-pad)}
.wrap--wide{max-width:1600px}

@media (max-width:1100px){:root{--wrap-pad:40px}}
@media (max-width:640px) {:root{--wrap-pad:20px}}

section{position:relative}
.section{padding-block:var(--section-pad)}
@media (max-width:900px){:root{--section-pad:56px}}

/* Section alignment alternates — this is what gives the page its rhythm.
   Most sections are right-aligned (RTL); the work/news section flips left. */
.section--rtl{text-align:right}
.section--ltr{text-align:left}

/* ------------------------------------------------------ section marker
   Tiny, muted, out in the OUTER margin — never a big numeral by the title. */
.marker{
  font-family:var(--font-fa);
  font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--fg-muted);
  line-height:1;
  margin-bottom:var(--space-6);
}

/* ------------------------------------------------------------- eyebrow
   Measured at 24px on the reference — it is NOT a tiny label.            */
.eyebrow{
  font-size:var(--fs-eyebrow);
  line-height:1;
  font-weight:600;
  color:var(--fg-secondary);
  margin-bottom:var(--space-5);
}
.eyebrow--en{font-family:var(--font-en-display);letter-spacing:-.01em}

/* ------------------------------------------------------------ headings */
.h-hero,.h-sec{
  font-family:var(--font-fa);
  font-weight:900;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.h-hero{
  font-family:"Yekan Bakh XBlack",var(--font-fa);
  font-size:clamp(28px,3.6vw,var(--fs-hero));
  /* The reference measures 64/64 (100%), but that is a LATIN display value.
     Persian needs the room — same reason body copy runs 1.9, not 1.5. */
  line-height:1.28;
}
.h-sec{
  /* 3vw, not the 3.9vw this used to carry. The h2 cap came down to 30 while the
     h1 stayed 36, and with the steeper coefficient the h2 hit its cap first —
     at 390px the h1 had floored to 28 while the h2 sat at 30, so the section
     headings were bigger than the page title. A gentler slope and a 24px floor
     keep h1 >= h2 at every width. */
  font-size:clamp(24px,3vw,var(--fs-section));
  line-height:1.34;         /* reference is 46/46; opened up for Persian */
}
/* The portfolio archive and its category pages open with an h1 that wears the
   section-heading class (.h-sec .pf-open__h1). Sizing by class alone would have
   pulled those two h1s down to the h2 size; the element wins here so every h1
   on the site is 36 and every h2 is 30. */
h1.h-sec{font-size:clamp(28px,3.6vw,var(--fs-hero))}
/* The last line or word of a heading is amber.
   THE ONE NON-NEGOTIABLE COLOUR RULE: #FFB400 on white is 1.78:1 and fails
   WCAG at any size. Accent-coloured TEXT on the light ground therefore binds
   to accent/text (#8C6300, 5.38:1). On a dark panel the bright amber has
   plenty of contrast, so accent/default is correct there.                 */
.h-hero .hl,.h-sec .hl{color:var(--accent-text)}
.on-dark .h-hero .hl,.on-dark .h-sec .hl{color:var(--accent-default)}

.h3{font-size:var(--fs-h3);line-height:1.35;font-weight:700;letter-spacing:-.01em}

.lede{
  /* Client-set 16, down from the 18 of --fs-body-lg. That token still carries
     the step and card TITLES, which are not body copy and keep their size. */
  font-size:var(--fs-body);
  line-height:1.95;
  color:var(--fg-secondary);
  max-width:52ch;
  /* Persian justifies on the word space like Latin — no kashida involved — so
     inter-word is the correct mode. Hyphenation stays off: Persian does not
     break words at the line end. */
  text-align:justify;
  text-justify:inter-word;
  hyphens:none;
}
.body-muted{color:var(--fg-muted);line-height:1.9}

/* --------------------------------------------------------------- rules */
.hairline{border:0;border-top:1px solid var(--border-hairline);margin:0}

/* -------------------------------------------------------------- panels */
.on-dark{color:var(--fg-on-dark)}
.on-dark .lede,.on-dark .body-muted{color:var(--fg-on-dark-muted)}
.on-dark .marker{color:rgba(255,255,255,.5)}
.on-dark .eyebrow{color:rgba(255,255,255,.78)}

/* ------------------------------------------------------------ utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-100px;inset-inline-start:var(--space-6);z-index:200;background:var(--accent-default);color:var(--fg-on-accent);padding:var(--space-3) var(--space-5);border-radius:var(--radius-sm);font-weight:700;transition:top .2s}
.skip-link:focus{top:var(--space-4)}