/* ============================================================
   Max Nudelman — portfolio
   One stylesheet for index.html and every /projects/ case study.
   Colors, spacing and type sizes all live in the :root block —
   change a value there and it updates everywhere.
   ============================================================ */

:root {
  /* --- color ------------------------------------------------ */
  --ink:        #0B0D10;   /* page background */
  --ink-2:      #121519;   /* raised surfaces: cards, nav */
  --ink-3:      #1B2027;   /* hovered surfaces */
  --line:       #262C35;   /* hairline borders */
  --text:       #E8EAED;   /* primary text */
  --text-2:     #A0A8B4;   /* secondary text */
  --text-3:     #6C7684;   /* labels, captions */
  --accent:     #5EE6A8;   /* mint — links, metrics, active state */
  --accent-dim: #2C6E52;
  --warn:       #F5A524;   /* amber — "in progress" status */

  /* --- type ------------------------------------------------- */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- layout ----------------------------------------------- */
  --page: 1120px;   /* max content width */
  --prose: 720px;   /* max width for reading columns */
  --nav-h: 64px;
}

/* --- reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; }
h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); margin: 0; }
h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 1rem; }
h3 { font-size: 1.4rem; margin: 0 0 .5rem; }
p  { margin: 0 0 1.1em; }

/* small uppercase section label */
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 .9rem;
}

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 24px; }
.prose { max-width: var(--prose); }

