/* Julian Siravo's 9 October orb treatment, integrated with the current portfolio.
   Sizes, shadows and under-title type follow reference/orbs.css. */
:root { --t-small: 14px; }
.work-item, .work-item:first-child {
  display: grid; grid-template-columns: 10rem minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: start; gap: 48px; padding: 32px 0; border-top: 1px solid var(--rule);
}
.work-item:last-child { padding-bottom: 0; }
.work-meta, .work-detail { min-width: 0; }
.work-title, .work-item:first-child .work-title {
  font-size: clamp(26px, 2.2vw, 32px); margin: 0;
}
.work-item .work-type {
  font-size: calc(var(--t-small) - 1pt); font-weight: 300;
  color: var(--muted); margin: 6px 0 0;
}
.work-orb { display: block; position: relative; isolation: isolate; aspect-ratio: 1; width: 100%; max-width: 10rem; border-radius: 50%; cursor: crosshair; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.work-orb[href] { cursor: pointer; }
.work-orb:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.work-orb::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: -8%; height: 11%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--orb-b) 35%, rgba(0,0,0,.5)), transparent); filter: blur(6px); opacity: .45; pointer-events: none; }
:root[data-theme="paper"] .work-orb::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--orb-b) 12%, rgba(17,20,20,.32)), transparent); opacity: .5; }
.work-orb canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.work-orb--fallback { background: radial-gradient(circle at 42% 38%, var(--orb-b), var(--orb-a) 75%); }
@media (max-width: 1100px) {
  .work-item, .work-item:first-child { gap: 24px; }
}
@media (max-width: 720px) {
  :root { --t-small: 13.5px; }
  .work-item, .work-item:first-child { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .work-orb { max-width: 7.5rem; margin: 0 0 16px; }
  .work-title, .work-item:first-child .work-title { font-size: 28px; margin-bottom: 4px; }
  .work-item .work-type { margin: 0; }
}
@media print { .work-orb { display: none; } .work-item, .work-item:first-child { grid-template-columns: 1fr 1fr; } }