/* Work (/web-design, 2026-11-04). Fable's direction: the proof wall. Every site is a printed proof on heavy stock with
   black crop marks at its corners, a typed label strip with its address, and a stamp with its status. Pointing at a proof
   (or tabbing into it) lifts it and slides the phone print out from under its lower right corner, in held frames.
   The intake form reuses the Contact page's sheet (contact.css is not loaded here, so its few rules are repeated). */

button.ticket { border: 0; padding: 0; background: none; cursor: pointer; }
.wk-wall { overflow-x: clip; }

/* ---------- head ---------- */
.wk-head__grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 110px); align-items: center; }
.wk-start-link { margin-top: 14px; }
/* three phone prints fanned in the head, like proofs laid out to choose from */
.wk-head__fan { position: relative; justify-self: center; width: min(100%, 560px); height: clamp(280px, 44svh, 400px); }
.wk-head__print { position: absolute; top: 0; left: 50%; width: clamp(130px, 10vw, 190px); margin: 0 0 0 calc(clamp(130px, 10vw, 190px) / -2); padding: 8px 8px 22px; background: #FBF8F2;
  box-shadow: 0 2px 3px rgb(13 22 25 / .25), 10px 18px 28px -12px rgb(13 22 25 / .5); transform: translateX(calc((var(--i) - 1) * 118%)) rotate(calc((var(--i) - 1) * 7deg)) translateY(calc(var(--i) * 6px)); transform-origin: 50% 120%; }
.wk-head__print img { width: 100%; height: auto; }

/* ---------- the crop marks: two black hairlines at each corner, just outside the print ---------- */
.crop { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.crop::before, .crop::after { content: ""; position: absolute; background: #14191B; }
.crop::before { width: 16px; height: 1px; }
.crop::after { width: 1px; height: 16px; }
.crop--tl { left: -26px; top: -26px; } .crop--tl::before { right: 0; bottom: 0; } .crop--tl::after { right: 0; bottom: 0; }
.crop--tr { right: -26px; top: -26px; } .crop--tr::before { left: 0; bottom: 0; } .crop--tr::after { left: 0; bottom: 0; }
.crop--bl { left: -26px; bottom: -26px; } .crop--bl::before { right: 0; top: 0; } .crop--bl::after { right: 0; top: 0; }
.crop--br { right: -26px; bottom: -26px; } .crop--br::before { left: 0; top: 0; } .crop--br::after { left: 0; top: 0; }

/* ---------- a proof ---------- */
.proof { display: grid; gap: clamp(18px, 2.6svh, 28px); align-content: start; }
.proof__print { position: relative; z-index: 1; padding: clamp(10px, 1vw, 18px) clamp(10px, 1vw, 18px) 0; background: var(--ivory) var(--sheet-a); background-size: 700px;
  box-shadow: var(--edge), 0 2px 3px rgb(21 31 34 / .16), 10px 20px 32px -16px rgb(13 22 25 / .45); transform: rotate(var(--tilt, -.6deg)); transition: transform .4s steps(4, end), box-shadow .4s steps(4, end); }
.proof__shot { position: relative; z-index: 2; aspect-ratio: 16 / 10; overflow: hidden; background: #ddd; }
.proof__shot img { width: 100%; height: 100%; object-fit: cover; }
.proof__strip { position: relative; z-index: 2; display: flex; justify-content: space-between; padding: 10px 2px 12px; font: 500 .8rem/1 var(--sans); letter-spacing: .06em; color: var(--ink-2); }
.proof__phone { position: absolute; z-index: 0; right: 6%; bottom: 8%; width: clamp(70px, 18%, 150px); margin: 0; padding: 6px; background: #FBF8F2; box-shadow: 0 2px 4px rgb(13 22 25 / .3), 6px 12px 18px -8px rgb(13 22 25 / .45);
  transform: translate(0, 0) rotate(0deg); transition: transform .5s steps(6, end); }
.proof__phone img { width: 100%; height: auto; }
.proof__stamp { position: absolute; z-index: 3; right: clamp(14px, 2vw, 30px); top: clamp(-14px, -1vw, -10px); background: rgb(248 245 239 / .92); }
.proof:hover .proof__print, .proof:focus-within .proof__print { transform: translateY(-8px) rotate(var(--tilt, -.6deg)); box-shadow: var(--edge), 0 3px 4px rgb(21 31 34 / .18), 14px 30px 44px -18px rgb(13 22 25 / .5); }
.proof:hover .proof__phone, .proof:focus-within .proof__phone { transform: translate(62%, 34%) rotate(7deg); }
.proof__meta .label { border: 0; padding: 0; }
.proof__name { font-size: clamp(1.7rem, 1.1rem + 1.2vw, 2.7rem); line-height: 1.02; color: #14191B; }
.proof--lead .proof__name { font-size: clamp(2.4rem, 1.4rem + 2.4vw, 4.4rem); }
.proof__trade { margin-top: 6px; font: 600 .74rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-red); }
.proof__sum { margin-top: 12px; font-size: clamp(1.02rem, .96rem + .2vw, 1.18rem); line-height: 1.5; color: var(--ink-2); max-width: 40rem; }
.proof__credit { margin-top: 8px; font: italic .9rem var(--serif); color: var(--ink-2); }
.proof__act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: 8px; }
.proof__about { flex-basis: 100%; }
.proof__about summary { display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; font: 500 .95rem var(--sans); color: var(--ink-2); }
.proof__about summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.proof__about p { margin-top: 6px; font-size: .98rem; line-height: 1.55; color: var(--ink-2); max-width: 44rem; }
.proof__cap { font-style: italic; font-size: .88rem; }

/* the live sites: the client's site big, its words beside it; the second live site mirrored, smaller */
.wk-live { position: relative; display: grid; gap: clamp(56px, 9svh, 110px); }
.proof--lead { grid-template-columns: 8fr 4fr; gap: clamp(28px, 4vw, 80px); align-items: center; }
.wk-live > .proof:not(.proof--lead) { grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 80px); align-items: center; }
.wk-live > .proof:not(.proof--lead) .proof__print { order: 2; --tilt: .8deg; }
.wk-note { left: calc(66% + 30px); top: 30px; }

/* the concepts: pairs of proofs, the wider one alternating sides */
.wk-concepts__head { margin-bottom: clamp(36px, 6svh, 64px); }
.wk-pair { display: grid; gap: clamp(28px, 4vw, 80px); align-items: start; margin-bottom: clamp(56px, 9svh, 100px); }
.wk-pair--a { grid-template-columns: 7fr 5fr; }
.wk-pair--b { grid-template-columns: 5fr 7fr; }
.wk-pair .proof:nth-child(2) .proof__print { --tilt: .9deg; }
.wk-pair .proof:not(.proof--wide) { margin-top: clamp(30px, 6svh, 80px); }

/* ---------- case study row ---------- */
.wk-case__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 110px); align-items: end; }
.wk-case__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.wk-case__meta .label { border: 0; padding: 0; }
.wk-case__side { display: grid; gap: 10px; justify-items: start; font-size: 1.08rem; line-height: 1.55; color: var(--ink-2); }

