/* =========================================================
   FlexOffers — shared stylesheet
   Design language: technical/drafting documentation.
   Two accents map directly onto the FlexOffer concept itself:
   amber = the committed baseline schedule, teal = the flexibility
   band (min/max range) around it. Used consistently as encoding,
   not decoration.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* color */
  --paper: #F1F3EF;
  --paper-raised: #FFFFFF;
  --ink: #142027;
  --ink-soft: #4B5B60;
  --ink-faint: #7C8B8E;
  --baseline: #B96B22;
  --baseline-ink: #7A4415;
  --baseline-tint: #F1E0CB;
  --flex: #1B6E72;
  --flex-ink: #0F4548;
  --flex-tint: #D9EAE9;
  --line: #D4D9D0;
  --line-strong: #B7C0B6;

  /* type */
  --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --text-xs: 0.72rem;
  --text-sm: 0.85rem;
  --text-base: 1.05rem;
  --text-md: 1.2rem;
  --text-lg: 1.5rem;
  --text-xl: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
  --text-2xl: clamp(2.4rem, 1.6rem + 3.4vw, 4.1rem);

  /* space */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --container: 1160px;
  --radius-sm: 2px;
  --radius-md: 5px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin: 0;
  background: var(--paper);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
@media (max-width: 640px){ .container{ padding: 0 var(--sp-4); } }

a{ color: var(--flex-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover{ color: var(--baseline-ink); }
:focus-visible{ outline: 2.5px solid var(--flex); outline-offset: 3px; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}

p{ margin: 0 0 1em; max-width: 62ch; }
.lede{ font-size: var(--text-md); color: var(--ink-soft); max-width: 58ch; }

code, .mono{ font-family: var(--font-mono); }

.kicker{
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--flex-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.kicker::before{
  content: "";
  width: 8px; height: 8px;
  background: var(--flex);
  display: inline-block;
}

.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link{
  position: absolute; left: var(--sp-4); top: -60px;
  background: var(--ink); color: var(--paper);
  padding: var(--sp-3) var(--sp-4); z-index: 100;
  font-family: var(--font-mono); font-size: var(--text-sm);
  transition: top 0.15s ease;
}
.skip-link:focus{ top: var(--sp-3); }

/* ---------- nav ---------- */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: rgba(241,243,239,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-strong);
}
.nav__inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); max-width: var(--container); margin: 0 auto;
}
.nav__brand{
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
}
.nav__brand:hover{ color: var(--ink); }
.nav__mark{ width: 22px; height: 22px; display: block; flex: none; }
.nav__links{
  display: flex; align-items: center; gap: var(--sp-6);
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-mono); font-size: var(--text-sm);
}
.nav__links a{
  color: var(--ink-soft); text-decoration: none;
  padding: var(--sp-2) 0; border-bottom: 2px solid transparent;
}
.nav__links a:hover, .nav__links a[aria-current="page"]{
  color: var(--ink); border-bottom-color: var(--baseline);
}
.nav__toggle{
  display: none; background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); width: 40px; height: 36px;
  cursor: pointer; color: var(--ink);
}
@media (max-width: 760px){
  .nav__toggle{ display: block; }
  .nav__links{
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper-raised); border-bottom: 1px solid var(--line-strong);
    flex-direction: column; align-items: flex-start; gap: 0;
    max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
    padding: 0 var(--sp-5);
  }
  .nav__links.is-open{ max-height: 260px; padding: var(--sp-3) var(--sp-5) var(--sp-5); }
  .nav__links a{ width: 100%; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--text-sm);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm); border: 1.5px solid var(--ink);
  text-decoration: none; cursor: pointer; background: transparent; color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn--primary{ background: var(--ink); color: var(--paper); }
.btn--primary:hover{ background: var(--baseline-ink); border-color: var(--baseline-ink); color: var(--paper); }
.btn--ghost:hover{ background: var(--paper-raised); }
.btn__arrow{ transition: transform 0.15s ease; }
.btn:hover .btn__arrow{ transform: translateX(3px); }

