/* round 10: websites, CH 45 (owned by the website pass; overrides site.css).
   Four real sites as films, dealt onto a pink room between the service deck and How it works.
   The room slides over the deck as a sheet, and How slides over the room the same way. */
.web { --web-top: #ff9ccd; --web-floor: #f566aa; --web-shade: rgba(120, 10, 64, .5);
  position: relative; z-index: 2; margin-top: -36px; padding: 8.4vw var(--gutter) 9vw; border-radius: 36px 36px 0 0;
  background: radial-gradient(ellipse 58% 44% at 66% 60%, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, var(--web-top) 0%, var(--s-pink) 42%, var(--web-floor) 100%);
  box-shadow: 0 -30px 60px -40px var(--web-shade); }
.web + .how { margin-top: -36px; border-radius: 36px 36px 0 0; z-index: 3; box-shadow: 0 -30px 60px -40px var(--web-shade); }
.web .sec-head { margin-bottom: 2.4vw; }
.web__nb { display: inline-block; white-space: nowrap; } /* "stop for." never leaves "for." alone on a line */

/* a film: the site running in a browser frame, a label taped under it */
.web__films { margin: 0; padding: 0; list-style: none; }
.web__film { position: relative; transform: rotate(var(--r)); }
.web__link { display: grid; justify-items: start; color: var(--ink); }
.web__shot { position: relative; display: block; width: 100%; padding-top: 24px; background: #141311; border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 3px #fff, 0 46px 60px -34px var(--web-shade); transition: transform var(--mid), box-shadow var(--mid); }
.web__shot::before { content: ""; position: absolute; left: 12px; top: 9px; width: 34px; height: 6px; background: radial-gradient(circle at 3px 3px, #ff8a7a 2.6px, transparent 3px) 0 0 / 12px 6px repeat-x; }
.web__bar { position: absolute; left: 50%; top: 5px; max-width: calc(100% - 120px); overflow: hidden; text-overflow: ellipsis; transform: translateX(-50%); padding: 0 10px; border-radius: 4px; background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .66); font-size: 10px; line-height: 15px; letter-spacing: .03em; white-space: nowrap; }
.web__shot video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; background: #141311; }
.web__cap { position: relative; z-index: 1; display: grid; gap: 3px; margin: -14px 0 0 16px; padding: 9px 13px 8px; background: #fff; border-radius: 7px; transform: rotate(calc(var(--r) * -.6)); box-shadow: 0 12px 22px -12px rgba(60, 0, 30, .55); transition: transform var(--mid); }
.web__name { font-size: clamp(15px, 1.15vw, 19px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.web__for { display: flex; align-items: center; color: var(--ink-2); font-size: 11px; line-height: 1.3; white-space: nowrap; }
.web__for .dot { width: 6px; height: 6px; margin-right: 6px; }
.web__tag { position: absolute; left: 11%; top: -19px; z-index: 2; font-size: 17px; }
@media (hover: hover) and (pointer: fine) {
  .web__film:hover { z-index: 9; }
  .web__link:hover .web__shot { transform: rotate(calc(var(--r) * -1)) translateY(-8px) scale(1.025); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink), 0 64px 70px -34px var(--web-shade); }
  .web__link:hover .web__cap { transform: rotate(calc(var(--r) * -1)) translateY(-4px); }
}
.web__link:focus-visible { outline: none; }
.web__link:focus-visible .web__shot { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--signal), 0 46px 60px -34px var(--web-shade); }

/* the pitch: one line, one button that opens the brief on "a website" */
.web__pitch { position: relative; z-index: 5; display: grid; gap: 22px; justify-items: start; }
.web__line { font-size: clamp(17px, 1.45vw, 23px); line-height: 1.36; letter-spacing: -.015em; max-width: 31ch; }
.web__cta { position: relative; }
.web__btn { padding: 16px 24px 15px; font-size: 16px; border-radius: 10px; transform: rotate(-1.5deg); box-shadow: 0 6px 0 #000; transition: transform var(--fast), box-shadow var(--fast); }
.web__btn:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 8px 0 #000; }
.web__btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #000; }
.web__price { position: absolute; right: -44px; top: -22px; font-size: 16px; } /* slapped on the button's corner */

/* desktop: one composed pile. Every size runs off the width, so the pile keeps its shape from 901px up.
   The title always breaks after "people" (it measures 7.32em), so Terminal 42 can rise beside "stop for." */
@media (min-width: 901px) {
  .web .sec-title { max-width: 7.6em; }
  .web__films { position: relative; aspect-ratio: 100 / 54; }
  .web__film { position: absolute; left: var(--x); top: var(--y); width: var(--w); }
  .web__film--ring { --x: 0%; --y: 2%; --w: 47%; z-index: 2; }
  .web__film--t42 { --x: 46.5%; --y: -11%; --w: 40%; z-index: 3; }
  .web__film--greek { --x: 63.5%; --y: 42%; --w: 36.5%; z-index: 2; }
  .web__film--obvious { --x: 37%; --y: 57%; --w: 28.5%; z-index: 4; }
  .web__film--greek .web__cap { margin-left: 44px; } /* clear of Obvious Name, even when it lifts */
  /* the pitch tucks under the ring's label: the ring ends 56.4% down the pile plus its bar, the label and a gap (100px) */
  .web__pitch { width: 34%; margin-top: calc(111px - 23.5vw); }
}

/* phone: a pile down the page, each film lands on the one before it; labels ride on top of their film */
@media (max-width: 900px) {
  .web { margin-top: -24px; border-radius: 24px 24px 0 0; padding: 20vw var(--gutter) 22vw; }
  .web + .how { margin-top: -24px; border-radius: 24px 24px 0 0; }
  .web .sec-head { margin-bottom: 7vw; }
  .web__films { display: grid; }
  .web__film { width: 88%; }
  .web__film:nth-child(even) { justify-self: end; }
  .web__film + .web__film { margin-top: -68px; } /* the next frame lands on this one, its label rides on this frame */
  .web__film--ring { width: 96%; }
  .web__link { justify-items: stretch; }
  .web__cap { order: -1; justify-self: start; margin: 0 0 6px 12px; }
  .web__film:nth-child(even) .web__cap { justify-self: end; margin: 0 12px 6px 0; }
  .web__shot { border-radius: 10px; padding-top: 20px; }
  .web__shot::before { left: 9px; top: 7px; }
  .web__bar { top: 3px; font-size: 9px; line-height: 14px; max-width: calc(100% - 90px); }
  .web__tag { left: auto; right: -8px; top: 38px; font-size: 14px; }
  .web__pitch { margin-top: 12vw; justify-items: stretch; gap: 34px; }
  .web__line { font-size: 19px; }
  .web__btn { width: 100%; justify-content: center; min-height: 56px; }
  .web__price { right: 14px; font-size: 15px; }
}
/* tablets: narrower films, so the pile still zigzags instead of stacking full width */
@media (min-width: 600px) and (max-width: 900px) {
  .web__film { width: 76%; }
  .web__film--ring { width: 86%; }
  .web__pitch { max-width: 76%; }
}