/* Website-development case studies (/work/trilok-tech/, /work/mukesh-wiki/).
   Loaded after v3-system.css and public-pages.css on those two pages only.
   Uses existing v3 tokens. No inline styles (CSP style-src 'self'). No JavaScript.
   Body text stays at 16px or above; smaller sizes are for short secondary labels only. */

/* Live-site media: approved captures and user-started demo video. Width/height attributes reserve space. */
.showcase-hero img, .demo video, .storyboard img, .detail img, .compare img { display: block; width: 100%; height: auto; min-width: 0; border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--srf-solid); }
.shot { margin: 0; min-width: 0; }
.shot figcaption, .demo figcaption { color: var(--ink-3); font: 400 .82rem/1.5 Mono, monospace; margin-top: var(--s-2); }
.demo { margin: var(--s-5) 0 0; max-width: 34rem; }
.demo figcaption { font: inherit; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.compare img:last-of-type { max-width: 15rem; justify-self: center; }
/* Detail crops are shown at no more than their captured size (no blurry upscaling). The cap classes are
   max-widths, so width:100% and the width/height attributes still reserve each crop's space before it loads. */
.detail img[class^="cap-"] { justify-self: center; }
.cap-372 { max-width: 372px; } .cap-390 { max-width: 390px; } .cap-560 { max-width: 560px; } .cap-765 { max-width: 765px; }
@media (max-width: 760px) { .cap-phone-266 { max-width: 266px; } }
.detail picture { display: block; width: 100%; min-width: 0; }
.detail picture img { margin-inline: auto; }
.detail:nth-child(even) picture { order: 2; }

/* Opening: live capture beside a short, opaque fact panel */
.showcase-hero { padding-block: clamp(2.5rem, 6vw, 5rem) var(--s-6); }
.showcase-hero .shell { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) { .showcase-hero .shell { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.showcase-hero .shell > div:last-child { padding: var(--s-5); border: 1px solid var(--edge); border-radius: var(--r-lg); background: var(--srf-3); }
.showcase-hero h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; }
.showcase-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-4); margin: var(--s-5) 0; font-size: 1rem; }
.showcase-facts dt { color: var(--ink-3); font: 400 .82rem/1.9 Mono, monospace; letter-spacing: .06em; text-transform: uppercase; }
.showcase-facts dd { margin: 0; color: var(--ink-2); }
.scope-note { color: var(--ink-3); font: 400 .82rem/1.6 Mono, monospace; letter-spacing: .03em; margin-top: var(--s-3); }
/* Above 900px the site's motion control is fixed bottom-right (v3-system.css .motion-dock):
   the opening ends above its band and stays clear of its column. */
@media (min-width: 901px) { .showcase-hero { padding-bottom: 6rem; } .showcase-hero .shell { padding-right: calc(var(--gut) + 9rem); } }

/* Signature interaction: main sequence, then a separate fallback strip */
.storyboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-5) 0 0; padding: 0; list-style: none; counter-reset: frame; }
.storyboard li { display: grid; gap: var(--s-2); align-content: start; counter-increment: frame; }
.storyboard li > p { color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.storyboard li > p::before { content: counter(frame, decimal-leading-zero) ' / '; color: var(--flow); font: 400 .82rem Mono, monospace; }
.storyboard--fallback { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 48rem; }
.storyboard--fallback li > p::before { content: none; }
.fallback-title { margin-top: var(--s-6); font-size: 1rem; color: var(--ink); }
@media (max-width: 760px) { .storyboard { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .storyboard, .storyboard--fallback { grid-template-columns: minmax(0, 1fr); } }

/* Annotated design details */
.details { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); margin-top: var(--s-5); }
.detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 900px) { .detail { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; } .detail:nth-child(even) img { order: 2; } }
.detail h3 { font-size: 1.15rem; color: var(--ink); }
.detail p { color: var(--ink-2); font-size: 1rem; }
.detail .why { margin-top: var(--s-2); padding-left: var(--s-3); border-left: 2px solid var(--flow); }

/* Desktop / mobile comparison */
.compare { display: grid; gap: var(--s-5); margin-top: var(--s-5); align-items: end; }
@media (min-width: 900px) { .compare { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } }
.compare figcaption { color: var(--ink-3); font: 400 .82rem/1.5 Mono, monospace; margin-top: var(--s-2); }

