/* amirmbaram.com - one stylesheet for every page, English and Persian.
   Layout after lhpedersen.com: white header, centred page title, white / tinted / grey
   full-width bands. Tuned for easy reading (11 Oct 2026): dark text on light grounds only,
   near-black text, regular-weight menu. Text fills the content column, which grows with the
   window up to --wrap (Amir, 11 Oct: text should widen with the window); only a single post keeps
   a reading measure. */
/* Fonts are served from this site (assets/fonts/), so phones show the same type as a
   laptop with B Nazanin installed: Lato for Latin, B Nazanin for Persian. */
@font-face{font-family:"Lato";font-weight:300;font-display:swap;src:url(fonts/lato-300-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Lato";font-weight:300;font-display:swap;src:url(fonts/lato-300-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lato";font-weight:400;font-display:swap;src:url(fonts/lato-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Lato";font-weight:400;font-display:swap;src:url(fonts/lato-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Lato";font-weight:700;font-display:swap;src:url(fonts/lato-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Lato";font-weight:700;font-display:swap;src:url(fonts/lato-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"B Nazanin Web";font-weight:400;font-display:swap;src:url(fonts/bnazanin-400.woff2) format("woff2")}
@font-face{font-family:"B Nazanin Web";font-weight:700;font-display:swap;src:url(fonts/bnazanin-700.woff2) format("woff2")}
:root{
  /* Amir's palette ج (control vault, _assets/figure-palette.md): Khatam blue + crimson */
  --blue:#1B3683;        /* titles, headings, links, news dates */
  --accent:#B8304F;      /* crimson: current page, hover, the rule under the title */
  --grey:#E8EBF3;        /* tinted bands */
  --ink:#1F2940; --ink-2:#2E3A55; --muted:#5A6377;   /* body text: palette navy, darkened */
  --line:#E1E5EF; --line-grey:#CDD3E4;
  --bg:#fff;              /* page, header, drop-down */
  --shadow:rgba(27,54,131,.28); --shadow-soft:rgba(27,54,131,.14);
  color-scheme:light;
  --f-en:"Lato",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-fa:"B Nazanin Web","B Nazanin","Lato",Tahoma,serif;
  --wrap:960px;
  /* Persian sizes are set for B Nazanin, which every visitor now gets from the site. */
  --fs:1; --fa-lh:2.05;
  --measure:33em;        /* ~75 characters of Lato: used only for a single post */
}
/* Dark mode: follows the device setting; the button in the header overrides it and the
   choice is kept in localStorage ("theme"). Colours are palette ج lightened for a dark
   ground - every text colour is at least 6:1 against both the page and the grey bands. */
:root[data-theme="dark"]{
  --bg:#10141D; --grey:#1A2131; --ink:#E2E6EE; --ink-2:#C5CCDA; --muted:#97A0B3;
  --blue:#8EA6EE; --accent:#EE7C96; --line:#252D40; --line-grey:#2F3850;
  --shadow:rgba(0,0,0,.55); --shadow-soft:rgba(0,0,0,.45); color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#10141D; --grey:#1A2131; --ink:#E2E6EE; --ink-2:#C5CCDA; --muted:#97A0B3;
    --blue:#8EA6EE; --accent:#EE7C96; --line:#252D40; --line-grey:#2F3850;
    --shadow:rgba(0,0,0,.55); --shadow-soft:rgba(0,0,0,.45); color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.7 var(--f-en)}
html[lang="fa"] body{font:400 calc(20.5px*var(--fs))/var(--fa-lh) var(--f-fa)}
html[lang="fa"]{--measure:27em}   /* ~80 Persian characters */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent)}
p{margin:0 0 14px}
img{max-width:100%}
.fa-in{font-family:var(--f-fa);font-size:calc(1.22em*var(--fs));line-height:1;unicode-bidi:isolate}
.en{font-family:var(--f-en);font-size:calc(.8em/var(--fs));direction:ltr;unicode-bidi:isolate}   /* Latin words inside Persian text */
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:var(--bg);padding:8px 12px;z-index:20}
.skip:focus{inset-inline-start:8px}

/* ---- header: stays white, with a clear rule under it and a soft shadow once the page scrolls ---- */
.site-header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:2px solid var(--line-grey);transition:box-shadow .2s ease}
.site-header.scrolled{box-shadow:0 6px 18px var(--shadow)}
.site-header .wrap{max-width:1240px;display:flex;align-items:center;gap:8px;min-height:64px}
.menu{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.menu a{font:400 16px/1 var(--f-en);color:var(--ink-2);text-decoration:none;padding:12px 12px;white-space:nowrap;transition:color .15s ease}
.menu a:hover{color:var(--blue)}
.menu a[aria-current="page"]{color:var(--accent);font-weight:700}
html[lang="fa"] .menu a{font:400 calc(19px*var(--fs))/1 var(--f-fa)}
html[lang="fa"] .menu a[aria-current="page"]{font-weight:700}
/* language switch: globe with a small drop-down (English / فارسی), centred under the globe */
.tools{margin-inline-start:auto;display:flex;align-items:center}
.lang{position:relative}
.theme-btn{background:none;border:0;padding:10px;cursor:pointer;color:var(--blue);transition:color .15s ease}
.theme-btn:hover{color:var(--accent)}
.theme-btn svg{display:block;width:22px;height:22px}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .sun{display:block}:root:not([data-theme="light"]) .theme-btn .moon{display:none}}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:10px;color:var(--blue);transition:color .15s ease}
.lang summary::-webkit-details-marker{display:none}
.lang summary svg{display:block;width:22px;height:22px}
.lang summary:hover,.lang[open] summary{color:var(--accent)}
/* focus ring only for keyboard use, in the accent colour */
.lang summary:focus:not(:focus-visible){outline:none}
.lang summary:focus-visible,.theme-btn:focus-visible,.menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:4px}
.lang ul{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);z-index:20;margin:0;padding:4px 0;list-style:none;width:max-content;text-align:center;background:var(--bg);border:1px solid var(--line-grey);box-shadow:0 8px 20px var(--shadow-soft)}
.lang li a{display:block;padding:6px 16px;color:var(--ink);text-decoration:none;font:400 16px/1.5 var(--f-en)}
.lang li a:lang(fa){font:400 calc(19px*var(--fs))/1.5 var(--f-fa)}
.lang li a:hover{background:var(--grey);color:var(--ink)}
.lang li a[aria-current]{color:var(--accent);font-weight:700}
.menu-btn{display:none;background:none;border:0;padding:10px;margin-inline-start:-10px;cursor:pointer;color:var(--ink-2)}
.menu-btn svg{display:block;width:24px;height:24px;stroke:currentColor}