/* ---------- hero ---------- */
.hero{ padding: var(--sp-8) 0 var(--sp-7); }
.hero__grid{
  display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-8); align-items: center;
}
@media (max-width: 900px){ .hero__grid{ grid-template-columns: 1fr; gap: var(--sp-7); } }
.hero__title{ font-size: var(--text-2xl); line-height: 1.04; margin: var(--sp-4) 0 var(--sp-5); }
.hero__title em{ font-style: normal; color: var(--flex-ink); }
.hero__actions{ display: flex; gap: var(--sp-4); margin-top: var(--sp-6); flex-wrap: wrap; }
.hero__visual{
  background: var(--paper-raised); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.hero__visual svg{ width: 100%; height: auto; display: block; }
.hero__caption{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint);
}
.legend{ display: flex; gap: var(--sp-5); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-soft); }
.legend__item{ display: inline-flex; align-items: center; gap: var(--sp-2); }
.legend__swatch{ width: 14px; height: 14px; display: inline-block; border-radius: 2px; }
.legend__swatch--base{ background: var(--baseline); }
.legend__swatch--band{ background: var(--flex-tint); border: 1.5px solid var(--flex); }

/* ---------- envelope diagram (SVG, built by script.js) ---------- */
.envelope__band{ fill: var(--flex-tint); stroke: var(--flex); stroke-width: 1.5; animation: envelope-breathe 4.5s ease-in-out infinite; }
.envelope__base{ stroke: var(--baseline); stroke-width: 2.75; stroke-linejoin: round; stroke-linecap: round; }
.envelope__axislabel{ font-family: var(--font-mono); font-size: 9.5px; fill: var(--ink-faint); }
@keyframes envelope-breathe{ 0%, 100%{ fill-opacity: 0.9; } 50%{ fill-opacity: 0.55; } }
@media (prefers-reduced-motion: reduce){ .envelope__band{ animation: none; fill-opacity: 0.75; } }

/* ---------- sections ---------- */
.section{ padding: var(--sp-8) 0; border-top: 1px solid var(--line); }
.section--tight{ padding: var(--sp-7) 0; }
.section__head{ max-width: 68ch; margin-bottom: var(--sp-6); }
.section__title{ font-size: var(--text-xl); margin-top: var(--sp-3); }

/* explainer cards */
.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 860px){ .grid-3{ grid-template-columns: 1fr; } }
.card{
  background: var(--paper-raised); border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); padding: var(--sp-5);
}
.card__num{ font-family: var(--font-mono); font-size: var(--text-sm); color: var(--flex-ink); }
.card h3{ font-size: var(--text-md); margin: var(--sp-3) 0 var(--sp-2); }
.card p{ font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: 0; }

/* lifecycle */
.lifecycle{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--paper-raised); }
@media (max-width: 760px){ .lifecycle{ grid-template-columns: 1fr; } }
.lifecycle__step{ padding: var(--sp-5); border-left: 1px solid var(--line); position: relative; }
.lifecycle__step:first-child{ border-left: none; }
@media (max-width: 760px){ .lifecycle__step{ border-left: none; border-top: 1px solid var(--line); } .lifecycle__step:first-child{ border-top: none; } }
.lifecycle__index{ font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); }
.lifecycle__step h4{ font-size: var(--text-base); margin: var(--sp-2) 0; }
.lifecycle__step p{ font-size: var(--text-sm); color: var(--ink-soft); margin: 0; }
.lifecycle__step--base .lifecycle__index{ color: var(--baseline-ink); }
.lifecycle__step--flex .lifecycle__index{ color: var(--flex-ink); }

/* callout / reading order */
.callout{
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6);
  background: var(--paper-raised); border: 1px solid var(--line-strong);
  border-left: 4px solid var(--baseline);
  border-radius: var(--radius-md); padding: var(--sp-6);
}
@media (max-width: 700px){ .callout{ grid-template-columns: 1fr; } }
.callout__label{ font-family: var(--font-mono); font-size: var(--text-xs); color: var(--baseline-ink); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; }
.reading-order{ list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.reading-order li{ display: flex; align-items: center; gap: var(--sp-3); }
.reading-order a{
  font-family: var(--font-mono); font-size: var(--text-sm); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3); color: var(--ink); background: var(--paper);
}
.reading-order a:hover{ border-color: var(--flex); color: var(--flex-ink); }
.reading-order__arrow{ color: var(--ink-faint); font-family: var(--font-mono); }

