/* Work section — shared layout for /work/ and its case studies.
   Palette, surfaces, type and motion all come from trident-glass.css; this file
   only adds the layout primitives the case studies need (shot frames, meta
   tables, status pills). Keep it free of colour literals other than the two
   status hues, which have no token because nothing else on the site is amber. */

html, body { overflow-x: clip; }
a { color: var(--tg-a1); }

.tg-nav-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.tg-nav-links a { color: var(--tg-muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: color var(--tg-fast) var(--tg-ease); }
.tg-nav-links a:hover, .tg-nav-links a[aria-current="page"] { color: var(--tg-ink); }
.tg-nav-links .tg-btn { padding: 9px 18px; font-size: 13.5px; }

.hero { padding: 68px 0 28px; max-width: 780px; }
.hero .tg-chip { margin-bottom: 20px; }
.hero .tg-h1 { margin: 0 0 18px; }
.hero .lede { color: var(--tg-muted); font-size: 18px; max-width: 640px; margin: 0 0 26px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }

.section-label { margin: 52px 0 0; padding: 0; }
.section-note { color: var(--tg-muted); font-size: 15px; max-width: 640px; margin: 12px 0 0; }

/* ---------- status pill ---------- */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.live { color: var(--tg-a1); }
.status.pending { color: #f0b34e; }

/* ---------- work cards ---------- */
.work-grid { padding: 22px 0 10px; }
.work-card { display: flex; flex-direction: column; gap: 0; overflow: hidden; padding: 0; }
.work-card .shot { display: block; margin: 0; background: var(--tg-glass); border-bottom: 1px solid var(--tg-line); }
.work-card .shot img { display: block; width: 100%; height: 190px; object-fit: cover; object-position: top center; }
.work-card .body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.work-card .t { font-family: var(--tg-display); font-weight: 700; font-size: 20px; margin: 0; }
.work-card .t a { color: inherit; text-decoration: none; }
.work-card .t a:hover { color: var(--tg-a1); }
.work-card .k { color: var(--tg-muted); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.work-card .d { color: var(--tg-muted); font-size: 14.5px; line-height: 1.6; flex: 1; margin: 0; }
.work-card .links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 2px; }
.work-card .links a { font-size: 13px; font-weight: 600; color: var(--tg-a2); text-decoration: none; }
.work-card .links a:hover { color: var(--tg-a1); }

/* ---------- case study ---------- */
.case-head { padding: 60px 0 8px; max-width: 780px; }
.case-head .back { display: inline-block; color: var(--tg-muted); text-decoration: none; font-size: 13.5px;
  font-weight: 600; margin-bottom: 22px; }
.case-head .back:hover { color: var(--tg-ink); }
.case-head .tg-h1 { margin: 0 0 14px; font-size: clamp(32px, 5vw, 46px); }
.case-head .lede { color: var(--tg-muted); font-size: 18px; line-height: 1.65; margin: 0 0 22px; }
.case-head .meta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.facts { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 26px 0 4px; }
.fact { padding: 18px 20px; }
.fact .v { font-family: var(--tg-display); font-weight: 700; font-size: 26px; line-height: 1.1;
  background: linear-gradient(120deg, var(--tg-a1), var(--tg-a2)); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.fact .l { color: var(--tg-muted); font-size: 13px; line-height: 1.5; margin-top: 8px; }

.prose { max-width: 700px; padding: 8px 0 0; }
.prose h2 { font-family: var(--tg-display); font-weight: 700; font-size: 23px; margin: 34px 0 12px; }
.prose p { color: var(--tg-muted); font-size: 16.5px; line-height: 1.75; margin: 0 0 16px; }
.prose strong { color: var(--tg-ink); font-weight: 600; }
.prose ul { color: var(--tg-muted); font-size: 16.5px; line-height: 1.75; margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--tg-a2); }

/* Full-page capture: tall, so it is framed in a scroll box rather than pushing
   the rest of the page off-screen. */
.shot-full { margin: 26px 0 8px; border-radius: 16px; overflow: hidden; border: 1px solid var(--tg-line);
  background: var(--tg-glass); }
.shot-full .scroller { max-height: 620px; overflow-y: auto; overscroll-behavior: contain; }
.shot-full img { display: block; width: 100%; height: auto; }
.shot-full figcaption { color: var(--tg-muted); font-size: 13px; padding: 12px 16px;
  border-top: 1px solid var(--tg-line); }

.next-row { display: flex; gap: 14px; flex-wrap: wrap; padding: 30px 0 0; }

@media (max-width: 640px) {
  .hero { padding-top: 48px; }
  .shot-full .scroller { max-height: 460px; }
}