/* ---- page title ---- */
.page-title{text-align:center;padding:60px 0 48px}
.page-title h1{display:inline-block;font:300 clamp(36px,5vw,50px)/1.2 var(--f-en);color:var(--blue);margin:0}
.page-title h1::after{content:"";display:block;width:100%;height:3px;background:var(--accent);margin:14px 0 6px}  /* as wide as the title */
.page-title .fa-name{font:600 calc(30px*var(--fs))/1.5 var(--f-fa);color:var(--ink-2);margin:10px auto 0}
.page-title .lat{font:300 24px/1.4 var(--f-en);color:var(--ink-2);margin:6px auto 0;direction:ltr;unicode-bidi:isolate}
.page-title .sub{max-width:62ch;margin:14px auto 0;color:var(--ink-2)}
.page-title .dots{margin:16px auto 0;max-width:70ch}
html[lang="fa"] .page-title h1{font:600 clamp(calc(40px*var(--fs)),calc(6vw*var(--fs)),calc(56px*var(--fs)))/1.35 var(--f-fa)}

/* ---- bands ---- */
.band{padding:56px 0}
.band.grey{background:var(--grey)}
.band.tint{background:var(--grey);border-top:4px solid var(--blue)}   /* the News band: light, with a Khatam-blue edge */
h2{font:400 26px/1.35 var(--f-en);color:var(--blue);margin:0 0 20px}
h3{margin:0}
html[lang="fa"] h2{font:600 calc(31px*var(--fs))/1.5 var(--f-fa)}

/* home: bio */
.bio{display:grid;grid-template-columns:270px 1fr;gap:48px;align-items:start}
.bio img{display:block;width:100%;height:auto}
.bio .lead{font-size:18.5px;color:var(--ink-2)}
html[lang="fa"] .bio .lead{font-size:calc(22px*var(--fs))}

