/* OCALLY · artifacts.css: the small things Kai made or fixed (a review reply, a poster, a store page), drawn in the
   page's own paper. Shared by the homepage's "What Kai can do", every capability page and the blog's covers. Each sits in a tinted
   panel (.kc__art or .cp-art) that sets --tint by area. Drawn small: tags use --t-tag, titles --t-h6, and the
   body text inside a drawing stays at 12.5 to 13.5px, the size of the real thing. */
/* each area of Kai's work sets its --tint in base.css ([data-area]) */
/* the tinted panel a drawing sits in: capability cards and heroes, blog covers */
.cp-art { position: relative; aspect-ratio: 4 / 3.3; display: grid; place-items: center; overflow: hidden; background: var(--tint); border: var(--rule); box-shadow: var(--lift) var(--navy); }
/* the slip is a drawing: a till receipt, in the receipt's own mono */
.cp-slip { position: relative; z-index: 2; display: inline-block; margin: 0 0 clamp(18px, 3vh, 28px); rotate: -2deg; }
.cp-slip s { display: inline-block; max-width: 22em; padding: 14px 18px 18px; background: #fff; box-shadow: 0 10px 24px rgba(23, 34, 61, .12); font: 400 15px/1.4 var(--mono); color: var(--navy); text-decoration-color: var(--orange); text-decoration-thickness: 2.5px;
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 12px 8px repeat-x; mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 12px 8px repeat-x; }
.cp-slip::before { content: ""; position: absolute; left: 50%; top: -10px; width: 64px; height: 22px; translate: -50% 0; rotate: -4deg; background: rgba(235, 173, 33, .55); }
/* the artifacts: things Kai made or fixed, drawn small in the page's own paper */
:is(.kc__art, .cp-art) :is(.a-web, .a-serp, .a-hours, .a-prod, .a-review, .a-post, .a-price, .a-check) { background: var(--paper); border: var(--rule); box-shadow: var(--lift-s) var(--navy); }
:is(.kc__art, .cp-art) :is(.a-hours, .a-price, .a-check) > p, .a-serp > p { margin: 0; padding: 9px 12px; border-bottom: 1.5px solid var(--navy); font: var(--t-tag); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--navy); }
.a-poster { position: relative; width: 50%; aspect-ratio: 3 / 4; overflow: hidden; background: var(--amber); border: var(--rule); box-shadow: var(--lift-s) var(--navy); rotate: -3deg; }
.a-poster img { position: absolute; left: 50%; bottom: -3%; height: 94%; width: auto; translate: -50% 0; }
.a-poster span { position: absolute; left: 9px; top: 9px; font: var(--t-tag); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--navy); }
.a-reel { position: relative; width: 38%; aspect-ratio: 9 / 16; overflow: hidden; background: #F3D9A6; border: var(--rule); box-shadow: var(--lift-s) var(--navy); }
.a-reel img { position: absolute; left: 50%; bottom: 0; height: 82%; width: auto; translate: -50% 0; }
.a-play { position: absolute; left: 50%; top: 42%; width: 36px; height: 36px; translate: -50% -50%; border-radius: 50%; background: rgba(255, 253, 247, .94); border: 1.5px solid var(--navy); }
.a-play::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid var(--navy); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.a-bar { position: absolute; left: 8px; right: 8px; bottom: 9px; height: 3px; background: rgba(23, 34, 61, .25); }
.a-bar i { display: block; width: 38%; height: 100%; background: var(--orange); }
.a-code { width: 80%; margin: 0; padding: 16px 18px; overflow: hidden; background: var(--navy); border: 1.5px solid var(--navy); box-shadow: var(--lift-s) var(--orange); font: 400 13px/1.65 var(--mono); color: #E6E9F2; white-space: pre; }
.a-code i { font-style: normal; color: var(--amber); } .a-code b { font-weight: 400; color: #B9D36A; }
.a-web { width: 84%; }
.a-web__bar { display: flex; align-items: center; gap: 4px; margin: 0; padding: 7px 9px; border-bottom: 1.5px solid var(--navy); }
.a-web__bar i { width: 7px; height: 7px; flex: none; border-radius: 50%; border: 1.2px solid var(--navy); }
.a-web__bar span { margin-left: 6px; overflow: hidden; font: 400 10.5px/1 var(--mono); color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.a-web__page { display: grid; gap: 6px; padding: 13px 13px 15px; }
.a-web__page b { font: var(--t-h6); letter-spacing: var(--ls-h6); }
.a-web__page span { font: 400 12.5px/1.3 var(--font); color: var(--body); }
.a-web__page em { justify-self: start; padding: 4px 6px; background: var(--navy); color: #fff; font: var(--t-tag); font-style: normal; letter-spacing: var(--ls-tag); text-transform: uppercase; }
.a-web__page i { height: 6px; width: 92%; background: rgba(23, 34, 61, .1); } .a-web__page i:last-child { width: 66%; }
.a-serp { width: 84%; }
.a-serp > p { font: 500 12.5px/1.2 var(--font); letter-spacing: 0; text-transform: none; }
.a-serp > p::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border: 1.5px solid var(--navy); border-radius: 50%; vertical-align: -1px; }
.a-serp ol { list-style: none; display: grid; gap: 8px; margin: 0; padding: 10px 12px 12px; }
.a-serp li { display: flex; align-items: center; gap: 9px; font: 600 13px/1.2 var(--font); }
.a-serp li b { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: rgba(23, 34, 61, .1); font: var(--t-tag); }
.a-serp li.is-you b { background: var(--orange); color: #fff; }
.a-serp li i { flex: 1; height: 7px; background: rgba(23, 34, 61, .1); }
.a-chat { width: 86%; display: grid; gap: 9px; }
.a-chat p { margin: 0; padding: 9px 12px; font: 400 12.5px/1.4 var(--font); }
.a-chat__q { justify-self: end; max-width: 78%; background: var(--navy); color: #fff; border-radius: 10px 10px 2px 10px; }
.a-chat__a { max-width: 88%; background: var(--paper); border: 1.5px solid var(--navy); box-shadow: var(--lift-xs) var(--navy); border-radius: 10px 10px 10px 2px; color: var(--navy); }
.a-hours { width: 72%; }
.a-hours ul { list-style: none; margin: 0; padding: 4px 12px 8px; }
.a-hours li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed rgba(23, 34, 61, .2); font: 500 13px/1.2 var(--font); }
.a-hours li:last-child { border: 0; }
.a-hours li.is-fix span:last-child { font-weight: 700; color: var(--orange-ink); }
.a-hours s { margin-right: 6px; color: var(--muted); font-weight: 400; text-decoration-thickness: 1.5px; }
.a-prod { width: 84%; display: flex; align-items: center; gap: 14px; padding: 14px; }
.a-prod__img { width: 60px; height: 64px; flex: none; background: var(--navy); clip-path: polygon(22% 0, 62% 0, 62% 58%, 100% 72%, 100% 100%, 22% 100%); }
.a-prod div { display: grid; gap: 4px; }
.a-prod b { font: var(--t-h6); letter-spacing: var(--ls-h6); }
.a-prod span { font: 500 12.5px/1.2 var(--font); color: var(--body); }
.a-prod span::before { content: "✓"; margin-right: 6px; font-weight: 700; color: var(--leaf-ink); }
.a-review { width: 84%; padding: 13px 14px 12px; }
.a-review p { margin: 0; }
.a-review__stars { font-size: 15px; letter-spacing: 2px; color: var(--amber); }
.a-review__stars i { font-style: normal; color: rgba(23, 34, 61, .18); }
.a-review__t { margin: 6px 0 11px !important; font: 500 13px/1.35 var(--font); }
.a-review__r { display: flex; justify-content: space-between; align-items: center; padding-top: 9px; border-top: 1px dashed rgba(23, 34, 61, .25); font: 600 12.5px/1 var(--font); }
.a-review__r em { padding: 4px 6px; border: 1.5px solid var(--orange); color: var(--orange-ink); font: var(--t-tag); font-style: normal; letter-spacing: var(--ls-tag); text-transform: uppercase; }
.a-post { width: 56%; }
.a-post img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 12%; background: #F3D9A6; }
.a-post p { margin: 0; padding: 8px 10px 9px; border-top: 1.5px solid var(--navy); font: 500 12.5px/1.35 var(--font); }
.a-sms { width: 84%; display: grid; gap: 9px; }
.a-sms p { max-width: 86%; margin: 0; padding: 9px 12px; background: var(--paper); border: 1.5px solid var(--navy); box-shadow: var(--lift-xs) var(--navy); border-radius: 10px 10px 10px 2px; font: 400 12.5px/1.4 var(--font); }
.a-sms p.is-them { justify-self: end; background: var(--leaf); border-radius: 10px 10px 2px 10px; font-weight: 600; }
.a-note { width: 66%; padding: 14px 15px 16px; background: #FFF3C4; box-shadow: 3px 3px 0 rgba(23, 34, 61, .18); rotate: 2deg; }
.a-note p { margin: 0; font: var(--t-tag); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--muted); }
.a-note b { display: block; margin: 7px 0 12px; font: var(--t-h6); letter-spacing: var(--ls-h6); }
.a-note em { padding: 5px 7px; background: var(--orange); color: #fff; font: var(--t-tag); font-style: normal; letter-spacing: var(--ls-tag); text-transform: uppercase; }
.a-price { width: 76%; }
.a-price ul { list-style: none; margin: 0; padding: 4px 0; }
.a-price li { display: flex; justify-content: space-between; padding: 7px 12px; font: 500 13px/1.2 var(--font); }
.a-price li b { font: var(--t-data); line-height: 1.2; }
.a-price li.is-off { background: #FBE2D6; color: var(--orange-ink); }
.a-stock { width: 80%; display: grid; gap: 10px; }
.a-stock p { margin: 0; }
.a-stock p:first-child { display: grid; gap: 3px; padding: 13px 14px; background: var(--paper); border: var(--rule); box-shadow: var(--lift-s) var(--navy); }
.a-stock b { font: var(--t-h6); letter-spacing: var(--ls-h6); }
.a-stock span { font: 400 12.5px/1.3 var(--font); color: var(--body); }
.a-stock__idea { justify-self: end; padding: 9px 11px; background: var(--navy); color: #fff; box-shadow: var(--lift-s) var(--orange); font: 600 12.5px/1.2 var(--font); }
.a-map { position: relative; width: 84%; aspect-ratio: 4 / 3; overflow: hidden; border: var(--rule); box-shadow: var(--lift-s) var(--navy);
  background: repeating-linear-gradient(0deg, transparent 0 30px, #fff 30px 36px), repeating-linear-gradient(90deg, transparent 0 44px, #fff 44px 50px), #DCE4EE; }
.a-map i { position: absolute; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; rotate: -45deg; border: 1.5px solid var(--navy); }
.a-map__you { left: 26%; top: 38%; background: var(--navy); }
.a-map__them { left: 60%; top: 24%; background: var(--orange); }
.a-map p { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; padding: 7px 9px; background: var(--paper); border: 1.5px solid var(--navy); font: 600 12.5px/1.3 var(--font); }
.a-check { width: 82%; }
.a-check ul { list-style: none; display: grid; margin: 0; padding: 6px 12px 10px; }
.a-check li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; font: 500 13px/1.2 var(--font); }
.a-check li::before { content: ""; width: 13px; height: 13px; flex: none; border: 1.5px solid var(--navy); }
.a-check li.is-done::before { background: var(--navy); box-shadow: inset 0 0 0 2px var(--paper); }
.a-check em { margin-left: auto; padding: 3px 5px; border: 1.5px solid var(--leaf); color: var(--leaf-ink); font: var(--t-tag); font-style: normal; letter-spacing: var(--ls-tag); text-transform: uppercase; }