/* ============================================================
   Gili Leibovich, portfolio site
   Shared design system. Brand tokens, typography, nav, footer,
   and the native diagram components used across the case studies.
   Editorial tone: warm cream ground, terracotta accent, generous
   whitespace, left aligned. No gradients, no drop shadows.
   ============================================================ */

/* ---------- Fonts (self hosted, latin subset) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/lora-500.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/lora-600.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/lora-700.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --bg: #FAF7F2;      /* warm cream, default page background */
  --accent: #C25E40;  /* terracotta, links, labels, dividers */
  --ink: #1F1D1A;     /* near black, headlines and body */
  --muted: #8A8378;   /* secondary text, captions, metadata */

  /* derived tints, kept close to the four core tokens */
  --accent-tint: #F2E4DD;   /* soft terracotta wash for panels */
  --line: #E7E0D6;          /* hairline on cream */
  --card: #FFFFFF;          /* card surface on cream */

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --wrap: 1080px;         /* default content width */
  --wrap-narrow: 760px;   /* reading width for prose */
  --wrap-wide: 1200px;    /* case study visuals */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 600; line-height: 1.15; margin: 0; }
p { margin: 0 0 1em; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide { max-width: var(--wrap-wide); }
.section { padding: 72px 0; }
.section + .section { padding-top: 0; }
.section-divider { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* small terracotta eyebrow label used across sections */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.lead { font-size: 1.18rem; line-height: 1.6; color: var(--ink); }
.muted { color: var(--muted); }

/* ---------- Skip link (a11y) ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Nav ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; max-width: var(--wrap-wide);
}
.brand {
  font-family: var(--serif); font-weight: 600; font-size: 1.06rem; color: var(--ink);
  letter-spacing: 0.01em;
}
.brand:hover { text-decoration: none; }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  color: var(--ink); font-size: 0.95rem; font-weight: 500;
  padding: 4px 0; position: relative;
}
.nav-links a:hover { color: var(--accent); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--accent); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0;
  margin-top: 40px;
  font-size: 0.92rem;
  color: var(--muted);
}
.site-footer .wrap {
  display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline;
  max-width: var(--wrap-wide);
}
.site-footer .foot-name { font-family: var(--serif); color: var(--ink); font-weight: 600; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
  padding: 11px 20px; border-radius: 6px;
  border: 1px solid var(--accent); color: var(--accent); background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--accent); color: var(--bg); text-decoration: none; }
.btn--solid { background: var(--accent); color: var(--bg); }
.btn--solid:hover { background: var(--ink); border-color: var(--ink); }

/* ============================================================
   HOME
   ============================================================ */
.hero {
  display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: center;
  padding: 88px 0 64px;
}
/* Headshot placeholder: a soft terracotta tinted circle.
   Sized so a real square photo can drop straight into .hero-photo
   (replace the tint with <img>) with no layout change. */
.hero-photo {
  width: 200px; height: 200px; border-radius: 50%;
  background: var(--accent-tint);
  border: 1px solid var(--line);
  overflow: hidden;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero h1 { font-size: 2.9rem; margin: 0 0 6px; letter-spacing: -0.01em; }
.hero .role { font-size: 1.25rem; color: var(--ink); font-family: var(--serif); font-weight: 500; margin: 0 0 10px; }
.hero .tagline { font-size: 0.95rem; color: var(--accent); font-weight: 600; letter-spacing: 0.02em; margin: 0 0 22px; }
.hero .positioning { font-size: 1.2rem; line-height: 1.55; max-width: 40ch; margin: 0 0 24px; }
.contact-row { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.95rem; }
.contact-row a, .contact-row span { color: var(--muted); }
.contact-row a:hover { color: var(--accent); }

/* More About Me accordion */
.about { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-toggle {
  width: 100%; background: transparent; border: 0; padding: 26px 0;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink);
  text-align: left;
}
.about-toggle .chev { transition: transform 0.25s ease; color: var(--accent); flex: none; }
.about-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Expanded by default (so content is visible without JS). When JS is
   present the panel starts collapsed and its height is animated open/closed
   in js/main.js, which measures the dynamic content height. */
.about-panel { overflow: hidden; }
html.js .about-panel { height: 0; transition: height 0.4s ease; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 4px 0 44px; }
.about-grid h3 { font-size: 1.05rem; margin: 0 0 16px; }
.about-grid ul { margin: 0; padding: 0; list-style: none; }
.about-grid li { position: relative; padding-left: 20px; margin-bottom: 12px; line-height: 1.5; }
.about-grid li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 7px; height: 7px; background: var(--accent); border-radius: 50%;
}

/* Work preview / index cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.card {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 30px 30px 28px; color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }
.card .card-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.card h3 { font-size: 1.5rem; margin: 0 0 12px; }
.card p { color: var(--muted); margin: 0 0 18px; line-height: 1.55; }
.card .card-go { font-size: 0.9rem; font-weight: 600; color: var(--accent); display: inline-block; transition: transform 0.2s ease; }
.card:hover .card-go { transform: translateX(4px); }

.page-head { padding: 72px 0 8px; }
.page-head h1 { font-size: 2.6rem; }

/* ============================================================
   RESUME
   ============================================================ */
.resume-head { padding: 64px 0 28px; }
.resume-head .eyebrow { margin-bottom: 8px; }
.resume-head h1 { font-size: 2.7rem; margin: 0 0 8px; }
.resume-head .role-line { font-family: var(--serif); font-size: 1.1rem; color: var(--accent); font-weight: 500; margin: 0 0 12px; }
.resume-head .meta { color: var(--muted); font-size: 0.95rem; margin: 0 0 2px; }
.resume-head .meta a { color: var(--muted); }
.resume-head .meta a:hover { color: var(--accent); }
.resume-actions { margin-top: 22px; }

.resume-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 0; align-items: stretch; margin-bottom: 24px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.resume-main { background: var(--bg); padding: 44px 44px 44px 40px; }
/* Dark ink sidebar, inherited from the resume PDF. The one dark panel on the site. */
.resume-side { background: var(--ink); color: #EFE9E0; padding: 44px 40px; }

.resume-main h2, .resume-side h2 {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; margin: 0 0 20px;
}
.resume-main h2 { color: var(--accent); }
.resume-side h2 { color: var(--accent); }
.resume-side h2:not(:first-child) { margin-top: 32px; }

.job { margin-bottom: 30px; }
.job:last-child { margin-bottom: 0; }
.job-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; margin: 0 0 2px; }
.job-title .yrs { color: var(--muted); font-family: var(--sans); font-size: 0.85rem; font-weight: 500; }
.job-org { color: var(--accent); font-size: 0.92rem; font-weight: 500; margin: 0 0 14px; }
.job ul { margin: 0; padding: 0; list-style: none; }
.job li { position: relative; padding-left: 20px; margin-bottom: 11px; line-height: 1.55; font-size: 0.98rem; }
.job li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.job-note { font-size: 0.92rem; color: var(--muted); font-style: italic; line-height: 1.55; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 6px; }

.resume-side .summary { font-size: 0.96rem; line-height: 1.6; color: #EFE9E0; }
.resume-side ul { margin: 0; padding: 0; list-style: none; }
.resume-side .edu li { margin-bottom: 12px; line-height: 1.45; font-size: 0.95rem; }
.resume-side .edu li strong { display: block; font-weight: 600; }
.resume-side .lang li { margin-bottom: 8px; font-size: 0.95rem; }
.resume-side .lang li span { color: #A79F92; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-size: 0.8rem; font-weight: 500; color: #EFE9E0;
  border: 1px solid #45413B; border-radius: 20px; padding: 5px 12px; line-height: 1.2;
}
.pill--accent { border-color: var(--accent); color: #F0C9BC; }

/* ============================================================
   CASE STUDY, shared
   ============================================================ */
.cs-hero { padding: 80px 0 56px; max-width: var(--wrap-narrow); }
.cs-hero .eyebrow { margin-bottom: 16px; }
.cs-hero h1 { font-size: 3rem; letter-spacing: -0.01em; margin: 0 0 20px; }
.cs-hero .cs-sub { font-size: 1.3rem; line-height: 1.5; color: var(--ink); margin: 0 0 26px; }
.cs-hero .cs-byline { font-size: 0.95rem; color: var(--muted); }
.cs-hero .cs-byline .dot { color: var(--accent); }

.cs-section { padding: 60px 0; }
.cs-section h2 { font-size: 2rem; line-height: 1.2; margin: 0 0 22px; max-width: 22ch; }
.cs-section .cs-body { max-width: var(--wrap-narrow); font-size: 1.08rem; line-height: 1.65; }
.cs-section .cs-body p { margin-bottom: 1em; }
.solution-line {
  border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; margin: 26px 0 0;
  font-size: 1.05rem;
}
.solution-line strong { color: var(--accent); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.8rem; display: inline-block; margin-right: 6px; }
.role-line-cs { font-size: 0.98rem; margin-top: 26px; }
.role-line-cs strong { color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; }

/* Stat blocks */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 8px 0 0; }
.stat { border-top: 2px solid var(--accent); padding-top: 16px; }
.stat .stat-num { font-family: var(--serif); font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--ink); }
.stat .stat-label { font-size: 0.92rem; color: var(--muted); margin-top: 8px; line-height: 1.4; }

/* Two card contrast (insight, before/after text) */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.contrast .cbox { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 26px; }
.contrast .cbox.heard { background: var(--accent-tint); border-color: #E7C8BE; }
.contrast .cbox .clabel { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.contrast .cbox .cquote { font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; margin: 0 0 12px; }
.contrast .cbox .csub { font-size: 0.95rem; color: var(--muted); margin: 0; }
.contrast-arrow { display: none; }

.vision-line, .callout-line {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 22px 26px; margin-top: 22px; font-size: 1.05rem;
}
.vision-line strong, .callout-line strong { color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; margin-right: 8px; }

/* Figure / screenshot embeds */
.figure { margin: 8px 0 0; }
.figure img { border: 1px solid var(--line); border-radius: 10px; }
.figure figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 12px; }
.figure-stack { display: grid; gap: 22px; }
.figure-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }

/* ---------- Org chart (multi agent) ---------- */
.orgchart { margin-top: 12px; }
.org-top { display: flex; flex-direction: column; align-items: center; gap: 0; }
.org-node {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 22px; text-align: center; min-width: 190px;
}
.org-node .on-title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.org-node .on-sub { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.org-node.leader { border-color: var(--accent); background: var(--accent-tint); }
.org-connector { width: 2px; height: 26px; background: var(--line); }
.org-agents {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 26px;
  position: relative;
}
/* horizontal rail above the agent row */
.org-agents::before {
  content: ""; position: absolute; top: -26px; left: 10%; right: 10%;
  height: 2px; background: var(--line);
}
.org-agent { position: relative; padding-top: 26px; }
.org-agent::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 26px; background: var(--line);
}
.org-agent .oa-inner {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 14px; text-align: center; height: 100%;
}
.org-agent .oa-role { font-family: var(--serif); font-weight: 600; font-size: 1rem; }
.org-agent .oa-desc { font-size: 0.82rem; color: var(--muted); margin: 6px 0 10px; line-height: 1.35; }
.org-agent .oa-model {
  display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--accent); border: 1px solid #E7C8BE; background: var(--accent-tint);
  border-radius: 20px; padding: 3px 10px;
}

/* ---------- Before / after (naming) ---------- */
.beforeafter { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: center; margin-top: 12px; }
.ba-node { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 22px 18px; text-align: center; }
.ba-node .ba-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.ba-node .ba-val { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.ba-node.mid { background: var(--accent-tint); border-color: #E7C8BE; }
.ba-node.mid .ba-eye { font-size: 1.6rem; line-height: 1; margin-bottom: 8px; }
.ba-node.mid .ba-val { font-size: 1rem; }
.ba-node.mid .ba-note { font-size: 0.82rem; color: var(--muted); margin-top: 8px; }
.ba-node.after .ba-val { color: var(--accent); }
.ba-arrow { color: var(--accent); font-size: 1.4rem; font-weight: 700; text-align: center; }

/* ---------- Fan out (synonyms) ---------- */
.fanout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: center; margin-top: 12px; }
.fanout .fan-source { background: var(--accent-tint); border: 1px solid #E7C8BE; border-radius: 10px; padding: 24px; text-align: center; }
.fanout .fan-source .fs-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.fanout .fan-source .fs-val { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.fanout .fan-source .fs-note { font-size: 0.82rem; color: var(--muted); margin-top: 10px; }
.fan-terms { display: flex; flex-wrap: wrap; gap: 10px; }
.fan-term {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: 9px 16px; font-size: 0.95rem; color: var(--ink);
}
.fan-term .q { color: var(--accent); margin-right: 6px; }

/* ---------- Pipeline (indexing / searching) ---------- */
.pipeline { margin-top: 20px; }
.pipe-phase { margin-bottom: 30px; }
.pipe-phase .pp-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.pipe-phase .pp-label span { color: var(--muted); font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.pipe-steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.pipe-step {
  flex: 1 1 0; min-width: 150px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px 16px;
}
.pipe-step .ps-title { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; }
.pipe-step .ps-desc { font-size: 0.85rem; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.pipe-arrow { display: flex; align-items: center; color: var(--accent); font-size: 1.3rem; font-weight: 700; flex: none; }

/* ---------- Checks (impact) ---------- */
.checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.check { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.check .ck-mark { color: var(--accent); font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; }
.check .ck-title { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; margin-bottom: 6px; }
.check .ck-desc { font-size: 0.92rem; color: var(--muted); line-height: 1.45; margin: 0; }

/* ---------- Numbered items (leadership, principles) ---------- */
.numlist { display: grid; gap: 20px; margin-top: 12px; }
.numlist.cols-3 { grid-template-columns: repeat(3, 1fr); }
.numitem { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 26px; }
.numitem .num { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--accent); line-height: 1; margin-bottom: 12px; }
.numitem h3 { font-size: 1.2rem; margin: 0 0 8px; }
.numitem p { font-size: 0.95rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* Method: the four hero flows */
.method-flows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 12px; }

.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.principle { display: flex; gap: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; }
.principle .pnum { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--accent); flex: none; line-height: 1.1; }
.principle h3 { font-size: 1.15rem; margin: 0 0 4px; }
.principle p { font-size: 0.94rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* ---------- Journey step flow ---------- */
.journey { margin-top: 16px; display: grid; gap: 0; }
.jstep { display: grid; grid-template-columns: 40px 1fr; gap: 20px; }
.jstep .jline { display: flex; flex-direction: column; align-items: center; }
.jstep .jdot { width: 15px; height: 15px; border-radius: 50%; background: var(--accent); margin-top: 6px; flex: none; }
.jstep .jdot.hollow { background: var(--bg); border: 2px solid var(--accent); }
.jstep .jbar { width: 2px; flex: 1; background: var(--line); min-height: 24px; }
.jstep:last-child .jbar { display: none; }
.jstep .jbody { padding-bottom: 26px; }
.jstep .jsys { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; margin-bottom: 8px; }
.jstep .jstep-title { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; margin-bottom: 10px; }
.jpair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.jpair .jp { border-radius: 8px; padding: 12px 16px; font-size: 0.9rem; line-height: 1.45; }
.jpair .jp.pain { background: #F6EAE6; border: 1px solid #E7C8BE; }
.jpair .jp.opp { background: var(--card); border: 1px solid var(--line); }
.jpair .jp .jp-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 5px; display: block; }
.jpair .jp.pain .jp-tag { color: var(--accent); }
.jpair .jp.opp .jp-tag { color: var(--muted); }
.recurring { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.recurring .rc { border-top: 2px solid var(--accent); padding-top: 14px; }
.recurring .rc .rc-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.recurring .rc p { font-size: 0.95rem; margin: 0; line-height: 1.5; }

/* ---------- Synthesis matrix ---------- */
.matrix { margin-top: 16px; overflow-x: auto; }
.matrix table { border-collapse: collapse; width: 100%; min-width: 560px; }
.matrix th, .matrix td { text-align: center; padding: 14px 10px; border-bottom: 1px solid var(--line); }
.matrix thead th { font-family: var(--sans); font-size: 0.82rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--line); }
.matrix tbody th {
  text-align: left; font-family: var(--serif); font-weight: 600; font-size: 1rem; color: var(--ink);
  white-space: nowrap;
}
.matrix .dot-yes { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.matrix caption { caption-side: bottom; font-size: 0.85rem; color: var(--muted); text-align: left; padding-top: 14px; }

/* ---------- Info label list (concept dashboard) ---------- */
.labellist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin: 0; padding: 0; list-style: none; }
.labellist li { position: relative; padding-left: 20px; font-size: 0.98rem; line-height: 1.5; }
.labellist li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }

/* Tablet bezel frame for the 360 dashboard */
.tablet-frame {
  background: var(--ink); border-radius: 20px; padding: 18px; margin-top: 8px;
}
.tablet-frame img { border-radius: 6px; border: 0; width: 100%; }

/* Category / list of tech built with */
.builtwith { font-size: 0.95rem; color: var(--muted); margin-top: 22px; }
.builtwith strong { color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; margin-right: 8px; }

/* Closing block */
.cs-closing { text-align: center; padding: 80px 0; }
.cs-closing .cc-lines { font-family: var(--serif); font-size: 2rem; line-height: 1.3; font-weight: 600; margin: 0 0 24px; }
.cs-closing .cc-byline { color: var(--muted); font-size: 0.95rem; }
.cs-closing .cc-byline .dot { color: var(--accent); }

.moment-quote { font-family: var(--serif); font-size: 2rem; line-height: 1.25; font-weight: 600; margin: 0 0 24px; }
.outcome-emphasis { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--ink); border-left: 3px solid var(--accent); padding-left: 22px; margin-top: 26px; }

/* back link on case studies */
.back-link { font-size: 0.9rem; font-weight: 600; color: var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .hero { grid-template-columns: 1fr; gap: 28px; padding: 56px 0 44px; text-align: left; }
  .hero-photo { width: 132px; height: 132px; }
  .hero h1 { font-size: 2.3rem; }
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .cards { grid-template-columns: 1fr; }
  .resume-grid { grid-template-columns: 1fr; }
  .resume-main { padding: 32px 26px; }
  .resume-side { padding: 32px 26px; }
  .stats { grid-template-columns: 1fr; gap: 18px; }
  .contrast { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .numlist.cols-3 { grid-template-columns: 1fr; }
  .method-flows { grid-template-columns: 1fr 1fr; }
  .principles { grid-template-columns: 1fr; }
  .fanout { grid-template-columns: 1fr; gap: 20px; }
  .figure-2 { grid-template-columns: 1fr; }
  .cs-hero h1 { font-size: 2.3rem; }
  .cs-section h2 { font-size: 1.7rem; }
  .recurring { grid-template-columns: 1fr; }
  .jpair { grid-template-columns: 1fr; }
  .labellist { grid-template-columns: 1fr; }
  /* org chart collapses to a vertical stack */
  .org-agents { grid-template-columns: 1fr 1fr; gap: 12px; }
  .org-agents::before { display: none; }
  .org-agent { padding-top: 0; }
  .org-agent::before { display: none; }
  /* before/after collapses to a single column of stacked nodes */
  .beforeafter { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); }
  /* pipeline stacks */
  .pipe-steps { flex-direction: column; }
  .pipe-arrow { transform: rotate(90deg); justify-content: center; }
}
@media (max-width: 520px) {
  .nav-links { gap: 18px; }
  .site-nav .wrap { min-height: 56px; }
  .org-agents { grid-template-columns: 1fr; }
  .cs-hero h1 { font-size: 2rem; }
  .moment-quote, .cs-closing .cc-lines { font-size: 1.6rem; }
  .method-flows { grid-template-columns: 1fr; }
}

/* ============================================================
   MICRO-INTERACTIONS
   Subtle and editorial: scroll reveals and a hero entrance.
   Two safety gates:
   - html.js: applied by a tiny inline script in each <head>, so if
     JavaScript never runs, none of this hides content.
   - prefers-reduced-motion: no-preference, so it fully stops for
     visitors who ask for less motion (handled by the reduce block
     at the very bottom, plus this media scope).
   Elements start hidden here and are revealed when JS adds .is-in
   as they scroll into view. Curved easing = easeOutCubic.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance on load (no observer, pure CSS) */
  html.js .hero-photo,
  html.js .hero-text > *,
  html.js .cs-hero > * {
    opacity: 0;
    animation: riseIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  html.js .hero-photo { animation-delay: 0.05s; }
  html.js .hero-text > *:nth-child(1), html.js .cs-hero > *:nth-child(1) { animation-delay: 0.10s; }
  html.js .hero-text > *:nth-child(2), html.js .cs-hero > *:nth-child(2) { animation-delay: 0.18s; }
  html.js .hero-text > *:nth-child(3), html.js .cs-hero > *:nth-child(3) { animation-delay: 0.26s; }
  html.js .hero-text > *:nth-child(4), html.js .cs-hero > *:nth-child(4) { animation-delay: 0.34s; }
  html.js .hero-text > *:nth-child(5), html.js .cs-hero > *:nth-child(5) { animation-delay: 0.42s; }
  @keyframes riseIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  /* Scroll reveal, block elements */
  html.js .section > .eyebrow,
  html.js .page-head,
  html.js .resume-head,
  html.js .resume-grid,
  html.js .cs-section > .eyebrow,
  html.js .cs-section > h2,
  html.js .cs-section > .cs-body,
  html.js .cs-section > .moment-quote,
  html.js .cs-section > .solution-line,
  html.js .cs-section > .vision-line,
  html.js .cs-section > .role-line-cs,
  html.js .cs-section > .builtwith,
  html.js .cs-section > .figure,
  html.js .cs-section > .figure-stack,
  html.js .cs-section > .figure-2,
  html.js .cs-section > .beforeafter,
  html.js .cs-section > .fanout,
  html.js .cs-section > .pipeline,
  html.js .cs-section > .orgchart,
  html.js .cs-section > .matrix,
  html.js .cs-section > .recurring,
  html.js .cs-section > .tablet-frame,
  html.js .cs-section > .labellist,
  html.js .cs-section > .outcome-emphasis,
  html.js .cs-closing {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Scroll reveal, staggered group children */
  html.js .cards > *,
  html.js .stats > *,
  html.js .checks > *,
  html.js .principles > *,
  html.js .method-flows > *,
  html.js .numlist > *,
  html.js .journey > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  html.js .cards.is-in > *:nth-child(n+2),
  html.js .stats.is-in > *:nth-child(n+2),
  html.js .checks.is-in > *:nth-child(n+2),
  html.js .principles.is-in > *:nth-child(n+2),
  html.js .method-flows.is-in > *:nth-child(n+2),
  html.js .numlist.is-in > *:nth-child(n+2),
  html.js .journey.is-in > *:nth-child(n+2) { transition-delay: 0.07s; }
  html.js .cards.is-in > *:nth-child(n+3),
  html.js .stats.is-in > *:nth-child(n+3),
  html.js .checks.is-in > *:nth-child(n+3),
  html.js .principles.is-in > *:nth-child(n+3),
  html.js .method-flows.is-in > *:nth-child(n+3),
  html.js .numlist.is-in > *:nth-child(n+3),
  html.js .journey.is-in > *:nth-child(n+3) { transition-delay: 0.14s; }
  html.js .principles.is-in > *:nth-child(n+4),
  html.js .method-flows.is-in > *:nth-child(n+4),
  html.js .journey.is-in > *:nth-child(n+4) { transition-delay: 0.21s; }
  html.js .principles.is-in > *:nth-child(n+5),
  html.js .journey.is-in > *:nth-child(n+5) { transition-delay: 0.28s; }
  html.js .journey.is-in > *:nth-child(n+6) { transition-delay: 0.35s; }

  /* Revealed state (added by the observer). One rule covers blocks and
     the direct children of staggered groups. */
  html.js .is-in,
  html.js .is-in > * { opacity: 1 !important; transform: none !important; }
}

/* Respect reduced motion: stop every animation and transition, and make
   sure nothing that starts hidden above can stay hidden. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition: none !important;
  }
}