/* aboutali.github.io · v4 "Academic" identity.
   Built from the design handoff: tokens (fonts, colors, typography, spacing)
   and components concatenated into one file so Pages serves a single request. */

/* Self-hosted, latin subset, OFL. See assets/fonts/LICENSE-NOTE.md */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url("fonts/newsreader-roman-latin-var.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url("fonts/newsreader-italic-latin-var.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/jetbrains-mono-latin-var.woff2") format("woff2")}

:root{
  /* base */
  --white:#FFFFFF; --stone-100:#ECEAE4; --black:#141414; --grey-800:#333333; --grey-600:#555555;
  --grey-500:#888888; --grey-300:#BBBBBB; --grey-150:#E2E2E2;
  /* semantic */
  --paper:var(--white); --desk:var(--stone-100);
  --ink:var(--black); --ink-2:var(--grey-800); --graphite:var(--grey-600); --muted:var(--grey-500);
  --rule:var(--grey-300); --rule-row:var(--grey-150);
  --text-body:var(--ink); --text-secondary:var(--ink-2); --text-meta:var(--graphite);
  --surface-page:var(--paper); --surface-desk:var(--desk);
  --status-up:var(--ink); --status-down:var(--muted);
}

:root{
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --font-mono:"JetBrains Mono","SFMono-Regular","Courier New",monospace;
  --t-title:500 clamp(38px,6.4vw,62px)/1.05 var(--font-serif);
  --t-subtitle:italic 400 clamp(19px,2.4vw,23px)/1.3 var(--font-serif);
  --t-h2:700 24px/1.3 var(--font-serif);
  --t-h3:700 19px/1.3 var(--font-serif);
  --t-body:400 17.5px/1.6 var(--font-serif);
  --t-small:400 15.5px/1.45 var(--font-serif);
  --t-caption:italic 400 14px/1.5 var(--font-serif);
  --t-label-size:17px; --t-label-track:.06em;
  --t-mono:500 13.5px/1.4 var(--font-mono);
  --t-mono-s:400 12px/1.4 var(--font-mono);
}

:root{
  --s-1:4px; --s-2:8px; --s-3:14px; --s-4:18px; --s-5:28px; --s-6:40px; --s-7:56px; --s-8:72px; --s-9:96px;
  --rule-heavy:1.5px; --rule-mid:.75px; --rule-hair:.5px;
  --sheet:880px; --measure:68ch; --abstract:560px;
  --sheet-pad-x:clamp(22px,8vw,112px); --sheet-pad-top:clamp(28px,7vw,96px);
  --shadow-sheet:0 1px 2px rgba(0,0,0,.06),0 12px 40px rgba(0,0,0,.06);
  --radius:0;
}

/* Plain-CSS components for the static site (no JS). */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--font-serif);font-size:17.5px;line-height:1.6}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.link{text-decoration:underline;text-decoration-thickness:.5px;text-underline-offset:3px}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;font-family:var(--font-mono);font-size:13px}
.skip:focus{left:0}

/* sheet */
.desk{padding:clamp(12px,4vw,56px) clamp(8px,3vw,40px)}
.sheet{max-width:var(--sheet);margin:0 auto;background:var(--paper);
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 12px 40px rgba(0,0,0,.06);
  padding:clamp(28px,7vw,96px) clamp(22px,8vw,112px) 56px}

/* running head */
.runhead{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;
  font-variant-caps:all-small-caps;font-size:17px;letter-spacing:.06em;color:var(--graphite);
  border-bottom:var(--rule-hair) solid var(--ink);padding-bottom:8px}
.runhead a{color:var(--graphite);white-space:nowrap}
.runhead nav{display:flex;gap:6px 18px;flex-wrap:wrap}
.runhead a[aria-current="page"]{color:var(--ink)}

/* title block */
.titleblock{text-align:center;padding:clamp(48px,8vw,88px) 0 40px}
.kicker{margin:0;font-variant-caps:all-small-caps;font-size:17px;letter-spacing:.08em;color:var(--graphite)}
.titleblock h1{margin:10px 0 0;font-weight:500;font-size:clamp(36px,6.4vw,62px);line-height:1.05}
.subtitle{margin:16px 0 0;font-style:italic;font-size:clamp(19px,2.4vw,23px);color:var(--ink-2)}
.abstract{max-width:560px;margin:0 auto;text-align:justify;hyphens:auto}
.keywords b{font-style:italic}

/* headings */
h2.sec{margin:var(--s-7) 0 var(--s-3);font-size:24px;font-weight:700;display:flex;gap:18px}
h3.sub{margin:var(--s-5) 0 var(--s-2);font-size:19px;font-weight:700;display:flex;gap:16px}
.prose{max-width:var(--measure);text-align:justify;hyphens:auto}
.prose p{margin:0}
.prose p + p{text-indent:1.5em}

