/* Shared design system for igorch1955.github.io.
   index.html and article.html both link to this file — change a value
   here once, and it updates everywhere. Each page keeps only the CSS
   that is genuinely specific to that page in its own <style> block. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg: #0a0c10;
  --bg-panel: #0f1319;
  --ink: #e9e6dd;
  --ink-dim: #9aa0a8;
  --ink-body: #b7bcc3;
  --gold: #c8a250;
  --gold-dim: #7a6636;
  --line: #1c222b;
  --teal: #3d6b73;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--gold-dim); color:var(--ink); }

a{ color:var(--gold); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s; }
a:hover{ border-bottom-color:var(--gold); }
a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.wrap{ max-width:760px; margin:0 auto; padding:0 28px; }

/* Small uppercase mono label used as a page-level marker — the site name
   eyebrow on the homepage, and the kicker above an article title. */
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:22px;
}

.status-msg{ color:var(--ink-dim); font-family:'JetBrains Mono', monospace; font-size:.85rem; }

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

/* Section label and publication cards — used on the homepage and /archive/ */
.section-label{
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:16px;
}

/* ---------- WORKS ---------- */
.work{
  position:relative;
  padding:28px 0 28px 26px;
  border-left:1px solid var(--line);
  margin-bottom:4px;
  display:flex;
  gap:22px;
  align-items:flex-start;
}
.work::before{
  content:'';
  position:absolute; left:-4.5px; top:34px;
  width:8px; height:8px; border-radius:50%;
  background:var(--bg);
  border:1.5px solid var(--gold);
}
.work-cover{
  flex:0 0 auto;
  width:140px;
  border-radius:4px;
  overflow:hidden;
  border:1px solid #3a3f47;
  box-shadow:0 10px 26px rgba(0,0,0,.55), 0 2px 8px rgba(160,160,170,.18);
}
.work-cover img{
  display:block;
  width:100%;
  height:auto;
  filter:brightness(1.22) contrast(1.05);
}
.work-body{ flex:1 1 auto; min-width:0; }
.work-kicker{
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:8px;
}
.work h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.32rem;
  margin:0 0 10px 0;
  line-height:1.3;
}
.work p{
  color:var(--ink-dim);
  font-size:.95rem;
  max-width:58ch;
  margin:0 0 14px 0;
}
.work-links{
  display:flex; gap:18px; flex-wrap:wrap;
  font-family:'JetBrains Mono', monospace;
  font-size:.8rem;
}
.subsection-heading{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.05rem;
  color:var(--ink-dim);
  margin:0 0 18px 0;
  padding-top:8px;
}
.subsection-heading:not(:first-child){ margin-top:48px; }

@media (max-width:560px){
  .work{ flex-direction:column; }
  .work-cover{ width:150px; }
}