/* --- skip link (keyboard + screen reader accessibility) ------ */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--ink); padding: 10px 16px; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(11, 13, 16, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 100%; }
.nav-name { font-family: var(--serif); font-size: 1.2rem; color: var(--text); }
.nav-name:hover { text-decoration: none; color: var(--accent); }
.nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav-links a { color: var(--text-2); font-size: .92rem; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a.cta {
  color: var(--ink); background: var(--accent);
  padding: 7px 15px; border-radius: 999px; font-weight: 600;
}
.nav-links a.cta:hover { background: #7BF0BC; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: clamp(56px, 10vw, 110px) 0 clamp(48px, 8vw, 88px); border-bottom: 1px solid var(--line); }
/* Two rows: the copy and the photo share row 1, the buttons sit below in row 2.
   That lets the photo stretch to exactly the height of the copy block, ending
   level with the last line of the paragraph, instead of leaving dead space. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 260px;
  grid-template-rows: auto auto;
  column-gap: 56px;
  align-items: stretch;
}
.hero-copy   { grid-column: 1; grid-row: 1; }
.hero-actions{ grid-column: 1; grid-row: 2; }
.hero h1 { margin-bottom: .35em; }
.hero .lede {
  font-size: clamp(1.12rem, 2.2vw, 1.35rem);
  color: var(--text-2);
  max-width: 620px;
  line-height: 1.55;
}
.hero .lede strong { color: var(--text); font-weight: 600; }
.hero-photo {
  grid-column: 2; grid-row: 1;
  width: 100%; height: 100%;
  min-height: 300px;              /* floor, so a short copy block cannot squash it */
  object-fit: cover; object-position: center 20%;
  border-radius: 10px; border: 1px solid var(--line); filter: saturate(.92);
}
.status {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: .95rem; color: var(--text);
  letter-spacing: .01em;
  border: 1px solid var(--line); background: var(--ink-2);
  padding: 10px 20px; border-radius: 999px; margin-bottom: 30px;
}
.status .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(94, 230, 168, .16);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn {
  display: inline-block; padding: 11px 22px; border-radius: 8px;
  font-size: .95rem; font-weight: 500; border: 1px solid var(--line);
  color: var(--text); background: var(--ink-2);
}
.btn:hover { background: var(--ink-3); text-decoration: none; border-color: #38414d; }
.btn-primary { background: var(--accent); color: var(--ink); border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { background: #7BF0BC; border-color: #7BF0BC; }

/* ============================================================
   SECTIONS
   ============================================================ */
section { padding: clamp(56px, 8vw, 92px) 0; border-bottom: 1px solid var(--line); }
.section-head { margin-bottom: 44px; }
.section-head p { color: var(--text-2); max-width: var(--prose); margin: 0; }

/* ============================================================
   PROJECT CARDS
   ============================================================ */
.projects { display: grid; gap: 22px; }
.card {
  display: block;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 32px;
  color: inherit;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.card:hover {
  text-decoration: none;
  border-color: var(--accent-dim);
  background: var(--ink-3);
  transform: translateY(-2px);
}
.card-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.card h3 { font-size: 1.75rem; margin: 0; color: var(--text); }
.card .kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.card .summary { color: var(--text-2); margin: 10px 0 22px; max-width: 660px; }
.card .summary strong { color: var(--text); font-weight: 600; }

/* status pills */
.tag {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-3);
  white-space: nowrap;
}
.tag-live      { color: var(--accent); border-color: var(--accent-dim); background: rgba(94,230,168,.07); }
.tag-progress  { color: var(--warn);   border-color: #6B4A12;          background: rgba(245,165,36,.08); }

/* the row of headline numbers on each card */
.metrics { display: flex; flex-wrap: wrap; gap: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
.metric .num { font-family: var(--serif); font-size: 1.75rem; color: var(--accent); line-height: 1.1; }
.metric .lab { font-size: .8rem; color: var(--text-3); margin-top: 2px; }

.card-foot { display: flex; gap: 18px; align-items: center; margin-top: 20px; font-size: .9rem; color: var(--text-2); }
.card-foot .go { color: var(--accent); font-weight: 500; }
.card:hover .go { text-decoration: underline; text-underline-offset: 3px; }

/* stack tags */
.stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.stack span {
  font-family: var(--mono); font-size: .74rem; color: var(--text-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; background: var(--ink);
}

/* ============================================================
   EXPERIENCE / TIMELINE
   ============================================================ */
.timeline { display: grid; gap: 0; }
.entry {
  display: grid; grid-template-columns: 190px 1fr; gap: 40px;
  padding: 30px 0; border-top: 1px solid var(--line);
}
.entry:last-child { border-bottom: 1px solid var(--line); }
.entry .when { font-family: var(--mono); font-size: .82rem; color: var(--text-3); padding-top: 5px; }
.entry h3 { margin-bottom: 2px; font-family: var(--sans); font-size: 1.12rem; font-weight: 600; }
.entry .org { color: var(--accent); font-size: .95rem; margin-bottom: 12px; }
.entry ul { margin: 0; padding-left: 18px; color: var(--text-2); }
.entry li { margin-bottom: 7px; }
.entry li::marker { color: var(--text-3); }

/* ============================================================
   SKILLS
   ============================================================ */
.skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; }
.skillset h3 { font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.skillset ul { list-style: none; margin: 0; padding: 0; }
.skillset li { color: var(--text-2); padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
#contact { border-bottom: none; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 36px; }
.contact-card {
  border: 1px solid var(--line); background: var(--ink-2); border-radius: 12px;
  padding: 22px 24px; color: inherit; transition: border-color .18s ease, background .18s ease;
}
.contact-card:hover { text-decoration: none; border-color: var(--accent-dim); background: var(--ink-3); }
.contact-card .lab { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 7px; }
.contact-card .val { color: var(--text); font-size: 1rem; word-break: break-word; }

footer { padding: 40px 0 56px; color: var(--text-3); font-size: .86rem; border-top: 1px solid var(--line); }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ============================================================
   CASE STUDY PAGES
   ============================================================ */
.case-head { padding: 60px 0 44px; border-bottom: 1px solid var(--line); }
.back { font-family: var(--mono); font-size: .8rem; color: var(--text-2); display: inline-block; margin-bottom: 26px; }
.back:hover { color: var(--accent); text-decoration: none; }
.case-head h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); margin-bottom: .3em; }
.case-head .lede { font-size: 1.15rem; color: var(--text-2); max-width: var(--prose); }

/* the role / tools / data strip under a case-study title */
.factsheet {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px; margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--line);
}
.fact .lab { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 5px; }
.fact .val { color: var(--text); font-size: .95rem; }

.case-body { padding: 56px 0 40px; }
.case-body section { padding: 0 0 46px; border-bottom: none; }
.case-body h2 { font-size: 1.9rem; margin-bottom: .6em; }
.case-body p, .case-body ul, .case-body ol { max-width: var(--prose); color: var(--text-2); }
.case-body li { margin-bottom: 8px; }
.case-body strong { color: var(--text); font-weight: 600; }

/* pull-quote style callout for the single most important finding */
.finding {
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, rgba(94,230,168,.07), transparent 65%);
  padding: 20px 26px; margin: 0 0 30px; border-radius: 0 8px 8px 0; max-width: var(--prose);
}
.finding p { margin: 0; color: var(--text); font-size: 1.08rem; }

.note {
  border-left: 3px solid var(--warn);
  background: linear-gradient(90deg, rgba(245,165,36,.07), transparent 65%);
  padding: 18px 24px; margin: 0 0 30px; border-radius: 0 8px 8px 0; max-width: var(--prose);
}
.note p { margin: 0; color: var(--text-2); font-size: .95rem; }
.note p strong { color: var(--warn); }

/* data tables — wrapper scrolls sideways on narrow screens */
.table-scroll { overflow-x: auto; margin: 0 0 14px; max-width: 100%; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .92rem; }
caption { text-align: left; color: var(--text-3); font-size: .84rem; padding-bottom: 10px; }
th, td { padding: 9px 14px; border-bottom: 1px solid var(--line); text-align: left; }
th { font-family: var(--mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); font-weight: 400; border-bottom-color: #333B46; }
td { color: var(--text-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .88rem; }
tr td strong { color: var(--accent); }

.case-nav { display: flex; gap: 12px; flex-wrap: wrap; padding: 34px 0 60px; border-top: 1px solid var(--line); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 30px; }
  .hero-copy, .hero-actions, .hero-photo { grid-column: 1; grid-row: auto; }
  .hero-photo { width: 170px; height: 248px; min-height: 0; order: -1; }
  .entry { grid-template-columns: 1fr; gap: 10px; }
  .entry .when { padding-top: 0; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .status { font-size: .84rem; padding: 9px 16px; }
  .nav-links { gap: 14px; }
  .nav-links a:not(.cta) { display: none; }   /* keep only the resume button on phones */
  .card { padding: 24px 22px; }
  .metrics { gap: 24px; }
  .metric .num { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ============================================================
   FIGURES (case study charts)
   ============================================================ */
.figure { margin: 0 0 34px; max-width: 100%; }
.figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 10px; background: var(--ink);
}
.figure figcaption {
  color: var(--text-3); font-size: .86rem; margin-top: 10px; line-height: 1.5;
  max-width: var(--prose);
}

/* ============================================================
   INTERACTIVE FIGURES (VNL case study)
   ============================================================ */
.vnl-widget {
  border: 1px solid var(--line); background: var(--ink-2);
  border-radius: 12px; padding: 22px 24px; margin: 0 0 34px; position: relative;
}
.vnl-widget h3 {
  font-family: var(--sans); font-size: 1.02rem; font-weight: 600;
  color: var(--text); margin: 0 0 6px;
}
.vnl-widget .vnl-sub { color: var(--text-2); font-size: .9rem; margin: 0 0 18px; max-width: 62ch; }
.vnl-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* control rows */
.vnl-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.vnl-controls button {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--text-2); background: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: all .15s ease;
}
.vnl-controls button:hover { color: var(--text); border-color: #38414d; }
.vnl-controls button.on { color: var(--ink); background: var(--accent); border-color: var(--accent); font-weight: 600; }

/* slider */
.vnl-slider { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.vnl-slider label { font-family: var(--mono); font-size: .74rem; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .1em; }
.vnl-slider input[type=range] {
  flex: 1 1 220px; min-width: 180px; accent-color: var(--accent);
  background: transparent; cursor: pointer;
}

/* readout tiles */
.vnl-stats { display: flex; flex-wrap: wrap; gap: 26px; padding: 16px 0 4px; border-top: 1px solid var(--line); margin-top: 14px; }
.vnl-stats div .v { font-family: var(--serif); font-size: 1.5rem; color: var(--accent); line-height: 1.1; }
.vnl-stats div .k { font-size: .78rem; color: var(--text-3); margin-top: 2px; }

.vnl-note { color: var(--text-2); font-size: .88rem; margin-top: 14px; min-height: 2.6em; line-height: 1.5; }

/* hover tooltip */
.vnl-tip {
  position: absolute; right: 24px; top: 22px; z-index: 3;
  background: var(--ink); border: 1px solid var(--accent-dim); border-radius: 8px;
  padding: 10px 14px; font-size: .82rem; color: var(--text-2); line-height: 1.5;
  pointer-events: none; max-width: 260px;
}
.vnl-tip strong { color: var(--text); }

@media (max-width: 620px) {
  .vnl-widget { padding: 18px 16px; }
  .vnl-tip { position: static; margin-bottom: 12px; max-width: none; }
  .vnl-stats { gap: 18px; }
}

/* select control for interactive figures */
.ha-select { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.ha-select label { font-family:var(--mono); font-size:.74rem; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.1em; }
.ha-select select {
  font-family:var(--sans); font-size:.9rem; color:var(--text);
  background:var(--ink); border:1px solid var(--line); border-radius:8px;
  padding:7px 12px; cursor:pointer;
}
.ha-select select:hover { border-color:#38414d; }
.ha-checks { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:16px; }
.ha-checks label { display:flex; align-items:center; gap:7px; font-size:.86rem;
  color:var(--text-2); cursor:pointer; }
.ha-checks input { accent-color:var(--accent); cursor:pointer; }