/* =========================================================
   Theme tokens
   ========================================================= */
:root{
  /* Base */
  --bg:#f6f7f9;
  --panel:#ffffff;
  --ink:#0f172a;     /* headline */
  --muted:#4b5563;   /* body */
  --line:#e5e7eb;
  --accent:#111827;  /* button */
  --pill:#f3f4f6;
  --radius:18px;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --header-h:72px;   /* sticky header height */

  /* Cards / text sizing */
  --card-text-size: 14px;
  --card-text-leading: 1.5;

  /* Project & detail sizing */
  --project-thumb-h: 180px; /* fixed project/recs image height */


  /* Clamping defaults */
  --rec-desc-lines: 2;      /* lines for rec descriptions */

  /* Hero / parallax tuning */
  --hero-h: clamp(200px, 34vh, 320px);
  --hero-oversize-scale: 1; /* minimum zoom */
  --hero-max-scale: 1;  
  --parallax-range: 48px;      /* total travel/2 (bigger = stronger) */
  --parallax-strength: 1.6;   /* >1 exaggerates motion at center */
  /* 0% = top, 50% = center, 66% ≈ “1/3 from bottom” */
  --hero-anchor-y:50%;

  /* Header offset + page end breathing room */
  --header-gap: 14px;
  --page-bottom-space: clamp(28px, 10vh, 140px);

  /* Recs article sizing */
  --recs-article-min-h: 220px;
  --recs-article-title-lines: 2;

  --see-more-slide: 14px;                /* how far the button moves down */
  --see-more-total: 6600ms;               /* slower/faster overall */
  --see-more-ease: cubic-bezier(.2,.7,.2,1);

  --see-slide-ms: 750;     /* button & tail slide speed */
  --card-in-ms: 460;       /* per-card fade/raise in */
  --card-out-ms: 360;      /* per-card fade/drop out */
  --see-ease: cubic-bezier(.2,.7,.2,1);



  /* parallax sweep as percentages */
  --hero-anchor-start: 80%;
  --hero-anchor-end: 20%;



  /* keep no-zoom */
  --hero-oversize-scale: 1;
  --hero-max-scale: 1;

  --hero-anchor-y: 80%; /* start near the bottom */
}


/* =========================================================
   Base / resets
   ========================================================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:var(--bg);
  position: relative;
}

/* Optional top progress bar (JS sets width or transform) */
#progress.progress-bar{
  position: fixed; inset: 0 0 auto 0; height: 3px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg,#111827, #6b7280);
  z-index: 1100;
  pointer-events: none;
}

/* =========================================================
   Background lines
   ========================================================= */
.bg-lines{
  position: fixed; inset: 0;
  z-index: -1;           /* behind content */
  pointer-events: none;
  opacity: .8;
}
.bg-lines svg{ width:100%; height:100%; display:block; }
.bg-lines path{ stroke-opacity:.9; } /* or stroke-width:2; */

/* =========================================================
   Layout helpers
   ========================================================= */
.container {
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(16px, 3vw, 32px);
}

/* =========================================================
   Header & Nav (gap-painted top, no white band)
   ========================================================= */
.site-header{
  position: sticky;
  top: calc(env(safe-area-inset-top) + var(--header-gap));
  z-index: 1000;
  height: var(--header-h);
  background: transparent;   /* no white band */
  backdrop-filter: none;
  pointer-events: none;      /* clicks pass through empty gap */
}
.site-header .nav-wrap{ pointer-events:auto; }

.nav-wrap{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius: calc(var(--radius) + 8px);
  padding:10px 14px;
  box-shadow:var(--shadow);
}
.brand{
  font-weight:900; letter-spacing:.4px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fafafa;
}
.nav{display:flex; align-items:center; gap:18px;}
.nav a{color:var(--muted); text-decoration:none; font-weight:600}
.nav a.active,[aria-current="page"]{color:var(--ink)}
.cta{
  appearance:none; border:2px solid var(--ink);
  background:var(--ink); color:#fff; padding:10px 16px;
  border-radius:14px; font-weight:700
}

