/* ==========================================================================
   saroshahmed.com — stylesheet

   Every color, typeface and measurement comes from the :root block below.
   Change a value there and the whole site re-skins. Nothing else needs editing.

   Layout model: the classic academic homepage. A plain identity column on the
   left — portrait, name, credentials, CV and profile links — and the page
   content on the right, with one flat row of text navigation links across the
   top of it. Both the identity column and the nav row stay put while you
   scroll, so contact and the CV are never a scroll away, but neither carries
   any visual apparatus. Below 860px everything stacks into one column.
   ========================================================================== */

:root{
  --paper:       #F6F1E4;   /* oat cream — page base */
  --paper-2:     #EFE8D6;   /* deeper cream — subtle fills */
  --paper-3:     #E6DCC4;   /* hairlines, edges */
  --ink:         #1B1D1A;   /* body text */
  --ink-soft:    #565A54;   /* secondary text */
  --forest:      #22402F;   /* primary brand — headings, links, button */
  --forest-mid:  #43684F;   /* hover states */
  --brass:       #8E7423;   /* accents, dates, small labels */
  --brass-light: #C9B26B;   /* unused on light, kept for parity */

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --side-w: 264px;          /* identity column */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max: 1140px;            /* whole shell */
  --rule: 1px solid var(--paper-3);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Anchor jumps must land below BOTH sticky bars (top nav + section menu). */
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--topnav-h, 6.5rem) + 3.6rem); }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:350;
  font-size:clamp(1.0625rem,1rem + 0.3vw,1.1875rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:var(--forest); text-decoration-color:var(--paper-3); text-underline-offset:3px; }
a:hover{ text-decoration-color:var(--brass); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* --------------------------------------------------------- Type roles --- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-variation-settings:"SOFT" 20,"WONK" 1;
  font-weight:500;
  color:var(--forest);
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0;
  overflow-wrap:break-word;
}
h1{ font-size:clamp(2rem,1.55rem + 1.8vw,2.7rem); font-weight:500; }
h2{ font-size:clamp(1.5rem,1.28rem + 1vw,1.9rem); }
h3{ font-size:1.18rem; font-weight:600; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.lede{ color:var(--ink-soft); max-width:62ch; }

/* ============================================================== Shell ==== */
.shell{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:var(--side-w) minmax(0,1fr);
  gap:clamp(2rem,1.5rem + 2.5vw,4rem);
  align-items:start;
}

/* -------------------------------------------------- Identity column ----- */
.side{
  position:sticky; top:0;
  max-height:100vh; max-height:100dvh;
  overflow-y:auto;
  padding-block:2.5rem;
}
.side__portrait{
  margin:0 0 1.2rem;
  border:1px solid var(--paper-3);
}
.side__portrait img{ width:100%; height:auto; }
.side__name{
  font-family:var(--display); font-variation-settings:"SOFT" 20,"WONK" 1;
  font-size:1.45rem; font-weight:600; color:var(--forest); line-height:1.2;
}
/* Same size as the title line below it, per the client. */
.side__creds{
  font-family:var(--mono); font-size:1rem; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--brass); margin:0.45rem 0 0.9rem;
}
.side__title{ font-size:0.95rem; color:var(--ink-soft); line-height:1.5; margin:0 0 1.4rem; }

/* Plain link list — the shafnehal pattern. One link per line, no boxes. */
.side__links{ list-style:none; margin:0; padding:0.4rem 0 0; border-top:var(--rule); }
.side__links li{ padding:0.3rem 0; font-size:0.98rem; }
.side__links a{ text-decoration:none; }
.side__links a:hover{ text-decoration:underline; text-decoration-color:var(--brass); }
.side__links .glyph{ color:var(--brass); font-size:0.85em; margin-left:0.3em; }

/* ------------------------------------------------------ Content column -- */
.content{ min-width:0; padding-block:0 3rem; }

