/* The case page's own rules from prototype/case.html, without the stale ones (see the plan, task 4). */
/* case page */
.chero { padding-top:170px !important; padding-bottom:40px !important; }
.chero h1 { font-size:clamp(46px,6.4vw,92px); line-height:.98; }
.clead { font-size:21px; font-weight:300; max-width:760px; margin-top:22px; }
.meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.meta span { padding:7px 12px; border-radius:999px; border:1px solid rgb(var(--edge) / .16); font-size:13px; }
.cbtns { margin-top:30px; }
.vid { padding-top:40px !important; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px; }
.stats > div { padding:20px; }
.stats b { display:block; font-family:var(--display); font-weight:400; font-size:34px; color:var(--blue); }
.stats span { font-size:14px; opacity:.8; }
.story { padding-top:90px !important; padding-bottom:90px !important; display:grid; gap:70px; }
.block { display:grid; grid-template-columns:240px 1fr; gap:40px; }
.side-t { position:sticky; top:110px; align-self:start; font-size:13px; margin:6px 0 0; }
.txt { max-width:760px; display:grid; gap:18px; font-size:18px; }
.big-p { font-family:var(--display); font-size:30px; line-height:1.15; opacity:1; }
.stack { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.stack span { padding:6px 12px; border-radius:8px; border:1px solid rgb(var(--edge) / .14); font-family:'JetBrains Mono'; font-size:12px; }
.prefilled { opacity:1 !important; border-color:rgba(143,156,255,.5) !important; background:rgba(143,156,255,.08) !important; }
.nextp { padding-top:30px !important; }
.nextcard { max-width:560px; margin-left:auto; display:flex; }
.lightbox { position:fixed; inset:0; z-index:70; display:grid; place-items:center; background:rgb(var(--bgc) / .7); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); opacity:0; visibility:hidden; transition: opacity .35s, visibility 0s .35s; }
.lightbox.on { opacity:1; visibility:visible; transition: opacity .35s; }
.lightbox img { max-width:92vw; max-height:88vh; border-radius:14px; box-shadow:0 30px 90px rgb(var(--shade) / calc(.7 * var(--sk))); }
.lbclose { position:absolute; top:22px; right:22px; cursor:pointer; background:rgb(var(--raise) / calc(.06 * var(--rk))); }
@media (max-width:900px) {
  .stats { grid-template-columns:1fr 1fr; }
  .block { grid-template-columns:1fr; gap:10px; }
  .side-t { position:static; }
}

/* case gallery: one stage for the video and the screens, a timer bar, rounded thumbnails */
.mg { display:grid; gap:12px; }
.mg .stage { position:relative; aspect-ratio:16/10; border-radius:22px; overflow:hidden; clip-path:inset(0 round 22px); outline:none;
  border:1px solid rgb(var(--edge) / .16); background:var(--surface); box-shadow:0 40px 90px rgb(var(--shade) / calc(.6 * var(--sk))), 0 0 80px rgba(92,108,255,.15); }
