/* ============================================================ Fonts — self-hosted, variable weight ============================================================ */ @font-face{ font-family:"Vazirmatn"; src:url("../assets/fonts/Vazirmatn-var.woff2") format("woff2-variations"); font-weight:100 900;font-style:normal;font-display:swap; } @font-face{ font-family:"Estedad"; src:url("../assets/fonts/Estedad-var.woff2") format("woff2-variations"); font-weight:100 900;font-style:normal;font-display:swap; } @font-face{ font-family:"PlexMono"; src:url("../assets/fonts/PlexMono-400.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"PlexMono"; src:url("../assets/fonts/PlexMono-500.woff2") format("woff2"); font-weight:500;font-style:normal;font-display:swap; } /* ============================================================ Reset + base ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hud) + 12px); } /* The hidden attribute and a display rule have the same specificity, so any component that sets its own display — .btn is display:flex — silently beats it and stays on screen. The boot screen opts out on purpose: it fades rather than vanishing. */ [hidden]:not(.boot){display:none!important; } body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:var(--fs-base); line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background var(--t-med),color var(--t-med); } body.is-locked{overflow:hidden} img,svg,video,canvas{max-width:100%;display:block} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer;padding:0;text-align:inherit} a{color:inherit;text-decoration:none} ul,ol{margin:0;padding:0;list-style:none} p{margin:0} hr{border:0;border-top:1px solid var(--line);margin:0} :focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:var(--r-sm); } ::selection{background:var(--brand);color:var(--on-brand)} h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:800; line-height:1.24; letter-spacing:-.01em; margin:0; } h1{font-size:var(--fs-h1);line-height:1.14} h2{font-size:var(--fs-h2);line-height:1.18} h3{font-size:var(--fs-h3)} h4{font-size:var(--fs-h4);font-weight:700} /* Latin text inside a Persian page still reads correctly */ [lang="en"],.lat{font-feature-settings:"kern" 1} /* ============================================================ Direction — the whole layout is logical-property based, so switching `dir` on flips everything with no extra CSS. ============================================================ */ html[dir="rtl"]{--font-body:"Vazirmatn",system-ui,sans-serif} html[dir="ltr"]{ --font-display:"Estedad",system-ui,sans-serif; --font-body:system-ui,-apple-system,"Segoe UI",sans-serif; } html[dir="ltr"] body{line-height:1.65} /* ============================================================ Text utilities ============================================================ */ .lede{ font-size:var(--fs-lg); line-height:1.85; color:var(--fg-2); max-width:60ch; } .sub{ font-size:var(--fs-sm); line-height:1.85; color:var(--fg-3); max-width:66ch; } .tag{font-size:var(--fs-xs);color:var(--fg-3);line-height:1.6} .num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:500; letter-spacing:-.02em; direction:ltr; unicode-bidi:isolate; display:inline-block; } .mark{color:var(--brand)} .vh{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ============================================================ Page grain — barely there, kills banding on the dark theme ============================================================ */ .grain{ position:fixed;inset:0;z-index:90;pointer-events:none; opacity:var(--grain-opacity);mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,"); } /* ============================================================ Layout primitives ============================================================ */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} .section{position:relative;padding-block:clamp(56px,7vw,110px);border-top:1px solid var(--line)} .section:first-of-type{border-top:0} .section__glow{position:absolute;inset:0;pointer-events:none;background:var(--glow)} .shead{ display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; padding-bottom:12px;border-bottom:1px solid var(--line); margin-bottom:clamp(24px,3vw,44px); } .shead__i{ font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--brand); font-variant-numeric:tabular-nums;flex:none;direction:ltr; } .shead__t{font-family:var(--font-display);font-weight:700;font-size:var(--fs-sm);color:var(--fg-2)} .shead__s{ margin-inline-start:auto;font-size:var(--fs-xs);color:var(--fg-3); display:inline-flex;align-items:center;gap:8px; } .pulse{ width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none; animation:pulse 2.4s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:.3;transform:scale(.75)}50%{opacity:1;transform:scale(1)}} .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)} .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)} .split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(22px,3vw,52px);align-items:start} @media (max-width:1000px){ .grid-2,.grid-3,.split{grid-template-columns:minmax(0,1fr)} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important; } }