/* Projects + Education pages on phones: video first, small number pill, stats as a framed list.
   Loaded by /projects/ and /education/ (head field in their _build/pages/*.html). Desktop is unchanged. */
@media (max-width:760px){
  .projects{padding-top:8px;}
  .proj{gap:18px; padding:36px 0 40px;}

  /* every project opens with its video, framed edge to edge of the text column */
  .proj .proj__media, .proj:nth-child(even) .proj__media{order:-1;}
  .proj .media{border-radius:18px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.45);}

  /* the big outline number becomes a small pill above the category */
  .proj__num{display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:26px; padding:0 10px; border-radius:999px; font-family:"Inter", sans-serif; font-size:12px; font-weight:700; letter-spacing:.08em; line-height:1; color:#fff; -webkit-text-stroke:0; background:rgba(176,56,240,.22); border:1px solid rgba(176,56,240,.6);}
  .proj h2{font-size:30px; margin:12px 0 12px;}
  .proj h2 small{font-size:11.5px; letter-spacing:.18em; margin-bottom:8px;}
  .proj p.lead{font-size:16px;}

  /* stats: one framed box, each stat a row with the number left and its label right */
  .stats-row{display:block; margin:22px 0 4px; padding:4px 16px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.035);}
  .stats-row > div{display:grid; grid-template-columns:112px minmax(0, 1fr); align-items:center; gap:14px; padding:12px 0; border-top:1px solid rgba(226,188,255,.09);}
  .stats-row > div:first-child{border-top:0;}
  .stats-row b{font-size:22px; letter-spacing:-.03em; color:var(--pb2); overflow-wrap:normal; white-space:nowrap;}
  .stats-row span{margin:0; font-size:13.5px; line-height:1.4; color:rgba(255,255,255,.78);}

  .proj .ticks{margin-top:18px;}
  .proj .ticks li{font-size:14.5px;}
}