.mg .stage:focus-visible { box-shadow:0 0 0 2px var(--blue), 0 40px 90px rgb(var(--shade) / calc(.6 * var(--sk))); }
.mg .slides, .mg .slide { position:absolute; inset:0; }
.mg .slide { opacity:0; transform:scale(1.03); transition: opacity .7s ease, transform 1.4s var(--out), visibility 0s .7s; visibility:hidden; }
.mg .slide.on { opacity:1; transform:none; visibility:visible; transition: opacity .7s ease, transform 1.4s var(--out); }
.mg .slide img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; cursor:zoom-in; }
.mg .slide video { width:100%; height:100%; object-fit:contain; display:block; background:#05070f; cursor:pointer; }
.mg .slide.paused::after, .mg .slide.blocked::after { content:''; position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px; border-radius:50%; pointer-events:none;
  background:rgb(5 7 15 / .55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6.5v11l9-5.5z' fill='%23fff'/></svg>") center/34px no-repeat;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.mg .nav { position:absolute; top:50%; z-index:2; width:48px; height:48px; margin-top:-24px; border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0;
  color:#fff; background:rgb(5 7 15 / .45); border:1px solid rgb(255 255 255 / .22); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition: opacity .35s, background .3s, transform .3s; }
.mg .nav svg { width:22px; height:22px; }
.mg .prev { left:16px; }
.mg .next { right:16px; }
.mg .next svg { transform:scaleX(-1); }
.mg .stage:hover .nav, .mg .nav:focus-visible { opacity:1; }
.mg .nav:hover { background:rgb(5 7 15 / .7); transform:scale(1.06); }
.mg .count { position:absolute; right:14px; top:14px; z-index:2; padding:5px 10px; border-radius:999px; color:#fff; opacity:.9; background:rgb(5 7 15 / .45);
  border:1px solid rgb(255 255 255 / .18); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.mg .timer { height:3px; border-radius:3px; overflow:hidden; background:rgb(var(--edge) / .12); }
.mg .timer i { display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg, var(--blue), var(--teal)); box-shadow:0 0 12px rgba(143,156,255,.6); }
.mg .thumbs { position:relative; display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:4px 3px 10px; }
.mg .thumbs::-webkit-scrollbar { display:none; }
.mg .th { position:relative; flex:none; width:136px; aspect-ratio:16/10; padding:0; border-radius:14px; overflow:hidden; cursor:pointer; background:var(--surface);
  border:1px solid rgb(var(--edge) / .16); opacity:.5; transition: opacity .35s, transform .35s var(--out), box-shadow .35s, border-color .35s; }
.mg .th img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.mg .th:hover { opacity:.85; }
.mg .th.on { opacity:1; transform:translateY(-3px); border-color:var(--blue); box-shadow:0 0 0 2px rgba(143,156,255,.4), 0 10px 26px rgba(92,108,255,.28); }
.mg .th .pl { position:absolute; inset:0; display:grid; place-items:center; color:#fff; background:linear-gradient(transparent, rgb(5 7 15 / .35)); }
.mg .th .pl svg { width:30px; height:30px; padding:7px; border-radius:50%; background:rgb(5 7 15 / .55); border:1px solid rgb(255 255 255 / .3); }
@media (max-width:900px) {
  .mg { width:min(100%, 460px); margin:0 auto; }
  /* a phone gets the whole width, the screens show from the top */
  .mg .stage { aspect-ratio:9/16; border-radius:20px; clip-path:inset(0 round 20px); }
  .mg .th { width:56px; aspect-ratio:9/16; border-radius:11px; }
  .mg .th .pl svg { width:24px; height:24px; padding:5px; }
  .mg .nav { display:none; }
}

@media (max-width:640px) {
  .stats b { font-size:26px; white-space:nowrap; }
}

/* Changes for the site (not in the prototype). */
/* a finger's sideways move belongs to the gallery's swipe, an up-and-down one still scrolls the page; with the default (auto) the
   browser takes every move for itself and cancels the pointer, so a real swipe never reached gallery.js */
.mg .stage { touch-action:pan-y pinch-zoom; }
/* the code link under a story is a line of 18 px text, 23 px tall: 9 px of padding above and below make its tap area 41 px.
   Padding on an inline link does not change the line, so the text stays where it was */
.story .txt a { padding-block:9px; }
/* The code link of the Result part ("Code: github.com/.../dm-converter") is one box: on a narrow screen it no longer breaks at its hyphen into
   two boxes, whose joint middle a finger could take for the text between them (on a 360 px Android screen the first line had about 34 px of
   area). As a box, the 9 px of padding above and below (the rule above) would make its line 18 px taller; the negative margin takes that back,
   so the lines around it keep their place. */
.block .txt a { display:inline-block; margin-block:-9px; }