/* Engineering: implementation and trade-offs */
.eng-list { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
@media (min-width: 900px) { .eng-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eng h3 { font-size: 1.05rem; color: var(--ink); margin-bottom: var(--s-2); }
.eng p { color: var(--ink-2); font-size: 1rem; }
.eng .tradeoff { margin-top: var(--s-2); padding-left: var(--s-3); border-left: 2px solid var(--flow); }

/* Verification, limits and credits */
.vc-grid { display: grid; gap: var(--s-5); margin-top: var(--s-4); }
@media (min-width: 900px) { .vc-grid { grid-template-columns: 1fr 1fr; } }
.vc-grid h3 { font-size: 1rem; color: var(--ink); margin-bottom: var(--s-2); }
.vc-grid ul { padding-left: 1.1em; display: grid; gap: var(--s-1); color: var(--ink-2); font-size: 1rem; }

/* Section nav up to 900px: the template's horizontal strip clips links that are partly in view, and
   Chrome does not scroll a partly visible focused link into view, so keyboard focus can sit half hidden.
   On these pages it becomes a static grid: every link visible, no swipe needed, focus ring unclipped. */
@media (max-width: 900px) {
  .case-nav { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); overflow: visible; }
  .case-nav a { white-space: normal; }
}
/* Phones: the site-wide eyebrow (.68rem) and section-nav links (.7rem) are raised on these pages. */
@media (max-width: 760px) { .showcase-hero .eyebrow, .case-section .eyebrow, .case-nav a { font-size: .8rem; } }

/* How this site works (inside "How it was built"): three delivery stages, each technology a native
   <details>/<summary> disclosure, so keyboard, touch and no-JavaScript use all work without script.
   Several explanations can stay open for comparison. The arrows mark delivery stages only (decorative,
   drawn with borders, no text). The only motion is a single 180ms reveal when a visitor opens a step. */
.how { margin-top: var(--s-5); padding: var(--s-5); border: 1px solid var(--edge); border-radius: var(--r-lg); background: var(--srf-3); }
.how h3 { font-size: 1.15rem; color: var(--ink); }
.how-intro, .how-note { max-width: 46rem; margin-top: var(--s-2); font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.how-note { color: var(--ink-3); }
.how-stages { display: grid; gap: var(--s-6); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.how-stage { position: relative; display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.how-stage h4 { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-1); color: var(--ink-3); font: 400 .9rem/1.4 Mono, monospace; letter-spacing: .05em; text-transform: uppercase; }
.how-num { display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; border: 1px solid var(--flow); border-radius: var(--r-pill); color: var(--flow); }
.how-stage + .how-stage::before { content: ""; position: absolute; width: .7rem; height: .7rem; border-top: 2px solid var(--flow); border-right: 2px solid var(--flow); }
.how-step { border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--srf-solid); }
.how-step[open] { border-color: var(--flow); }
.how-step--build { border-style: dashed; }
.how-step > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); min-height: 44px; padding: var(--s-2) var(--s-3); color: var(--ink); font-size: 1rem; cursor: pointer; list-style: none; }
.how-step > summary::-webkit-details-marker { display: none; }
.how-step > summary::after { content: ""; flex: none; width: .45rem; height: .45rem; margin-left: auto; border-right: 2px solid var(--flow); border-bottom: 2px solid var(--flow); transform: translateY(-2px) rotate(45deg); }
.how-step[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.how-tag { padding: .1rem .45rem; border: 1px dashed var(--ink-3); border-radius: var(--r-pill); color: var(--ink-3); font: 400 .75rem/1.3 Mono, monospace; letter-spacing: .04em; text-transform: uppercase; }
.how-step > p { padding: 0 var(--s-3) var(--s-3); color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
@keyframes how-reveal { from { opacity: 0; transform: translateY(4px); } }
.how-step[open] > p { animation: how-reveal 180ms var(--ease) 1; }
/* Above 760px: stages side by side, arrow pointing right in the gap. At 760px and below: stacked, arrow pointing down.
   Each arrow belongs to the following stage and sits before it (negative left/top), so it adds no scrollable width. */
@media (min-width: 761px) {
  .how-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7); }
  .how-stage + .how-stage::before { top: .45rem; left: calc(var(--s-7) * -1 + .9rem); transform: rotate(45deg); }
}
@media (max-width: 760px) {
  .how { padding: var(--s-4); }
  .how-stage + .how-stage::before { left: .45rem; top: calc(var(--s-6) * -1 + .85rem); transform: rotate(135deg); }
}
@media (prefers-reduced-motion: reduce) { .how-step[open] > p { animation: none; } }
@media (forced-colors: active) {
  .how-step, .how-num, .how-tag { border-color: CanvasText; }
  .how-step[open] { border-color: Highlight; }
  .how-stage + .how-stage::before, .how-step > summary::after { border-color: CanvasText; }
}