/* ---------- timeline (projects page) ---------- */
.timeline{ position: relative; margin-top: var(--sp-6); }
.timeline::before{
  content: ""; position: absolute; left: 84px; top: 0; bottom: 0; width: 1px; background: var(--line-strong);
}
@media (max-width: 640px){ .timeline::before{ left: 8px; } }
.timeline__item{ position: relative; display: grid; grid-template-columns: 84px 1fr; gap: var(--sp-6); padding: var(--sp-5) 0; }
@media (max-width: 640px){ .timeline__item{ grid-template-columns: 1fr; padding-left: 26px; } }
.timeline__years{ font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); text-align: right; padding-top: 3px; }
@media (max-width: 640px){ .timeline__years{ text-align: left; } }
.timeline__dot{
  position: absolute; left: 80px; top: var(--sp-5); width: 9px; height: 9px;
  background: var(--flex); border-radius: 50%; transform: translateX(-4px);
}
@media (max-width: 640px){ .timeline__dot{ left: 4px; } }
.timeline__body h3{ font-size: var(--text-md); margin-bottom: var(--sp-2); }
.timeline__body p{ font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: 0; }

/* ---------- publications ---------- */
.pub-toolbar{ display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-6); }
.pub-filter{
  flex: 1; min-width: 240px; font-family: var(--font-mono); font-size: var(--text-sm);
  padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--ink); border-radius: var(--radius-sm);
  background: var(--paper-raised); color: var(--ink);
}
.pub-count{ font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); white-space: nowrap; }

.pub-group{ margin-bottom: var(--sp-7); }
.pub-group__title{ font-size: var(--text-lg); margin-bottom: var(--sp-1); }
.pub-group__desc{ font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: var(--sp-5); max-width: 68ch; }

.pub-list{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pub-item{ display: grid; grid-template-columns: 64px 1fr auto; gap: var(--sp-5); align-items: start; padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
@media (max-width: 700px){ .pub-item{ grid-template-columns: 1fr; gap: var(--sp-2); } }
.pub-item.is-hidden{ display: none; }
.pub-item__code{ font-family: var(--font-mono); font-size: var(--text-sm); color: var(--flex-ink); padding-top: 2px; }
.pub-item__title{ font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); margin: 0 0 var(--sp-1); color: var(--ink); }
.pub-item__meta{ font-size: var(--text-sm); color: var(--ink-soft); margin: 0; }
.pub-item__venue{ font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); }
.pub-item__link{
  font-family: var(--font-mono); font-size: var(--text-xs); text-decoration: none;
  border: 1px solid var(--baseline); color: var(--baseline-ink); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3); white-space: nowrap; height: fit-content;
}
.pub-item__link:hover{ background: var(--baseline-tint); }
.pub-item__tag{
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3); white-space: nowrap; height: fit-content;
}

/* ---------- open source list ---------- */
.oss-list{ list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.oss-item{
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
}
.oss-item span{ font-size: var(--text-sm); color: var(--ink); }

/* ---------- footer ---------- */
.footer{ border-top: 1px solid var(--line-strong); padding: var(--sp-7) 0 var(--sp-8); margin-top: var(--sp-7); }
.footer__grid{ display: flex; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.footer__brand{ font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
.footer p{ font-size: var(--text-sm); color: var(--ink-soft); }
.footer__links{ list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: flex; flex-direction: column; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--text-sm); }
.footer__note{ font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); margin-top: var(--sp-7); }

/* page intros (publications/projects) */
.page-head{ padding: var(--sp-7) 0 var(--sp-6); }
.page-head__title{ font-size: var(--text-2xl); margin: var(--sp-3) 0 var(--sp-4); }