/* =====================================================
   GLOBAL RESET & VARIABLES
===================================================== */

:root {
  --ink: #0f172a;              /* primary text */
  --muted: #475569;            /* secondary text */
  --border: #e5e7eb;           /* dividers */
  --bg-light: #f8fafc;         /* soft sections */
  --accent: #0d6efd;           /* bootstrap primary */
  --radius: 0.75rem;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  background-color: #fff;
}

/* =====================================================
   TYPOGRAPHY
===================================================== */

h1, h2, h3, h4, h5 {
  font-family: 'Playfair Display', serif;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3 { font-weight: 600; }

p, li {
  color: var(--muted);
}

.lead {
  font-size: 1.125rem;
  color: var(--ink);
}

small,
.text-muted {
  color: var(--muted) !important;
}

/* =====================================================
   NAVIGATION
===================================================== */

.navbar {
  background-color: #fff;
}

.navbar-brand img {
  transition: transform 0.2s ease;
}

.navbar-brand img:hover {
  transform: scale(1.03);
}

.nav-link {
  font-weight: 500;
  color: var(--ink) !important;
}

.nav-link.active {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.25rem;
}

/* =====================================================
   BUTTONS
===================================================== */

.btn {
  border-radius: var(--radius);
  font-weight: 500;
}

.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
}

.btn-outline-dark {
  border-radius: var(--radius);
}

/* =====================================================
   SECTIONS
===================================================== */

section {
  scroll-margin-top: 6rem;
}

.bg-light {
  background-color: var(--bg-light) !important;
}

.border-top,
.border-bottom {
  border-color: var(--border) !important;
}

/* =====================================================
   CARDS (WORK + BOOKS)
===================================================== */

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.card-img-top {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.card-body h3,
.card-body h6 {
  color: var(--ink);
}

/* =====================================================
   TIMELINE & PROJECT PAGES
===================================================== */

.timeline section h2,
.project section h2 {
  margin-bottom: 1rem;
}

.timeline ul,
.project ul {
  padding-left: 1.1rem;
}

.timeline img,
.project img {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* =====================================================
   FOOTER CTA
===================================================== */

.footer-cta {
  background-color: var(--ink);
}

.footer-cta h2 {
  color: #fff;
  font-family: 'Playfair Display', serif;
}

.footer-cta .btn {
  margin-top: 1rem;
}

/* =====================================================
   BOOKS (EN)
===================================================== */

body.books .card p {
  font-size: 0.95rem;
}

/* =====================================================
   BOOKS (HEBREW)
===================================================== */

body.books_he,
.noto-sans-hebrew {
    font-family: "Noto Sans Hebrew" !important;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: auto;
}


body.books-he h1,
body.books-he h2,
body.books-he h3 {
  font-family: "Noto Sans Hebrew" !important;
  font-weight: 700;
}

body.books-he p {
  line-height: 1.7;
}

/* =====================================================
   ACCESSIBILITY & UX POLISH
===================================================== */

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

/* =====================================================
   RESPONSIVE TUNING
===================================================== */

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  .lead {
    font-size: 1rem;
  }
}


/* =========================
   TIMELINE (stacked thumbs)
   Scope: body.timeline
========================= */

body.timeline .timeline-wrap{
  display:grid;
  gap:1.25rem;
}

body.timeline .t-item{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:1rem;
  align-items:start;
}

/* Rail */
body.timeline .t-rail{
  position:relative;
  padding:0.25rem 0 0.25rem 1.25rem;
}

body.timeline .t-rail::before{
  content:"";
  position:absolute;
  left:10px;
  top:0;
  bottom:0;
  width:2px;
  background: rgba(15,23,42,0.12);
  border-radius:2px;
}

body.timeline .t-dot{
  position:absolute;
  left:4px;
  top:1.05rem;
  width:14px;
  height:14px;
  border-radius:999px;
  background:#0F172A;
  box-shadow: 0 0 0 4px rgba(15,23,42,0.10);
}

body.timeline .t-date{
  position:sticky;
  top:84px; /* adjust if your nav height differs */
  padding-top:0.65rem;
}

body.timeline .t-year{
  font-weight:700;
  letter-spacing:0.02em;
}

body.timeline .t-card{
  border:1px solid rgba(15,23,42,0.12);
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,0.06);
  overflow:hidden;
}

body.timeline .t-head{
  padding:1.1rem 1.1rem 0.75rem 1.1rem;
}

body.timeline .t-role{
  margin:0;
  font-size:1.15rem;
  line-height:1.25;
}

body.timeline .t-body{
  padding:0 1.1rem 1.1rem 1.1rem;
}

body.timeline .t-desc{
  margin:0.65rem 0 0.9rem;
  opacity:0.92;
}

body.timeline .t-bullets{
  margin:0 0 0.9rem 1.1rem;
}

body.timeline .t-meta{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-top:0.25rem;
}

body.timeline .pill{
  border:1px solid rgba(15,23,42,0.15);
  border-radius:999px;
  padding:0.35rem 0.6rem;
  font-size:0.9rem;
  opacity:0.88;
}

/* Evidence block */
body.timeline .t-evidence{
  margin:0.15rem 0 0.85rem;
}

/* Thumbnail stack */
body.timeline .thumb-stack{
  position:relative;
  height:110px;
  margin:0;
}

body.timeline .thumb{
  position:absolute;
  top:0;
  width:160px;
  height:110px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,0.12);
  box-shadow:0 12px 26px rgba(15,23,42,0.10);
  background:#f6f7f9;
  transform-origin:center;
  transition: transform 180ms ease, box-shadow 180ms ease;
  display:block;
}

body.timeline .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* stack positions (up to 4) */
body.timeline .thumb-1{ left:0;      transform: rotate(-2deg);  z-index:4; }
body.timeline .thumb-2{ left:36px;   transform: rotate(1.5deg); z-index:3; }
body.timeline .thumb-3{ left:72px;   transform: rotate(-1deg);  z-index:2; }
body.timeline .thumb-4{ left:108px;  transform: rotate(2deg);   z-index:1; }

body.timeline .thumb:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow:0 18px 36px rgba(15,23,42,0.16);
}

/* Mobile */
@media (max-width: 820px){
  body.timeline .t-item{ grid-template-columns: 1fr; }
  body.timeline .t-date{ position:static; }
  body.timeline .t-rail::before{ top:10px; bottom:10px; }
  body.timeline .thumb{ width:150px; height:105px; }
  body.timeline .thumb-stack{ height:105px; }
}