/* booktabs table */
.caption{margin:var(--s-5) 0 var(--s-2);text-align:center;font-size:15.5px}
.caption b{font-weight:400;font-variant-caps:all-small-caps;font-size:17px;letter-spacing:.04em}
.table{border-top:var(--rule-heavy) solid var(--ink);border-bottom:var(--rule-heavy) solid var(--ink)}
.table .row{display:grid;grid-template-columns:28px minmax(0,11rem) minmax(0,1fr) auto;gap:6px 16px;
  padding:10px 0;align-items:baseline;font-size:15.5px;line-height:1.45}
.table .head{border-bottom:var(--rule-mid) solid var(--ink);font-weight:700;font-size:15px;padding:8px 0}
.table.facts .row{grid-template-columns:minmax(0,9rem) minmax(0,1fr);border-bottom:var(--rule-hair) solid var(--rule-row)}
.table.facts .row:last-child{border-bottom:0}
.table.facts .row > :first-child{font-weight:700}
.led-up{font-family:var(--font-mono);font-size:12px;color:var(--ink)}
.led-down{font-family:var(--font-mono);font-size:12px;color:var(--muted)}

/* remark */
.remark{padding:12px 0;border-block:var(--rule-hair) solid var(--rule);display:flex;gap:14px;align-items:baseline}
.remark .k{font-variant-caps:all-small-caps;font-weight:700;font-size:17px;letter-spacing:.05em;flex:none}
.remark .v{font-style:italic;font-size:15.5px;color:#444;min-width:0;overflow-x:auto;white-space:nowrap}

/* references + footnotes */
.refs{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px 6px;font-size:16px;line-height:1.55}
.refs .doi{font-family:var(--font-mono);font-size:12.5px;color:var(--graphite)}
sup{font-size:11px}
.fn-rule{width:160px;border-top:var(--rule-hair) solid var(--ink);margin-top:var(--s-8)}
.fn{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.folio{margin:40px 0 0;text-align:center;font-size:15px}

/* actions */
.btn{display:inline-block;font-family:var(--font-mono);font-size:13px;color:var(--ink);
  border:var(--rule-hair) solid var(--ink);padding:7px 14px;background:none;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.mono{font-family:var(--font-mono);font-size:13px}
.box{padding:14px 18px;border:var(--rule-hair) solid var(--ink)}

/* CV rows */
.cv-item{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:4px 20px;padding:14px 0;
  border-bottom:var(--rule-hair) solid var(--rule-row);align-items:baseline}
.cv-item .when{font-family:var(--font-mono);font-size:12px;color:var(--graphite)}
.cv-item .role{font-size:17px;font-weight:700;line-height:1.35}
.cv-item .org{font-size:15.5px;font-style:italic;color:var(--graphite)}

@media (max-width:560px){
  .table .row{grid-template-columns:22px minmax(0,1fr)}
  .table .row > :nth-child(3),.table .row > :nth-child(4){grid-column:2}
  .cv-item{grid-template-columns:1fr}
}

@media print{
  body{background:#fff;font-size:11pt}
  .desk{padding:0} .sheet{box-shadow:none;padding:0;max-width:none}
  .runhead nav,.btn,.skip{display:none !important}
  .cv-item{break-inside:avoid}
  @page{margin:18mm}
}

/* Site additions beyond the handoff components. */

/* generate.py emits led-up / led-down / led-unknown. Offline and unknown
   render as an open circle: status is carried by shape, not hue. */
.led-unknown{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.led-down,.led-unknown{font-size:0}
.led-down::before,.led-unknown::before{content:"\25CB";font-family:var(--font-mono);font-size:12px}

/* Guestbook avatars (generate.py): square, greyscale, hairline border. */
.gb-avatar{width:24px;height:24px;border:.5px solid var(--ink);filter:grayscale(1);vertical-align:middle;margin-right:8px;object-fit:cover}

/* Guestbook entries as generate.py emits them. */
.gb-entry{margin:0 0 12px;font-size:15.5px;line-height:1.45}
.gb-entry:last-child{margin-bottom:0}
.gb-date{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-left:6px}
.gb-empty{margin:0;font-style:italic;color:var(--graphite)}

/* Match the approved mockups: their 880px max-width bounds the sheet's
   content box, with padding outside it. */
.sheet{box-sizing:content-box}
/* The keywords line is set ragged-right in the mockups, not justified. */
.keywords{text-align:left;hyphens:manual}
/* Below 560px rows collapse to two columns; the header row would stack its
   labels as orphan lines, so hide it there. */
@media (max-width:560px){.table .row.head{display:none}}

/* Portrait on the homepage title block. Greyscale with a hairline border,
   like every image in the system. */
.portrait{display:block;width:120px;height:150px;margin:0 auto 26px;object-fit:cover;
  filter:grayscale(1);border:.5px solid var(--ink)}