/* ContextWire's own page. Loaded after style.css and uses its tokens, buttons, flyer and demo.
   The page is about a real app, so the screenshots do the talking: they are pinned to the
   paper like prints, and the collage tricks are kept for the edges. */

.cwp { background: var(--paper) var(--grain); }
.cwp main { overflow-x: clip; }

/* ------------------------------------------------------------------ nav on the dark hero */
.nav--dark { color: var(--paper-hi); }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative; isolation: isolate; background: var(--ink); color: var(--paper-hi);
  display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center;
  padding: clamp(6.5rem, 12vw, 9rem) 0 clamp(5rem, 9vw, 7.5rem) max(1.25rem, calc((100vw - 70rem) / 2));
}
.hero::after { content: ""; position: absolute; z-index: 2; left: -2%; right: -2%; bottom: -1.1rem; height: 2.2rem; background: var(--paper) var(--grain); filter: url(#tear); }
.hero code { background: rgb(247 241 228 / .14); }
.hero__copy { position: relative; z-index: 1; min-width: 0; }
.hero__name { display: flex; align-items: center; gap: .22em; margin-top: 1.1rem; font: 400 clamp(2.9rem, 5.6vw, 5rem)/.95 var(--display); letter-spacing: -.008em; }
.hero__name img { width: .78em; height: .78em; flex: none; border-radius: .16em; }
.hero__pitch { margin-top: 1rem; font: 400 clamp(1.4rem, 2.6vw, 2.1rem)/1.15 var(--hand); text-transform: uppercase; letter-spacing: .05em; color: var(--pink); }
.hero__body { margin-top: 1.3rem; font-size: clamp(1.1rem, 1.45vw, 1.25rem); max-width: 46ch; }
.hero__go { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin-top: .6rem; }
.hero__go .btn { box-shadow: .3rem .3rem 0 var(--paper-hi); font-size: 1.15rem; }
.hero__go .btn:hover { box-shadow: .45rem .45rem 0 var(--paper-hi); }
.hero__go .btn:active { box-shadow: .05rem .05rem 0 var(--paper-hi); }
.hero__more { margin-top: 1.4rem; font: 400 1.1rem/1.2 var(--hand); text-transform: uppercase; letter-spacing: .07em; text-decoration: none; border-bottom: 3px solid var(--yellow); padding-bottom: .1rem; }
.hero__more:hover { color: var(--yellow); }
.hero__fine { margin-top: 1.5rem; font-size: .95rem; color: rgb(247 241 228 / .65); }

/* ------------------------------------------------------------------ a screenshot, pinned up */
.shot { position: relative; margin: 0; min-width: 0; }
.shot__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: .5rem; }
.shot img { width: 100%; border-radius: .5rem; box-shadow: .6rem .7rem 0 var(--ink); outline: 1px solid rgb(7 7 5 / .5); }
.shot::before { content: ""; position: absolute; z-index: 1; left: -2.4rem; top: -.6rem; width: 6.5rem; height: 1.8rem; background: rgb(247 211 28 / .9); filter: url(#tear-sm); rotate: -38deg; pointer-events: none; }
.shot figcaption { margin-top: 1.3rem; font: 400 1.05rem/1.25 var(--hand); text-transform: uppercase; letter-spacing: .06em; }
.shot--l { rotate: -.7deg; }
.shot--r { rotate: .8deg; }
.shot--hero { rotate: -1deg; margin-right: -9vw; }
.shot--hero img { box-shadow: -.7rem .8rem 0 var(--pink); outline-color: #232c36; }
.chap--ink .shot img { box-shadow: .6rem .7rem 0 var(--pink); }

/* ------------------------------------------------------------------ the pile of terminals */
.pile-sec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; padding-block: clamp(5rem, 10vw, 8rem) clamp(4rem, 8vw, 6.5rem); }
.pile-sec__copy p { margin-top: 1.2rem; max-width: 44ch; }
.pile-sec__copy .lede { max-width: 30ch; }
.pile-sec__says { margin-top: 1.4rem; min-height: 2.6em; font-size: 1.2rem; }
.pile-sec__says:empty::after { display: none; }
.pile { position: relative; height: 25rem; }
.tw {
  position: absolute; left: var(--x); top: var(--y); width: 15.5rem; rotate: var(--r); z-index: var(--z, 1);
  background: #0f1318; color: #e6edf3; border-radius: .4rem; overflow: hidden; box-shadow: .3rem .4rem 0 rgb(7 7 5 / .28);
  font: .78rem/1.5 "Cascadia Code", Consolas, monospace;
  transition: left .55s cubic-bezier(.3, 1.2, .4, 1), top .55s cubic-bezier(.3, 1.2, .4, 1), rotate .55s, opacity .3s, scale .3s;
}
.tw b, .tw i { display: inline-block; padding: .35rem 0 .35rem .7rem; font: 600 .74rem "Segoe UI", system-ui, sans-serif; color: #8b98a5; }
.tw i { font-weight: 400; font-style: normal; opacity: .7; padding-left: .5rem; }
.tw p { margin: 0; padding: .55rem .7rem 1.5rem; border-top: 1px solid #232c36; }
.tw:nth-child(1) { --x: 2%; --y: 1rem; --r: -5deg; --z: 2; }
.tw:nth-child(2) { --x: 34%; --y: 0rem; --r: 4deg; --z: 3; }
.tw:nth-child(3) { --x: 12%; --y: 6rem; --r: 2deg; --z: 5; }
.tw:nth-child(4) { --x: 30%; --y: 7.5rem; --r: -3deg; --z: 1; }
.tw:nth-child(5) { --x: 44%; --y: 5rem; --r: 6deg; --z: 6; }
.tw:nth-child(6) { --x: 4%; --y: 12.5rem; --r: -2deg; --z: 7; }
.tw:nth-child(7) { --x: 38%; --y: 13rem; --r: 3deg; --z: 8; }
.pile.is-fanned .tw { opacity: .38; }
.pile.is-fanned .tw:nth-child(1) { --x: 0%; --y: 0rem; --r: -2deg; }
.pile.is-fanned .tw:nth-child(2) { --x: 50%; --y: .5rem; --r: 2deg; }
.pile.is-fanned .tw:nth-child(3) { --x: 0%; --y: 17rem; --r: 1deg; }
.pile.is-fanned .tw:nth-child(5) { --x: 52%; --y: 17.5rem; --r: -2deg; }
.pile.is-fanned .tw:nth-child(6) { --x: -2%; --y: 8.5rem; --r: 3deg; }
.pile.is-fanned .tw:nth-child(7) { --x: 54%; --y: 9rem; --r: -3deg; }
.pile.is-fanned .tw--waiting { --x: 22%; --y: 7rem; --r: -1deg; --z: 20; opacity: 1; scale: 1.14; outline: 3px solid #f0766b; box-shadow: .4rem .5rem 0 #f0766b; }

/* ------------------------------------------------------------------ chapters */
.chap { padding-block: clamp(3rem, 6vw, 4.75rem); }
.chap--ink, .chap--paperhi { padding-block: clamp(4.5rem, 8vw, 6.5rem); }
.chap__title { font: 400 clamp(2.3rem, 5vw, 4.2rem)/1.03 var(--display); letter-spacing: -.004em; max-width: 17ch; text-wrap: balance; }
.chap__lede { margin-top: 1rem; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.45; max-width: 48ch; }
.chap__split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.chap__split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.chap--ink { position: relative; background: var(--ink); color: var(--paper-hi); }
.chap--ink::before, .chap--ink::after { content: ""; position: absolute; left: -2%; right: -2%; height: 2.2rem; background: var(--paper) var(--grain); filter: url(#tear); }
.chap--ink::before { top: -1.1rem; } .chap--ink::after { bottom: -1.1rem; }
.chap--ink code { background: rgb(247 241 228 / .14); }
.chap--ink .demo-wrap { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.chap--paperhi { background: var(--paper-hi); }
.chap--last { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.chap--last::after { display: none; }
.chap--last .flyer { margin-top: 0; }

.ticks { margin-top: 1.6rem; display: grid; gap: .85rem; max-width: 50ch; }
.ticks li { position: relative; padding-left: 1.5rem; }
.ticks li::before { content: ""; position: absolute; left: .1rem; top: .58em; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.ticks b { font-weight: 800; }

.cwp .does { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.does--ink li { border-top-color: var(--ink); }
.does--ink p { color: rgb(7 7 5 / .84); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* the three marks the app uses, drawn the way the app draws them */
.marks { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 2.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.marks li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: .7rem; align-items: start; color: rgb(247 241 228 / .82); }
.marks b { grid-column: 2; color: var(--paper-hi); font-weight: 800; font-size: 1.15rem; }
.mark { grid-row: 1 / span 2; justify-self: center; margin-top: .35rem; width: .95rem; height: .95rem; }
.mark--needs { background: #f0766b; border-radius: 2px; rotate: 45deg; }
.mark--working { border: 3px solid #e5b567; border-radius: 50%; }
.mark--done { position: relative; background: #5fc9a8; border-radius: 50%; }
.mark--done::after { content: ""; position: absolute; left: 30%; top: 12%; width: 30%; height: 55%; border: solid #06231b; border-width: 0 2px 2px 0; rotate: 40deg; }

/* ------------------------------------------------------------------ phones */
.phones { display: flex; justify-content: center; align-items: flex-end; gap: clamp(1rem, 4vw, 3.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.phone { margin: 0; flex: 0 1 15.5rem; min-width: 0; rotate: -2deg; }
.phone:last-child { rotate: 2.5deg; }
.phone--mid { rotate: 0deg; translate: 0 -1.6rem; flex-basis: 17rem; }
.phone img { width: 100%; border: .4rem solid #1b222b; border-radius: 1.7rem; box-shadow: .5rem .6rem 0 var(--pink); }
.phone figcaption { margin-top: 1.1rem; text-align: center; font: 400 1rem/1.25 var(--hand); text-transform: uppercase; letter-spacing: .06em; color: var(--yellow); }

/* ------------------------------------------------------------------ keys */
.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3.5rem); margin: clamp(2rem, 4vw, 3rem) 0 0; }
.keys div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .9rem 0; border-top: 3px solid var(--ink); }
.keys dt { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.keys dd { margin: 0; text-align: right; }
kbd { display: inline-block; min-width: 2.1em; padding: .22em .5em .18em; text-align: center; background: var(--paper-hi); border: 2px solid var(--ink); border-bottom-width: 5px; border-radius: .35rem; font: 700 .88rem/1.2 var(--body); }

/* ------------------------------------------------------------------ the honest bits */
.honest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.honest__card { position: relative; isolation: isolate; padding: clamp(1.75rem, 4vw, 2.75rem); rotate: -.5deg; }
.honest__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper-hi) var(--grain); filter: url(#tear-sm); }
.honest__card--pink { rotate: .7deg; }
.honest__card--pink::before { background: var(--pink); }
.honest .chap__title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.vs { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: 72ch; padding-left: 1.2rem; border-left: .5rem solid var(--yellow); font-size: 1.1rem; }
.vs b { display: block; font-weight: 800; }

.foot--plain { padding-top: 0; }

/* ------------------------------------------------------------------ the enlarged picture */
.zoom { width: min(96vw, 1440px); max-width: none; max-height: 94vh; padding: 0; border: 0; background: var(--ink); color: var(--paper-hi); border-radius: .5rem; overflow: auto; }
.zoom::backdrop { background: rgb(7 7 5 / .86); }
.zoom img { width: 100%; }
.zoom__close { position: sticky; top: .6rem; float: right; margin: .6rem .6rem -3rem 0; z-index: 2; cursor: pointer; background: var(--yellow); color: var(--ink); border: 0; padding: .4rem .9rem .3rem; font: 400 1rem/1.2 var(--hand); text-transform: uppercase; letter-spacing: .07em; }

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 60rem) {
  .hero { grid-template-columns: 1fr; padding-inline: 1.25rem; }
  .shot--hero { margin-right: 0; }
  .pile-sec, .chap__split, .chap__split--flip, .pair, .honest { grid-template-columns: 1fr; }
  .chap__split--flip .shot { order: 2; }
  .shot::before { left: -1.6rem; width: 5rem; }
}
@media (max-width: 47.5rem) {
  .shot--l, .shot--r, .shot--hero { rotate: 0deg; }
  .shot img { box-shadow: .35rem .4rem 0 var(--ink); }
  .shot--hero img { box-shadow: .35rem .4rem 0 var(--pink); }
  .chap--ink .shot img { box-shadow: .35rem .4rem 0 var(--pink); }
  .pile { height: 22rem; }
  .tw { width: 12.5rem; }
  .pile.is-fanned .tw--waiting { --x: 14%; scale: 1.08; }
  .phones { justify-content: flex-start; overflow-x: auto; padding: 2rem 1rem 1rem; margin-inline: -1.25rem; scroll-snap-type: x mandatory; }
  .phone, .phone--mid { flex: 0 0 62%; rotate: 0deg; translate: none; scroll-snap-align: center; }
  .phone:last-child { rotate: 0deg; }
  .keys, .cwp .does { grid-template-columns: 1fr; }
  .keys dd { text-align: left; }
  .honest__card, .honest__card--pink { rotate: 0deg; }
}

/* the videos: a picture of ours until play is pressed, then YouTube's player in its place */
.watch { padding-block: 0 clamp(4rem, 8vw, 6rem); }
.watch__title { font: 400 clamp(1.8rem, 3.6vw, 2.6rem)/1.05 var(--display); margin-bottom: 1.2rem; }
.watch__fine { margin-top: 1.5rem; font-size: .9rem; color: rgb(7 7 5 / .65); }
.vid { position: relative; display: block; overflow: hidden; background: var(--ink); box-shadow: .5rem .55rem 0 var(--ink); border: 3px solid var(--ink); }
.vid img, .vid iframe { display: block; width: 100%; height: 100%; border: 0; }
.vid--wide { aspect-ratio: 16 / 9; max-width: 60rem; rotate: -.4deg; }
.vid--tall { aspect-ratio: 9 / 16; width: min(17rem, 100%); flex: none; rotate: 1deg; box-shadow: .45rem .5rem 0 var(--paper-hi); border-color: var(--paper-hi); }
.vid img { object-fit: cover; transition: filter .2s; }
.vid:hover img, .vid:focus-visible img { filter: brightness(.82); }
.vid__play { position: absolute; left: 50%; top: 50%; width: 5.2rem; height: 5.2rem; translate: -50% -50%; border-radius: 50%; background: var(--pink); border: 3px solid var(--ink); box-shadow: .25rem .3rem 0 var(--ink); }
.vid__play::after { content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%; border-style: solid; border-width: .95rem 0 .95rem 1.55rem; border-color: transparent transparent transparent var(--ink); }
.vid:hover .vid__play { scale: 1.06; }
.vid.is-playing { rotate: 0deg; }
.watch-phone { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); margin-top: clamp(3rem, 6vw, 4.5rem); }
.watch-phone__says { max-width: 34ch; color: rgb(247 241 228 / .82); }
.watch-phone__says .note { display: block; margin-bottom: .4rem; color: var(--yellow); }
@media (max-width: 760px) { .watch-phone { flex-direction: column; align-items: flex-start; } .vid__play { width: 4rem; height: 4rem; } }
@media (prefers-reduced-motion: reduce) { .vid img { transition: none; } }

/* the download panel (#get): one column per system; the visitor's own system stands out */
.dl { margin-bottom: clamp(3.5rem, 7vw, 5rem); }
.dl__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.dl__os { padding: 1.3rem 1.3rem 1.5rem; border-top: 3px solid var(--paper-hi); }
.dl__os h3 { font: 800 1.35rem/1.2 var(--body); }
.dl__os--you { background: rgb(247 241 228 / .07); }
.dl__what, .dl__info, .dl__soon { margin-top: .5rem; color: rgb(247 241 228 / .82); }
.dl__soon { font-style: italic; }
.dl__os .btn { margin-top: 1rem; }
.dl__price { margin: 0 0 1.5rem; max-width: 62ch; color: rgb(247 241 228 / .82); }
.dl__price a { color: inherit; }
.dl__fine { margin-top: 1rem; font-size: .9rem; color: rgb(247 241 228 / .65); overflow-wrap: anywhere; }
.dl__fine code { font-size: .8rem; }
@media (max-width: 760px) { .dl__grid { grid-template-columns: 1fr; } }

/* the Windows warning, rehearsed: a practice copy of the blue box people are about to meet */
.scare { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.scare[hidden] { display: none; }
.scare__title { font: 800 1.35rem/1.2 var(--body); letter-spacing: -.01em; }
.scare__copy p { margin-top: .7rem; max-width: 46ch; color: rgb(247 241 228 / .82); }
.scare__copy .scare__fine { font-size: .9rem; color: rgb(247 241 228 / .65); }
.scare__act { min-width: 0; }
.smart {
  position: relative; margin-top: 1.6rem; padding: 1.4rem 1.5rem 1.2rem; background: #0063b1; color: #fff; rotate: -1deg;
  box-shadow: .45rem .5rem 0 var(--paper-hi); font: 400 .95rem/1.45 "Segoe UI", system-ui, sans-serif; text-align: left;
}
.smart p { margin: 0; }
.smart [hidden] { display: none; }
.smart .smart__title { font: 300 1.7rem/1.2 "Segoe UI Light", "Segoe UI", system-ui, sans-serif; margin-bottom: .9rem; }
.smart__more { display: inline; margin-top: .5rem; padding: 0; background: none; border: 0; color: #fff; font: inherit; text-decoration: underline; cursor: pointer; }
.smart .smart__app { margin-top: 1rem; }
.smart__btns { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; min-height: 2.1rem; flex-wrap: wrap; }
.smart__btn { min-width: 7.5rem; padding: .3rem 1rem; background: none; border: 2px solid #fff; color: #fff; font: inherit; cursor: pointer; }
.smart__btn:hover { background: rgb(255 255 255 / .16); }
.smart :focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: none; }
.smart.is-run { background: #1d2a1f; }
.smart .scare__note { position: absolute; right: -.7rem; top: -1.5rem; rotate: 5deg; font: 400 .95rem/1.12 var(--hand); color: var(--ink); background: var(--yellow); padding: .4em .65em .2em; box-shadow: .15rem .2rem 0 rgb(7 7 5 / .3); }
.scare__note::after { display: none; }
.scare__says { margin-top: 1.2rem; font: 400 1.15rem/1.25 var(--hand); text-transform: uppercase; letter-spacing: .05em; min-height: 2.5em; color: var(--yellow); }
@media (max-width: 760px) { .scare { grid-template-columns: 1fr; } .smart .scare__note { right: .2rem; } }