/* ------------------------------------------------------------------
   Case-study pages (work/*.html). Loaded after site.css; same tokens and type.
   A slim strip of the Work painting replaces the big header; a "stops" route
   under it gets you between case studies.
------------------------------------------------------------------- */

/* slim header: the painting dissolves from the nav colour at the top and into the page at the bottom */
.trail-strip {
  position: relative; height: clamp(120px, 15vw, 210px); view-transition-name: trail;
  background: url(scenes/work.webp) center 34% / cover no-repeat;
}
.trail-strip::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 55%; background: linear-gradient(to bottom, var(--nav-bg), transparent); }
.trail-strip::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top, rgb(16 35 28) 0%, rgb(16 35 28 / .86) 16%, rgb(16 35 28 / .55) 40%, rgb(16 35 28 / .22) 68%, rgb(16 35 28 / 0) 100%);
}

/* the route: a line with a stop for every case study */
.stops { margin-top: -6px; }
.stops ol { list-style: none; margin: 0; padding: 22px 0 0; position: relative; display: flex; justify-content: space-between; gap: 16px; }
.stops ol::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: var(--line); }
.stops li { position: relative; }
.stops a {
  display: block; padding-top: 6px; font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .04em; color: var(--text-2);
  white-space: nowrap; transition: color .2s;
}
.stops a::before {
  content: ""; position: absolute; left: 50%; top: -20px; width: 12px; height: 12px; border-radius: 50%; transform: translateX(-50%);
  background: var(--ink); border: 2px solid var(--muted); transition: background .2s, border-color .2s;
}
.stops a:hover { color: var(--text); } .stops a:hover::before { border-color: var(--text); }
.stops a[aria-current="page"] { color: var(--mint); }
.stops a[aria-current="page"]::before { background: var(--mint); border-color: var(--mint); }
.stops li:first-child a::before { left: 6px; transform: none; } .stops li:first-child a { text-align: left; }
.stops li:last-child a::before { left: auto; right: 6px; transform: none; } .stops li:last-child a { text-align: right; }
.stops li:not(:first-child):not(:last-child) a { text-align: center; }

/* case header (rises in as the page opens) */
.case-head, .stops { animation: unfold .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes unfold { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .case-head, .stops { animation: none; } }
.case-head { padding: 72px 0 40px; }
.case-head h1 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); margin-bottom: .35em; }
.case-head .lede { font-size: clamp(1.25rem, 1.9vw, 1.6rem); max-width: 30em; margin-bottom: 40px; }
.case-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--line); font-family: var(--sans); }
.case-meta dt { font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); margin-bottom: 8px; }
.case-meta dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.case-meta .muted { font-size: 13.5px; }

/* prints: images in a cream mount with the same shade as the polaroids */
.print { position: relative; isolation: isolate; padding: 12px; border-radius: 3px; }
.print::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 3px; background: var(--paper); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 1px 3px rgba(0,0,0,.25); }
.print::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 3px; background: var(--shade); -webkit-mask: var(--shade-mask); mask: var(--shade-mask); }
.print img { display: block; width: 100%; height: auto; border-radius: 2px; }
.print-pair { display: grid; gap: 20px; }
.case-hero { margin: 8px auto 16px; }

/* sections */
.case-section { padding-block: 80px; }
.case-section + .case-section { padding-top: 0; }
/* the section keeps the full wrap width (so it stays left-aligned); only its contents take a reading measure */
.prose > * { max-width: 66ch; }
.prose h2, .section-title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 .6em; }
.prose h2 + p { margin-top: 0; }
.prose p + h2 { margin-top: 2em; }
.glance-tiles { grid-template-columns: repeat(4, 1fr); gap: 32px 28px; }
.glance-tiles .num { font-size: 2.1rem; }

/* project blocks: text pinned to the top beside a lead image (sides alternate); any further images
   run in a staggered row beneath, so a block never becomes a tall column of prints next to a short text */
.project { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px 64px; align-items: start; padding: 56px 0; border-top: 1px solid var(--line); }
.project .project-text { grid-column: 1; grid-row: 1; }
.project .lead { grid-column: 2; grid-row: 1; }
.project:nth-child(odd) .project-text { grid-column: 2; }
.project:nth-child(odd) .lead { grid-column: 1; }
.section-title + .project { border-top: 0; padding-top: 16px; }
.print-row { grid-column: 1 / -1; display: grid; gap: 32px; align-items: start; }
.print-row.cols-2 { grid-template-columns: 1fr 1fr; }
.print-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.print-row.cols-1 { width: 72%; }
.project:nth-child(odd) .print-row.cols-1 { margin-left: auto; }
.print-row .print:nth-child(even) { margin-top: 32px; }   /* the cascade */
.project.no-image { grid-template-columns: 1fr; }
.project.no-image .project-text { max-width: 66ch; grid-column: 1; }
.project h3 { font-size: 1.45rem; margin: 0 0 .5em; }
.project p { color: var(--text-2); }
.why { position: relative; margin-top: 18px; padding: 2px 0 2px 16px; border-left: 2px solid var(--mint); color: var(--text); }
.why span { display: block; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); margin-bottom: 6px; }
.tags-row { font-family: var(--sans); font-size: 14px; color: var(--muted); margin-top: 28px; }

/* next stops: two tickets side by side */
.next-stops .section-head { margin-bottom: 36px; }
.signposts.two-up { grid-template-columns: 1fr 1fr; gap: 36px; }
.signposts.two-up li:nth-child(odd) { transform: rotate(-.8deg); }
.signposts.two-up li:nth-child(even) { transform: rotate(.7deg); }
.signposts.two-up .ttl { font-size: 1.25rem; }

@media (max-width: 900px) {
  .case-meta { grid-template-columns: 1fr 1fr; }
  .glance-tiles { grid-template-columns: 1fr 1fr; }
  .project { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
  .project .project-text, .project:nth-child(odd) .project-text { grid-column: 1; grid-row: 1; }
  .project .lead, .project:nth-child(odd) .lead { grid-column: 1; grid-row: 2; }
  .print-row.cols-2, .print-row.cols-3 { grid-template-columns: 1fr; gap: 20px; }
  .print-row.cols-1 { width: 100%; }
  .print-row .print:nth-child(even) { margin-top: 0; }
  .signposts.two-up { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .stops { overflow-x: auto; scrollbar-width: none; padding-inline: 0; width: 100%; }
  .stops::-webkit-scrollbar { display: none; }
  .stops ol { gap: 28px; padding-inline: var(--gutter); justify-content: flex-start; width: max-content; min-width: 100%; }
  .stops ol::before { left: var(--gutter); right: var(--gutter); }
  .stops li a { text-align: left !important; }
  .stops li a::before { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; }
  .case-head { padding: 48px 0 32px; }
  .case-meta { grid-template-columns: 1fr; gap: 18px; }
  .glance-tiles { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .glance-tiles .num { font-size: 1.7rem; }
  .print { padding: 8px; }
  .case-section { padding-block: 48px; }
}