/* One flat row of text links. Sticky so Contact is always in reach. */
.topnav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,241,228,0.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:var(--rule);
  padding:1.1rem 0 0.8rem;
  display:flex; flex-wrap:wrap; gap:0.35rem 1.35rem;
}
.topnav a{
  font-size:1rem; text-decoration:none; color:var(--ink-soft);
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.topnav a:hover{ color:var(--forest); border-bottom-color:var(--brass); }
.topnav a.topnav__hot{ color:var(--forest); font-weight:500; border-bottom-color:var(--brass); }
.topnav a[aria-current="page"]{ color:var(--forest); font-weight:500; border-bottom-color:var(--brass); }

/* ------------------------------------------------------------ Blocks ---- */
/* A page is a stack of blocks: heading, content, hairline between. */
.block{ padding-block:2.4rem; }
.block + .block{ border-top:var(--rule); }
.block > h2{ margin-bottom:1.2rem; }

.pagehead{ padding-block:2.6rem 2.2rem; }
.pagehead .lede{ margin-top:0.9rem; }
.pagehead + .block{ border-top:var(--rule); }
.subnav + .block{ border-top:0; }

/* Sub-index for long record pages. Sticky just below the top nav, so the
   section menu never scrolls away — the nav row's measured height arrives in
   --topnav-h (set by main.js; the fallback covers a one-line nav). */
.subnav{
  position:sticky; top:var(--topnav-h, 6.5rem); z-index:40;
  display:flex; flex-wrap:wrap; gap:0.3rem 1.3rem;
  font-family:var(--mono); font-size:0.8rem; letter-spacing:0.08em;
  text-transform:uppercase;
  margin-top:0;
  padding:0.55rem 0;
  background:rgba(246,241,228,0.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:var(--rule);
}
.subnav a{ text-decoration:none; color:var(--brass); }
.subnav a:hover{ text-decoration:underline; }

/* Expandable "More" on the home page About. */
.more{ margin-top:0.35rem; }
.more summary{
  list-style:none; cursor:pointer; width:max-content;
  color:var(--forest); font-weight:500;
  border-bottom:1px solid var(--paper-3);
}
.more summary::-webkit-details-marker{ display:none; }
.more summary:hover{ border-bottom-color:var(--brass); }
.more:not([open]) .more__close{ display:none; }
.more[open] .more__open{ display:none; }
.more__body{ margin-top:1.05rem; }

/* Editor-applied text sizes. Semantic steps, not free-form values. */
.txt-lg{ font-size:1.16em; }
.txt-sm{ font-size:0.87em; }

/* Record lists without the year column (education degrees). */
.roles--plain .role{ grid-template-columns:1fr; }

/* ----------------------------------------------------- News / updates --- */
.news{ list-style:none; margin:0; padding:0; }
.news li{
  display:grid; grid-template-columns:6.5rem 1fr; gap:1.2rem;
  padding:0.65rem 0;
}
.news .when{ font-family:var(--mono); font-size:0.85rem; color:var(--brass); padding-top:0.2rem; }
.news p{ margin:0; font-size:1rem; }
@media (max-width:600px){ .news li{ grid-template-columns:1fr; gap:0.15rem; } }

/* ----------------------------------------------------- Plain item list -- */
/* Services, planned courses — a title line and one sentence. */
.items{ list-style:none; margin:0; padding:0; }
.items li{ padding:0.85rem 0; }
.items li + li{ border-top:var(--rule); }
.items h3{ margin-bottom:0.25rem; }
.items p{ margin:0; font-size:1rem; color:var(--ink-soft); }
.tag{
  font-family:var(--mono); font-size:0.75rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--brass); margin-left:0.6em;
}

/* ------------------------------------------------- Citations / record --- */
.cites{ list-style:none; margin:0; padding:0; }
.cite{ display:grid; grid-template-columns:4.5rem 1fr; gap:1.2rem; padding:1.05rem 0; }
.cite + .cite{ border-top:var(--rule); }
.cite__year{ font-family:var(--mono); font-size:0.88rem; color:var(--brass); padding-top:0.25rem; }
.cite__title{
  font-family:var(--display); font-variation-settings:"SOFT" 20,"WONK" 1;
  font-size:1.12rem; font-weight:600; color:var(--forest); line-height:1.35; margin-bottom:0.3rem;
}
.cite__meta{ font-size:0.96rem; color:var(--ink-soft); margin:0; }
.cite__venue{ font-style:italic; }
.cite__link{
  font-family:var(--mono); font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
  text-decoration:none; color:var(--brass);
}
.cite__link:hover{ text-decoration:underline; }
@media (max-width:600px){ .cite{ grid-template-columns:1fr; gap:0.3rem; } }

/* ------------------------------------------------------- Experience ----- */
.roles{ list-style:none; margin:0; padding:0; }
.role{ display:grid; grid-template-columns:7.5rem 1fr; gap:1.2rem; padding:1.05rem 0; }
.role + .role{ border-top:var(--rule); }
.role__span{ font-family:var(--mono); font-size:0.88rem; color:var(--brass); padding-top:0.25rem; }
.role__org{ font-size:0.96rem; color:var(--ink-soft); margin:0.15rem 0 0.4rem; }
.role p{ font-size:1rem; color:var(--ink-soft); margin:0; }
.role ul{ font-size:1rem; color:var(--ink-soft); margin:0.4rem 0 0; padding-left:1.1rem; }
.role li{ margin-bottom:0.25rem; }
@media (max-width:600px){ .role{ grid-template-columns:1fr; gap:0.3rem; } }

/* ------------------------------------------------------------ Button ---- */
.btn{
  display:inline-block;
  font-family:var(--body); font-size:1rem; font-weight:500;
  padding:0.8rem 1.5rem; border-radius:2px; text-decoration:none;
  border:1px solid var(--forest); background:var(--forest); color:var(--paper);
  cursor:pointer; transition:background .18s, border-color .18s;
}
.btn:hover{ background:var(--forest-mid); border-color:var(--forest-mid); }

/* ------------------------------------------------------------ Form ------ */
.form{ display:grid; gap:1.05rem; max-width:34rem; }
.field label{
  display:block; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:0.45rem;
}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--paper-3); border-radius:2px;
  padding:0.75rem 0.85rem; transition:border-color .18s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--forest-mid); }