/* home: contact, centred (both languages) */
#contact{text-align:center}
#contact .dots{justify-content:center}

/* home: news */
.news{list-style:none;margin:0;padding:0}
.news li{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:8px 0}
.news .d{font-weight:700;color:var(--blue);white-space:nowrap}
html[lang="fa"] .news li{grid-template-columns:150px 1fr}

/* links separated by dots: underlined only on hover */
.dots{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:2px}
.page-title .dots{justify-content:center}
.dots a{white-space:nowrap;text-decoration:none}
.dots a:hover{text-decoration:underline}
.dots .sep{color:var(--muted);padding:0 7px}
html[lang="fa"] .dots a{font:400 16.5px/1.7 var(--f-en);unicode-bidi:isolate}

/* research */
.work h3{font:700 18.5px/1.5 var(--f-en)}
.work .meta{color:var(--muted);margin:2px 0 10px}
html[lang="fa"] .work h3{font:700 calc(23px*var(--fs))/1.8 var(--f-fa)}
.cols{columns:2;column-gap:48px;margin:0;padding-inline-start:20px}
.cols li{break-inside:avoid;padding:2px 0}

/* cv rows */
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:14px 0;border-top:1px solid var(--line)}
.band.grey .rows li{border-top-color:var(--line-grey)}
.rows li:first-child{border-top:0;padding-top:0}
.rows .when{color:var(--muted)}
.rows h3{font:700 17px/1.6 var(--f-en)}
.rows .where{color:var(--ink-2)}
html[lang="fa"] .rows h3{font:700 calc(21px*var(--fs))/1.8 var(--f-fa)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.grid2 h3{font:700 17px/1.6 var(--f-en);color:var(--ink-2);margin:0 0 6px}
.grid2 ul{margin:0;padding-inline-start:20px}
html[lang="fa"] .grid2 h3{font:700 calc(21px*var(--fs))/1.8 var(--f-fa)}

/* writing */
.posts{list-style:none;margin:0;padding:0}
.posts li{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:14px 0;border-top:1px solid var(--line-grey)}
.posts li:first-child{border-top:0;padding-top:0}
.posts .d{color:var(--muted)}
.posts h3{font:700 18.5px/1.5 var(--f-en)}
.posts p{margin:4px 0 0}
.empty{color:var(--ink-2)}

/* a single post */
.post{max-width:var(--measure);margin:0 auto}
.post .meta{color:var(--muted);text-align:center;margin:-28px 0 40px}
.post h2{margin-top:36px}
.post figure{margin:28px 0}
.post figcaption{color:var(--muted);font-size:14.5px;margin-top:6px}
.post .back{margin-top:40px}

/* ---- footer ---- */
.site-footer{border-top:1px solid var(--line);padding:26px 0 44px;color:var(--muted);font-size:14px}
.site-footer a{color:var(--muted)}
html[lang="fa"] .site-footer{font-size:calc(17px*var(--fs))}

/* ---- narrow screens ---- */
@media (max-width:760px){
  .wrap{padding:0 20px}
  .site-header .wrap{flex-wrap:wrap;min-height:56px}
  .tools{order:1}
  /* phones: the globe sits ~42px from the screen edge, so the centred drop-down is a little narrower and nudged 5px inward to keep a gap */
  .lang li a{padding:6px 12px}
  .lang ul{transform:translateX(calc(-50% - 5px))}
  html[dir="rtl"] .lang ul{transform:translateX(calc(-50% + 5px))}
  .menu{order:2;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -12px 4px}
  .menu::-webkit-scrollbar{display:none}
  html.js .menu-btn{display:block}
  html.js .menu{display:none}
  html.js .site-header.open{box-shadow:0 6px 18px var(--shadow)}
  html.js .site-header.open .menu{display:flex;flex-direction:column;align-items:stretch;margin:0 0 10px;overflow:visible}
  html.js .site-header.open .menu a{padding:12px 4px;border-top:1px solid var(--line)}
  .page-title{padding:40px 0 34px}
  .band{padding:40px 0}
  .bio{grid-template-columns:1fr;gap:24px}
  .bio img{max-width:240px}
  .news li,.posts li,.rows li,html[lang="fa"] .news li{grid-template-columns:1fr;gap:0}
  .cols{columns:1}
  .grid2{grid-template-columns:1fr;gap:28px}
}