/* Sahand Hagi — site-specific layer. Loaded after tokens.css + base.css.
   Personal identity: HYBRID — serif headings (Newsreader) kept for warmth,
   engineered chrome inherited from base, gold accent, gold network motif. */
:root{
  --accent: var(--gold);
  --accent-on-black:#d7a63c;
}
:root[data-theme="dark"]{ --accent:#d7a63c; }

/* keep the literary serif for headings; give the hero a touch more weight */
h1,h2{ font-weight:600; }
.hero h1{ font-size:var(--step-hero); font-weight:600; letter-spacing:-.015em; }

/* ---- homepage header: transparent over the dark hero, solid once scrolled ---- */
body.home .site-head{ position:fixed; top:0; left:0; right:0; width:100%;
  background:transparent; border-bottom-color:transparent; backdrop-filter:none; }
body.home .site-head .brand{ color:#fff; }
body.home .site-head .brand .mark{ background:var(--accent-on-black); }
body.home .site-head .nav a{ color:var(--on-black-soft); }
body.home .site-head .nav a:hover{ color:#fff; }
body.home .site-head .nav a.cross{ color:var(--on-black-mute); }
body.home .site-head .theme-btn{ border-color:var(--line-dark-strong); color:var(--on-black-soft); }
body.home .site-head .theme-btn:hover{ color:#fff; border-color:#fff; }
body.home .site-head.solid{ background:var(--header-bg); border-bottom-color:var(--border);
  backdrop-filter:saturate(1.4) blur(10px); }
body.home .site-head.solid .brand{ color:var(--fg); }
body.home .site-head.solid .brand .mark{ background:var(--accent); }
body.home .site-head.solid .nav a{ color:var(--fg-soft); }
body.home .site-head.solid .nav a:hover{ color:var(--accent); }
body.home .site-head.solid .nav a.cross{ color:var(--fg-mute); }
body.home .site-head.solid .theme-btn{ border-color:var(--border-2); color:var(--fg-soft); }
@media (prefers-reduced-motion: reduce){ body.home .site-head{ transition:none; } }

/* ---- hero: dark, portrait beside text, gold network behind ---- */
/* homepage hero sits higher: trim the top padding to just clear the floating header */
body.home .hero .inner{ padding-block: clamp(4.5rem, 5vw, 5.25rem) clamp(2.8rem, 6vw, 4.5rem); }
/* let the hero lead fill the full width of its column instead of capping at 52ch */
body.home .hero .lead{ max-width:none; }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:2.4rem; align-items:center; }
@media (min-width:860px){ .hero-grid{ grid-template-columns:1.5fr .7fr; } }
.hero-head h1{ margin:0; }
/* full-width band under the title+portrait row: intro, actions, tags run edge to edge */
.hero-below{ margin-top: clamp(1.8rem, 3.5vw, 2.8rem); border-top:1px solid var(--line-dark); padding-top: clamp(1.6rem, 3vw, 2.2rem); }
.hero-below .lead{ max-width:none; margin:0; }
.hero-below .actions{ margin-top:1.8rem; }
.hero-below .kicker{ margin-top:1.6rem; }
.portrait{ width:100%; max-width:340px; aspect-ratio:4/5; border-radius:0;
  object-fit:cover; box-shadow:var(--shadow-2); border:1px solid var(--line-dark-strong);
  justify-self:center; filter:grayscale(.15) contrast(1.02); }
.hero .kicker{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem; }
.hero .kicker span{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-black-mute); border:1px solid var(--line-dark);
  border-radius:0; padding:.32rem .7rem; }

/* ---- career timeline ---- */
.tl{ margin-top:2rem; border-left:1px solid var(--border-2); padding-left:0; list-style:none; }
.tl li{ position:relative; padding:0 0 1.6rem 1.7rem; }
.tl li::before{ content:""; position:absolute; left:-5px; top:.42rem; width:9px; height:9px;
  border-radius:0; background:var(--accent); border:2px solid var(--bg); }
.tl .yr{ font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.06em; color:var(--fg-mute); }
.tl .role{ font-family:var(--font-display); font-weight:600; font-size:var(--step-1);
  color:var(--fg); line-height:1.2; margin:.1rem 0 .15rem; }
.tl .org{ color:var(--accent); font-weight:600; }
.tl p{ margin:.3rem 0 0; color:var(--fg-soft); max-width:60ch; }

/* ---- publications ---- */
.pub{ border-left:2px solid var(--accent); padding:.2rem 0 .2rem 1.2rem; margin:0 0 1.6rem; }
.pub .t{ font-family:var(--font-display); font-size:var(--step-1); color:var(--fg); font-weight:600; }
.pub .m{ font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.04em;
  color:var(--fg-mute); margin:.25rem 0 .45rem; }
.pub p{ color:var(--fg-soft); margin:0; }

.lecture{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.7rem; }
.lecture span{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; color:var(--fg-soft);
  border:1px solid var(--border-2); border-radius:0; padding:.32rem .6rem; }

/* ---- ventures (kept as flat, sharp cards) ---- */
.venture-link{ text-decoration:none; color:inherit; display:block; }
.venture-link .card{ transition:.15s ease; height:100%; }
.venture-link:hover .card{ background:var(--surface); }
.venture-link:hover .card h3{ color:var(--accent); }
.card .go{ color:var(--accent); font-family:var(--font-mono); font-size:var(--step--1);
  letter-spacing:.04em; margin-top:.6rem; display:inline-block; }

/* ---- writing archive page (writing.html) ---- */
.archive-toc{ list-style:none; padding:0; margin:2rem 0 0; border-top:1px solid var(--border-2); }
.archive-toc li{ border-bottom:1px solid var(--border); }
.archive-toc a{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  text-decoration:none; color:var(--fg); padding:.9rem 0; }
.archive-toc a:hover .at-title{ color:var(--accent); }
.at-title{ font-family:var(--font-display); font-size:var(--step-1); font-weight:600; }
.at-meta{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--fg-mute); white-space:nowrap; }
.article{ padding-top:2.6rem; margin-top:2.6rem; border-top:1px solid var(--border); scroll-margin-top:84px; }
.article h2{ margin-bottom:.3rem; }
.article .a-meta{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--fg-mute); margin-bottom:1.4rem; }
.article .a-body{ max-width:var(--measure); }
.article .a-body p{ margin:0 0 1.1rem; }
.article .a-body h3{ margin-top:1.8rem; }
.backtop{ font-family:var(--font-mono); font-size:var(--step--1); color:var(--fg-mute);
  text-decoration:none; display:inline-block; margin-top:1rem; }
.backtop:hover{ color:var(--accent); }