/* ============================================================================
   Work shell — the two-panel layout shared by /work and every /project/<slug>.
   A sticky left rail (title + brand slot up top, page-specific content in the
   foot) beside a scrolling right column. Only the mechanics live here — the
   rail foot's contents (testimonial rotator on /work, back button on project
   pages) and the right column's contents are each page's own CSS.
   ============================================================================ */
body { background: var(--canvas); }

/* animated soil / drag-gradient behind everything (header, content, footer) */
#work-soil { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* horizontal gutter matches the fixed nav's inset so the right column lines
   up with the left edge of the nav pill */
#work { position: relative; z-index: 1; display: grid;
        grid-template-columns: clamp(240px, 24vw, 340px) minmax(0, 1fr);
        gap: clamp(24px, 4vw, 72px);
        padding: clamp(120px, 16vh, 190px) var(--chrome-inset) clamp(60px, 10vh, 120px); }

.work-rail { position: sticky; top: clamp(120px, 16vh, 190px);
             height: calc(100svh - clamp(160px, 20vh, 240px));
             display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); }
/* same scale as #svc-title on Home */
.work-rail-title { font-family: 'Greed Narrow', sans-serif; font-weight: 600;
                   font-size: clamp(24px, 3vw, 34px); line-height: 1.12; letter-spacing: -.01em;
                   color: var(--ink-strong); margin: 0; }
.work-rail-title .uf { font-family: 'UnifrakturCook', serif; font-weight: 700; }
.work-rail-brand { font-family: 'Be Vietnam Pro', sans-serif; font-size: var(--text-lg);
                   line-height: 1.3; color: var(--color-primary-500); margin: var(--space-2) 0 0; }
.work-rail-brand[hidden] { display: none; }

/* Stack on mobile: rail head, then main column, then rail foot. display:contents
   dissolves the rail so its head and foot become siblings of the grid and can be
   ordered independently of the source order. */
@media (max-width: 900px) {
  #work { display: flex; flex-direction: column; gap: var(--space-6); }
  .work-rail { display: contents; }
  .work-rail-head { order: 1; }
  .work-main      { order: 2; }
  .work-rail-foot { order: 3; }
}

@media (max-width: 767px) {
  #work { padding: var(--space-12) var(--space-3) var(--space-10); }
}