.field textarea{ min-height:120px; resize:vertical; }
.field--error input,.field--error select,.field--error textarea{ border-color:#9A3B2A; }
.field__error{ font-size:0.88rem; color:#9A3B2A; margin:0.35rem 0 0; }
.field__error[hidden]{ display:none; }
.field__hint{ font-size:0.88rem; color:var(--ink-soft); margin:0.35rem 0 0; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
@media (max-width:600px){ .form__row{ grid-template-columns:1fr; } }
.form__status{ font-family:var(--mono); font-size:0.88rem; color:var(--forest-mid); margin:0; }
.form__status[hidden]{ display:none; }
.contact__direct{ font-family:var(--mono); font-size:0.92rem; }
.contact__direct button{
  color:var(--forest); background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:inherit; border-bottom:1px solid var(--paper-3);
}
.contact__direct button:hover{ border-bottom-color:var(--brass); }

/* ---------------------------------------------------------- Footer ------ */
/* A plain row of profile links, the shafnehal pattern. */
.footer{ border-top:var(--rule); margin-top:1rem; }
.footer__inner{
  max-width:var(--max); margin-inline:auto; padding:1.6rem var(--gutter);
  display:flex; flex-wrap:wrap; gap:0.5rem 1.4rem; align-items:center;
}
.footer a{
  font-size:0.95rem; text-decoration:none; color:var(--ink-soft);
}
.footer a:hover{ color:var(--forest); text-decoration:underline; text-decoration-color:var(--brass); }
.footer small{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em;
  color:var(--ink-soft); margin-left:auto;
}

/* ------------------------------------------------------------ Mobile ---- */
@media (max-width:860px){
  .shell{ grid-template-columns:1fr; gap:0; }
  .side{
    position:static; max-height:none; overflow:visible;
    padding-block:1.8rem 1.2rem;
    display:grid; grid-template-columns:5.2rem 1fr; gap:0 1.1rem;
    align-items:center;
  }
  .side__portrait{ margin:0; }
  .side__name{ font-size:1.28rem; }
  .side__creds{ margin-bottom:0; }
  .side__title{ display:none; }
  .side__links{
    grid-column:1 / -1; border-top:0; padding-top:0.9rem;
    display:flex; flex-wrap:wrap; gap:0.2rem 1.2rem;
  }
  .side__links li{ padding:0; font-size:0.95rem; }
  .footer small{ margin-left:0; flex-basis:100%; }
}

/* --------------------------------------------------------- Utilities ---- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--forest); color:var(--paper); padding:0.7rem 1.1rem;
  font-family:var(--mono); font-size:0.8rem; text-decoration:none;
}
.skip:focus{ left:0.5rem; top:0.5rem; }

:focus-visible{ outline:2px solid var(--forest-mid); outline-offset:2px; }