/* ---------- start your website (the form sheet is the Contact page's) ---------- */
.wk-start__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 90px); align-items: start; }
.wk-next { margin-top: clamp(24px, 4svh, 40px); }
.wk-next .label { margin-bottom: 14px; }
.wk-next ol { display: grid; gap: 12px; counter-reset: n; }
.wk-next li { counter-increment: n; position: relative; padding-left: 40px; font-size: 1.02rem; line-height: 1.5; color: var(--deep-2); }
.wk-next li::before { content: "0" counter(n); position: absolute; left: 0; font: 600 .95rem var(--sans); color: var(--sage); }
.wk-next b { color: var(--ivory); font-weight: 600; }
.ct-sheet { padding: clamp(26px, 3vw, 54px); display: grid; gap: clamp(14px, 2.2svh, 20px); }
.wk-form fieldset { border: 0; margin: 0; padding: 0; }
.wk-form legend { padding: 0 0 12px; font: 600 .74rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-red); }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 28px); }
.ct-field { display: grid; gap: 6px; align-content: start; }
.ct-field label { font: 600 .8rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.ct-field input { width: 100%; min-height: 50px; padding: 10px 16px; border: 0; border-radius: 26px; font: 400 1.02rem var(--serif); color: var(--ink);
  background: #F7F3EC; box-shadow: inset 1px 1px 3px rgb(80 50 40 / .22), inset -1px -1px 0 rgb(258 255 252 / .6); }
.ct-field input::placeholder { color: #837B77; }
.ct-field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ct-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--ink-red), inset 1px 1px 3px rgb(80 50 40 / .22); }
.ct-hint { font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.ct-submit { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-top: 8px; }

/* ---------- close ---------- */
.wk-cta__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 110px); align-items: end; }
.wk-cta__title { font-size: clamp(2.3rem, 1.2rem + 2.6vw, min(4.6rem, 9svh)); line-height: 1; color: #14191B; max-width: 20ch; }
.wk-cta__side { display: grid; gap: 22px; justify-items: start; font-size: 1.08rem; line-height: 1.55; color: var(--ink-2); }

@media (max-width: 1100px) {
  .wk-head__grid, .proof--lead, .wk-live > .proof:not(.proof--lead), .wk-pair--a, .wk-pair--b, .wk-case__grid, .wk-start__grid, .wk-cta__grid { grid-template-columns: 1fr; }
  .wk-live > .proof:not(.proof--lead) .proof__print { order: 0; }
  .wk-pair .proof:not(.proof--wide) { margin-top: 0; }
  .wk-head__fan { justify-self: start; }
  .wk-note { display: none; }
}
@media (max-width: 760px) {
  .ct-row { grid-template-columns: 1fr; }
  .crop { display: none; }
  .wk-head__fan { width: 100%; height: 260px; }
  .wk-head__print { width: 110px; margin-left: -55px; }
}
/* a touch screen has no pointing: the phone print sits half out from the start */
@media (hover: none) { .proof__phone { transform: translate(40%, 22%) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .proof__print, .proof__phone { transition: none; } }
@media (max-width: 760px) { .wk-head__print { transform: translateX(calc((var(--i) - 1) * 72%)) rotate(calc((var(--i) - 1) * 6deg)) translateY(calc(var(--i) * 6px)); } }