/* Mobile menu shell (safe if not rendered) */
.hamburger{display:none; background:transparent; border:1px solid var(--line); border-radius:12px; padding:8px 10px}
.mobile-panel{display:none; position:absolute; top:100%; right:0; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:var(--shadow)}
.mobile-panel a{display:block; padding:10px 12px; color:var(--muted); text-decoration:none; border-radius:10px}
.mobile-panel a:hover{background:#f3f4f6}

/* Paint the top gap so content doesn't show behind it */
body::before{
  content:"";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(env(safe-area-inset-top) + var(--header-gap));
  background: var(--bg);
  z-index: 999;
  pointer-events: none;
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 3vw, 40px);
  align-items:center; margin-top: clamp(18px, 4vw, 36px);
}


.eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
  background:#eef2ff; border:1px solid #e5e7eb; color:#334155; border-radius:10px; font-weight:600;

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
  animation: eyebrowIn .45s ease-out both; animation-delay: .1s;
}
@keyframes eyebrowIn {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (hover:hover) and (pointer:fine){
  .eyebrow:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
    border-color: #d1d5db;
  }
}
@media (prefers-reduced-motion: reduce){ .eyebrow{ transition:none; animation:none; } }

h1{font-size: clamp(32px, 6vw, 64px); line-height:1.06; margin:14px 0 10px}
.lede{color:var(--muted); max-width: 58ch; font-size: clamp(15px, 2.2vw, 18px);}
.actions{display:flex; gap:12px; margin:22px 0 28px}
.btn{appearance:none; border:none; padding:12px 18px; border-radius:14px; font-weight:800; cursor:pointer}
.btn.primary{background:var(--accent); color:#fff}
.btn.ghost{background:transparent; color:var(--ink); border:2px solid var(--line)}

.metrics{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; max-width:480px;}
.metric{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px 16px; text-align:center;
  transition: transform .2s ease, box-shadow .2s ease; will-change: transform; }
.metric b{font-size:22px; display:block}
.metric span{color:var(--muted)}
@media (hover:hover) and (pointer:fine){
  .metrics .metric:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
  }
}
@media (prefers-reduced-motion: reduce){ .metrics .metric{ transition:none; } }

/* Right card + floating pills */
.photo-card{
  position:relative; background:linear-gradient(180deg,#f9fafb,#eef2ff);
  border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow);
  padding:14px; overflow:hidden;

  transition: transform .2s ease, box-shadow .2s ease; will-change: transform;
}
.photo-card .frame{
  border-radius:18px; background:#dbe1f3; height:min(62vh,560px);
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden
}
.photo-card img{ width:100%; height:100%; object-fit:cover; object-position:center 15%; filter:grayscale(100%)}

@media (hover:hover) and (pointer:fine){
  .photo-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10); }
  .photo-card .frame img{ transition: transform .35s ease; will-change: transform; }
  .photo-card:hover .frame img{ transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce){ .photo-card, .photo-card .frame img{ transition:none; } }

.pill{
  position:absolute;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:8px 12px;
  background:var(--pill); border:1px solid var(--line); border-radius:999px;
  box-shadow: var(--shadow); font-weight:700; color:#111827;
  text-align:center; line-height:1.1;

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pill.top{ top:16%; left:50%; transform:translate(-50%,-50%) translateY(var(--lift)); max-width:min(88%,18ch); white-space:normal; text-wrap:balance; hyphens:auto; }
.pill.right{ right:6%; bottom:24%; transform: translateY(var(--lift)); }
.pill.left{  left:6%;  bottom:16%; transform: translateY(var(--lift)); }
.photo-card .pill{ --lift:0px; }
@media (hover:hover) and (pointer:fine){
  .photo-card:hover .pill{ --lift:-2px; box-shadow:0 8px 18px rgba(15,23,42,0.08); border-color:#d1d5db; }
}
@media (prefers-reduced-motion: reduce){ .photo-card .pill{ transition:none; } }

/* =========================================================
   Accessibility & section layout
   ========================================================= */
a:focus-visible, button:focus-visible{outline:3px solid #93c5fd; outline-offset:2px}
.section {
  margin-top: clamp(24px, 5vw, 48px);
  scroll-margin-top: calc(var(--header-h) + 8px);
}
.section h2{font-size: clamp(22px, 3.5vw, 34px); margin: 0 0 8px}
.section p.lead{color:var(--muted); margin: 8px 0px;}

/* Bottom breathing room (nice anchor-to-contact feel) */
body::after{
  content:"";
  display:block;
  height: calc(var(--page-bottom-space) + env(safe-area-inset-bottom));
}
#contact.section{
  margin-bottom: var(--page-bottom-space);
  scroll-margin-bottom: var(--page-bottom-space);
}

/* =========================================================
   Responsiveness
   ========================================================= */
@media (max-width: 960px){
  .hero{grid-template-columns:1fr}
  .photo-card .frame{height:min(54vh,480px)}
  .metrics{max-width:none}
}
@media (max-width: 780px){
  .nav{display:none}
  .hamburger{display:inline-flex}
}

/* =========================================================
   Skills
   ========================================================= */
.skills-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:14px;
}
.chip{
  display:flex; align-items:center; justify-content:center;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  font-weight:700;
  text-align:center;
}
#skills .chip{ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; will-change: transform; }
@media (hover:hover) and (pointer:fine){
  #skills .chip:hover{ transform: translateY(-3px); box-shadow:0 10px 24px rgba(15,23,42,.08); border-color:#d1d5db; }
  #skills .chip:active{ transform: translateY(-1px); box-shadow:0 6px 14px rgba(15,23,42,.06); }
}
#skills .chip:focus-visible{ outline:2px solid #111827; outline-offset:2px; transform: translateY(-3px); box-shadow:0 10px 24px rgba(15,23,42,.08); }
@media (prefers-reduced-motion: reduce){ #skills .chip{ transition:none; } }

/* =========================================================
   Timeline
   ========================================================= */
.t-item{
  position:relative; margin:22px 0; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; padding:14px 20px; box-shadow:var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease; will-change: transform;
}
.t-title{font-weight:800}
.t-meta{color:var(--muted); font-size:14px}
@media (hover:hover) and (pointer:fine){
  .timeline .t-item:hover{ transform: translateY(-4px); box-shadow:0 10px 24px rgba(15,23,42,.08); }
}

/* Axis + dots */
.timeline{
  --tl-axis-x: 14px;
  --tl-axis-w: 2px;
  --tl-dot: 10px;
  --tl-indent: calc(var(--tl-axis-x) + 20px);
  --tl-center-offset: calc(var(--tl-axis-x) + (var(--tl-axis-w)/2) - var(--tl-indent));
  position: relative; padding-left: var(--tl-indent);
}
.timeline::before{
  content:""; position:absolute; left: var(--tl-axis-x); top:4px; bottom:4px;
  width: var(--tl-axis-w); background: var(--line);
}
.t-item::before{
  content:""; position:absolute; top:14px; left: var(--tl-center-offset);
  transform: translateX(-50%); width: var(--tl-dot); height: var(--tl-dot);
  background:#111827; border-radius:999px;
}
@media (min-width:1024px){
  .timeline .t-item ul{ columns:2; column-gap:24px; padding-left:1.1rem; margin-top:8px; }
  .timeline .t-item li{ break-inside:avoid; margin:2px 0; }
}

/* =========================================================
   Projects
   ========================================================= */
/* ===== Projects grid ===== */
.projects-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  grid-auto-flow: row dense;
  --project-thumb-h: 150px;
}

.projects-grid > *{ min-width:0; }
@media (max-width: 640px){
  .projects-grid { --project-thumb-h: 140px; }
}

/* Make wrapper link fill cell; ensure card can stretch */
.projects-grid .card-link{ display:block; }
.projects-grid .card-link,
.projects-grid .project-card{ height:100%; }

/* Project card */
.project-card{
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease; will-change: transform;
  position: relative; /* for status pill */
}
.project-card img{
  display:block; width:100%; height: var(--project-thumb-h); object-fit:cover;
}
.project-card .p-body{ padding:8px 14px; display:grid; gap:6px; }
.project-card h3{ margin:0 0 2px; font-size:18px; }
.project-card p{ color:var(--muted); margin:0; font-size: var(--card-text-size); line-height: var(--card-text-leading); }

.project-card .p-body {
  padding: 8px 14px;
  display: grid;
  gap: 0;   /* remove uniform gap */
}

/* Space below the title */
.project-card .p-body h3 {
  margin-bottom: 4px;  /* adjust top spacing */
}

/* Space above the summary */
.project-card .p-body p {
  margin-top: 6px;    /* adjust bottom spacing */
}


/* Hover effects */
@media (hover:hover) and (pointer:fine){
  .projects-grid .project-card:hover{ transform: translateY(-4px); box-shadow:0 14px 30px rgba(15,23,42,.10); }
  .projects-grid .project-card img{ transition: transform .35s ease; will-change: transform; }
  .projects-grid .project-card:hover img{ transform: scale(1.02); }
}

/* Status pill */
.project-card[data-status]::before{
  content: attr(data-status);
  position: absolute; top:8px; left:8px;
  padding:6px 10px;
  font: 800 12px/1.1 Inter, system-ui, sans-serif;
  letter-spacing:.2px; text-transform:capitalize;
  border-radius:999px; border:1px solid var(--line);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow); pointer-events:none; z-index:2;
}
.project-card[data-status="complete"]::before{ color:#166534; background:#ecfdf5; border-color:#d1fae5; }
.project-card[data-status="inprogress"]::before{ color:#92400e; background:#fff7ed; border-color:#fed7aa; }
.project-card[data-status="upcoming"]::before{ color:#374151; background:#f3f4f6; border-color:#e5e7eb; }

/* Tag rows (unified) */
.project-card .tags,
.project-card .p-tags{
  display:flex; flex-wrap:wrap; gap:4px; margin-top: 0.25rem;
}
.projects-grid .project-card p{
  font-size: calc(var(--card-text-size) * 0.94);        /* ~15px if base is 16px */
  line-height: var(--card-text-leading);
}
.projects-grid .project-card .tags,
.projects-grid .project-card .p-tags{
  max-height:28px;            /* cap to ~1 row */
  overflow:hidden;
}
.project-card .tag,
.p-tags .tag{
  display:inline-flex; align-items:center;
  padding:4px 8px; font-size:12px; font-weight:700; line-height:1;
  color:var(--ink); background:var(--pill); border:1px solid var(--line);
  border-radius:999px; white-space:nowrap;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
@media (hover:hover) and (pointer:fine){
  .project-card .tag:hover{ transform: translateY(-1px); box-shadow:0 6px 14px rgba(15,23,42,.06); border-color:#d1d5db; }
}
.project-card .tag:focus-visible{ outline:2px solid #93c5fd; outline-offset:2px; }

/* Clamp title and description */
.projects-grid .project-card h3,
.projects-grid .project-card .p-body p{
  --lines: 2;
  line-clamp: var(--lines);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: var(--lines);
  overflow:hidden; text-overflow:ellipsis;
}


/* Forced columns at breakpoints */
@media (max-width: 639.98px){ .projects-grid{ grid-template-columns:1fr !important; } }
@media (min-width:640px) and (max-width:1023.98px){ .projects-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (min-width:1024px){ .projects-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }



/* =========================================================
   Articles
   ========================================================= */
.articles-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px;
}
.article-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:16px; box-shadow:var(--shadow); display:grid; gap:8px;
  transition: transform .2s ease, box-shadow .2s ease; will-change: transform;
}
.article-card h3{margin:0}
.article-meta{color:var(--muted); font-size:14px}
.article-card a{font-weight:800; text-decoration:none; color:var(--ink)}
.article-card .lead{ color:var(--muted); font-size: var(--card-text-size); line-height: var(--card-text-leading); }
@media (hover:hover) and (pointer:fine){
  .articles-grid .article-card:hover{ transform: translateY(-4px); box-shadow:0 10px 24px rgba(15,23,42,.08); }
}

/* Card focus parity */
.timeline .t-item:focus-visible,
.articles-grid .article-card:focus-visible{
  outline: 2px solid #111827;
  outline-offset: 2px;
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

/* Reduced motion for large groups */
@media (prefers-reduced-motion: reduce){
  .timeline .t-item,
  .articles-grid .article-card,
  .projects-grid .project-card{ transition:none; }
}

/* =========================================================
   Contact
   ========================================================= */
.contact{
  background:linear-gradient(180deg,#fafafa,#f3f4f6);
  border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow:var(--shadow)
}
.contact form{display:grid; gap:12px;}
.contact label{display:grid; gap:6px; font-weight:700}
.contact input,.contact textarea{padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:#fff; font:inherit}
.contact textarea{min-height:120px; resize:vertical}
.contact button{justify-self:start}

/* =========================================================
   See More reveal animation
   ========================================================= */
.hidden-tile{ display:none; will-change: transform, opacity; contain:layout paint; }
.section.expanded .hidden-tile{ display:block; }
.hidden-tile.anim-in{ animation: slideFadeIn 360ms ease both; }
.hidden-tile.anim-out{ animation: slideFadeOut 300ms ease both; }
@keyframes slideFadeIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
@keyframes slideFadeOut{ from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(12px);} }
@media (prefers-reduced-motion: reduce){
  .hidden-tile.anim-in, .hidden-tile.anim-out{ animation:none !important; }
}
.see-more-wrap{ margin-top:16px; text-align:center; }

/* =========================================================
   Detail page (post) + recommendations
   ========================================================= */
.post{ margin-top: clamp(18px, 4vw, 32px); }
.crumbs{
  display:flex; align-items:center; gap:8px;
  font-weight:700; color:var(--muted); margin: 6px 0 8px;
}
.crumbs a{ color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover{ border-color: var(--line); }

.post-header h1{ margin:6px 0; font-size: clamp(28px, 5vw, 48px); line-height:1.06; }
.post-meta{ color: var(--muted); font-weight: 600; }

/* Bevel-smooth hero (no crunchy borders, no white edges) */
.post-hero{
  margin: 14px 0 18px; height: var(--hero-h); position: relative;
  overflow: hidden; clip-path: inset(0 round 16px); border-radius: 16px;
  box-shadow: var(--shadow); border:none;
}
.post-hero::after{ /*On top of post - figure caption*/
  content: ""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35) inset; pointer-events:none;
}
/* Image composition with anchor; base oversize for parallax headroom */
.post-hero img{
  position:absolute; top:50%; left:50%;
  width:100%; height:100%;
  object-fit:cover; object-position: 50% var(--hero-anchor-y);
  transform: translate(-50%,-50%) scale(var(--hero-oversize-scale));
  will-change: transform; display:block;
}


/* Optional: no-crop variant for ultra-wide/low-res banners */
.post-hero--contain > img{
  object-fit: contain;                   /* shows whole image, may letterbox */
  background: linear-gradient(180deg,#fafafa,#f3f4f6);
}


.post-hero figcaption{
  position:absolute; top:0; left:0; right:0;
  padding:8px 12px; font-size:14px; line-height:1.4; color:var(--muted);
  background: rgba(255,255,255,.5); backdrop-filter: blur(4px);
  border-top-left-radius:16px; border-top-right-radius:16px;
}
@media (prefers-reduced-motion: reduce){
  .post-hero img{ transform: translate(-50%,-50%) scale(var(--hero-oversize-scale)); }
}

.post-content{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding: clamp(14px, 2.8vw, 22px);
}
.post-content p{ line-height:1.65; color:var(--ink); }
.post-content ul{ padding-left:1.1rem; }
.post-content li{ margin:6px 0; }

.recommendations{ margin-top: clamp(20px, 5vw, 36px); }
.recommendations h2{ margin-bottom:8px; }
.recs-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; align-items:stretch;
}
.card-link{ display:block; color:inherit; text-decoration:none; }
.project-card, .article-card{ cursor:pointer; }
.recs-grid .article-card h3{ margin:0; }
.recs-grid .project-card img{ height: var(--project-thumb-h); width:100%; object-fit:cover; display:block; }

/* Hover parity for recs */
.recs-grid .article-card, .recs-grid .project-card{
  transition: transform .2s ease, box-shadow .2s ease; will-change: transform;
}
@media (hover:hover) and (pointer:fine){
  .recs-grid .article-card:hover, .recs-grid .project-card:hover{
    transform: translateY(-4px); box-shadow:0 14px 30px rgba(15,23,42,.10);
  }
  .recs-grid .project-card img{ transition: transform .35s ease; will-change: transform; }
  .recs-grid .project-card:hover img{ transform: scale(1.02); }
}
.recs-grid .article-card:focus-visible, .recs-grid .project-card:focus-visible{
  outline:2px solid #111827; outline-offset:2px;
  transform: translateY(-4px); box-shadow:0 10px 24px rgba(15,23,42,.08);
}
@media (prefers-reduced-motion: reduce){
  .recs-grid .article-card, .recs-grid .project-card{ transition:none; }
}

/* Make recs cards fill their grid rows like the main page */
.recs-grid .card-link,
.recs-grid .project-card,
.recs-grid .article-card {
  height: 100%;
}

@media (max-width: 639.98px){ .recs-grid{ grid-template-columns:1fr !important; } }
@media (min-width:640px) and (max-width:1023.98px){ .recs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (min-width:1024px){ .recs-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }



/* =========================================================
   Multi-line clamp utilities
   ========================================================= */
.clamp{
  --lines: 2;
  line-clamp: var(--lines);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: var(--lines);
  overflow:hidden; text-overflow:ellipsis;
}

/* Recs: titles/summaries clamped */
.recs-grid .article-card h3{
  margin:0; --lines: var(--recs-article-title-lines);
  line-clamp: var(--lines);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: var(--lines);
  overflow:hidden; text-overflow:ellipsis;
}
.recs-grid .article-card .lead,
.recs-grid .project-card .p-body p{
  --lines: var(--rec-desc-lines);
  line-clamp: var(--lines);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: var(--lines);
  overflow:hidden; text-overflow:ellipsis;
}



/* ===== Table of contents (detail page) ===== */
.toc{
  margin: 12px 0 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.toc .toc-title{
  font: 800 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.toc ul{ list-style: none; padding-left: 0; margin: 0; }
.toc li{ margin: 4px 0; }
.toc a{
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.toc a:hover{ color: var(--ink); border-color: var(--line); }
.toc a.active{ color: var(--ink); font-weight: 700; }
.toc ul ul{ padding-left: 14px; border-left: 1px dashed var(--line); margin-top: 4px; }

/* Make anchored headings land below the sticky header */
.post-content h2,
.post-content h3,
.post-content h4{
  scroll-margin-top: calc(var(--header-h) + 12px);
}
/* ===== TOC: balanced two columns (mobile -> 1 col) ===== */
/* two even columns on wide screens; left takes extra */
.toc .toc-cols{
  display: grid;
  gap: 6px 24px;
}
@media (min-width: 900px){
  .toc .toc-cols{ grid-template-columns: 1fr 1fr; align-items: start; }
}
.toc .toc-cols ul{ list-style: none; padding: 0; margin: 0; }
.toc .toc-cols li{ margin: 4px 0; }
.toc .toc-cols ul ul{ padding-left: 14px;  margin-top: 4px; }

.toc .toc-cols { grid-auto-rows: min-content; }
.toc .toc-cols > ul { min-width: 0; }
/* Toggle bar + button */
.toc-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap: 8px; margin-bottom: 6px;
}
.toc-toggle{
  appearance:none; border:1px solid var(--line); background:var(--pill);
  border-radius: 10px; padding:6px 10px; cursor:pointer;
  font: 600 12px/1 Inter, system-ui, sans-serif; color: var(--muted);
}
.toc-toggle:hover{ color: var(--ink); }

/* Collapsible body (animated) */
.toc .toc-body{
  overflow: clip;
  max-height: 0;                /* collapsed by default */
  transition: max-height .25s ease;
}

/* Rotate the chevron when open (handled via text glyph, but keep for future icon) */
.toc.is-open .toc-toggle .chev{ transform: rotate(180deg); }
.toc .toc-toggle .chev{ display:inline-block; margin-right:6px; transition: transform .2s ease; }

/* Indent by level when TOC is in two-column mode */
@media (min-width: 900px){
  .toc .toc-cols > ul > li.lvl-3 { padding-left: 14px; }
  .toc .toc-cols > ul > li.lvl-4 { padding-left: 28px; }
}
/* (Single-column mode already uses `.toc ul ul { padding-left: 14px; }`) */
/* Bold H2 items in the TOC */
.toc li.lvl-2 > a{
  font-weight: 800;
  color: var(--ink);
}

/* Keep the active state strong too */
.toc li.lvl-2 > a.active{
  font-weight: 800;
}

/* ===== Detail pager (Prev • 1 2 3 • Next) ===== */
.pager{
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin:16px 0 4px;
}
.pager .nav-btn,
.pager .dot{
  appearance:none; cursor:pointer;
  border:1px solid var(--line);
  background:var(--pill);
  color:var(--ink);
  border-radius:999px;
  padding:8px 12px;
  font: 800 13px/1 Inter, system-ui, sans-serif;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pager .nav-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.pager .dots{ display:flex; align-items:center; gap:6px; }
.pager .dot{ min-width:34px; text-align:center; }
.pager .dot.is-current{
  background: var(--ink); color:#fff; border-color: var(--ink);
}
@media (hover:hover) and (pointer:fine){
  .pager .nav-btn:hover, .pager .dot:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
    border-color:#d1d5db;
  }
}
.pager .dot:focus-visible,
.pager .nav-btn:focus-visible{
  outline:2px solid #93c5fd; outline-offset:2px;
}




/* Card reveal: fade in + move up slightly into place */
@keyframes revealIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hidden-tile.reveal-in {
  animation: revealIn 6000ms ease both;
}

/* (keeps your existing .hidden-tile display logic) */


@keyframes nudgeDownUp {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(var(--see-more-slide)); }
  100% { transform: translateY(0); }
}

.see-more-btn.nudge {
  animation: nudgeDownUp var(--see-more-total) var(--see-more-ease);
}

/* only the extra tiles we sequence are hidden pre-anim (prevents flashes) */
.section .hidden-tile.seq-guard{
  opacity:0;
  transform: translateY(12px);
  pointer-events:none;
}

/* LOCK the page-tail while it slides (no hover, no pointer events, no hover transitions) */
[data-flip-lock]{ pointer-events:none; contain: paint; }
[data-flip-lock] .article-card,
[data-flip-lock] .project-card{ transition: none !important; }
[data-flip-lock] .article-card:hover,
[data-flip-lock] .project-card:hover{
  transform: none !important;
  box-shadow: var(--shadow) !important;
}

/* (optional) small perf hint for moved siblings */
.section ~ *{ will-change: transform; }


.project-card[data-status="in progress"]::before {
  color: #92400e;
  background: #fff7ed;
  border-color: #fed7aa;
}





/* fade-in guard (optional, avoids any onload flash) */
.post-hero img { opacity: 0; transition: opacity .18s ease; }
.post-hero.is-ready img { opacity: 1; }



/* (optional) tiny fade just in case the browser repaints from bfcache */
.post-hero img { opacity: 0; transition: opacity .18s ease; }
.post-hero.is-ready img { opacity: 1; }

/* Bevel-smooth hero (no crunchy borders, no white edges) */
.post-hero img{
  position:absolute; top:50%; left:50%;
  width:100%; height:100%;
  object-fit:cover; object-position: 50% var(--hero-anchor-y);
  transform: translate(-50%,-50%);      /* center only (no extra scale) */
  will-change: object-position;          /* <-- was transform */
  display:block;
}

/* Tag rows */
.project-card .tags,
.project-card .p-tags{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top: 0;          /* was -2px; remove the negative margin */
  padding-top: 2px;       /* headroom so hover-lift isn’t clipped */
}

/* Cap to ~1 row but allow the hover wiggle */
.projects-grid .project-card .tags,
.projects-grid .project-card .p-tags{
  max-height: 32px;       /* was 28px */
  overflow: hidden;
}



/* Inline PDF preview that fits the content box width */
.pdf-preview {
  display: block;
  width: 100%;                 /* match content width */
  border-radius: 12px;
  overflow: hidden;            /* rounds the image corners */
  background: #fff;            /* no dark edge around transparent PNGs */
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.pdf-preview img {
  display: block;
  width: 100%;
  height: auto;                /* keep aspect ratio */
}

/* Nice hover affordance (optional) */
@media (hover:hover) and (pointer:fine){
  .pdf-preview { transition: transform .18s ease, box-shadow .18s ease; }
  .pdf-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
  }
}


/* Remove phantom grid rows when collapsed:
   hide the wrapper <a> if it ONLY contains a hidden card */
.section:not(.expanded) .projects-grid .card-link:has(> .hidden-tile) {
  display: none;
}

/* When expanded, show those wrappers again */
.section.expanded .projects-grid .card-link:has(> .hidden-tile) {
  display: block;
}


/* === Table Styling (Word-like) === */
:root{
  --table-head-bg: #1f2937;   /* dark header */
  --table-head-fg: #ffffff;   /* header text */
  --table-row-alt: #f3f4f6;   /* zebra rows */
  --table-border:  #e5e7eb;   /* borders */
}

table {
  width: 100% !important;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid var(--table-border);
  margin: 16px 0;
}

thead th {
  background: var(--table-head-bg);
  color: var(--table-head-fg);
  font-weight: 700;
  border: 1px solid var(--table-head-bg);
  padding: 10px 8px;
  text-align: center;
}

tbody td {
  border: 1px solid var(--table-border);
  padding: 8px 8px;
  vertical-align: middle;
  word-wrap: break-word;
}

tbody tr:nth-child(even) {
  background: var(--table-row-alt);
}

.table-wrap {
  overflow-x: auto;
}
.table-wrap > table {
  min-width: 600px;
}

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { max-width: none; padding: 0; }
}


/* Make article cards equal height in the main Articles grid */
.articles-grid .card-link,
.articles-grid .article-card { height: 100%; }

/* Clamp title & summary lines in the main Articles grid (like recs) */
.articles-grid .article-card h3,
.articles-grid .article-card .lead{
  --lines: 2;  /* 2 lines for title by default */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
  overflow: hidden;
  text-overflow: ellipsis;
}
.articles-grid .article-card .lead{ --lines: 3; } /* 3 lines for summary */