/* StillHuman Design: "code lens" illustration (About section).
   A code editor types out the hero's own HTML and CSS. Underneath sits a miniature version of this
   site where that one area is still unstyled; each finished CSS rule restyles it. When the code is
   complete the lens opens up and the finished site is shown. Sized in container units. */

.cx{position:absolute;inset:0;container-type:size;overflow:hidden;cursor:crosshair;background:#272822;color:#f8f8f2;touch-action:pan-y}

/* ---------- code layer ---------- */
.cx-code{position:absolute;inset:0;padding:0 0 3cqw;font:400 min(2.85cqw,2.7cqh)/1.62 ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;display:flex;flex-direction:column}
.cx-bar{flex:none;padding:2.4cqw 4.4cqw;border-bottom:1px solid rgba(248,248,242,.12);background:#1e1f1c;color:#a59f85;font-size:.92em;letter-spacing:.02em;display:flex;align-items:center;gap:1.4cqw}
.cx-bar::before{content:"";width:.9em;height:.9em;border:1.5px solid #a6e22e;box-sizing:border-box}
.cx-pre{margin:0;padding:2.6cqw 4.4cqw 0 0;overflow:hidden;white-space:pre;font:inherit;flex:1;tab-size:2}
.ln{display:inline-block;width:6.4cqw;padding-right:2.2cqw;margin-right:1.6cqw;text-align:right;color:#90908a;user-select:none}
.tk-p{color:#f8f8f2}.tk-t{color:#f92672}.tk-a{color:#a6e22e}.tk-s{color:#e6db74}.tk-k{color:#66d9ef}.tk-n{color:#ae81ff}.tk-w{color:#e6db74}.tk-x{color:#f8f8f2}
.caret{display:inline-block;width:.58em;height:1.15em;margin-left:1px;vertical-align:-.2em;background:#f8f8f0;animation:cxblink 1.05s steps(1) infinite}
@keyframes cxblink{50%{opacity:0}}

.cx-hint{position:absolute;right:3.2cqw;bottom:3cqw;z-index:4;padding:1.1cqw 2cqw;background:rgba(14,16,19,.72);border:1px solid rgba(227,229,231,.28);color:#e3e5e7;font:600 min(2.3cqw,2.7cqh)/1 var(--font-b,system-ui,sans-serif);transition:opacity .6s;pointer-events:none;backdrop-filter:blur(4px)}
.cx.seen .cx-hint.first{opacity:0}
.cx-replay{position:absolute;left:3.2cqw;bottom:3cqw;z-index:4;padding:1.1cqw 2.2cqw;background:rgba(14,16,19,.72);border:1px solid rgba(85,224,255,.6);color:#55e0ff;font:700 min(2.3cqw,2.7cqh)/1 var(--font-b,system-ui,sans-serif);cursor:pointer;backdrop-filter:blur(4px);transition:background .3s,color .3s}
.cx-replay:hover{background:#55e0ff;color:#06121a}
.cx-replay:focus-visible{outline:3px solid #55e0ff;outline-offset:3px}
.cx-replay[hidden]{display:none}

/* ---------- the page underneath (visible only inside the lens until the code is done) ---------- */
.cx-res{position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(circle var(--lr,0px) at var(--mx,50%) var(--my,50%),#000 0,#000 58%,transparent 100%);
  mask-image:radial-gradient(circle var(--lr,0px) at var(--mx,50%) var(--my,50%),#000 0,#000 58%,transparent 100%)}
.cx-res.done{-webkit-mask-image:none;mask-image:none}
.cx-res.done.peek{
  -webkit-mask-image:radial-gradient(circle var(--lr,0px) at var(--mx,50%) var(--my,50%),transparent 0,transparent 58%,#000 100%);
  mask-image:radial-gradient(circle var(--lr,0px) at var(--mx,50%) var(--my,50%),transparent 0,transparent 58%,#000 100%)}

.site{position:absolute;inset:0;display:flex;flex-direction:column;background:#0e1013;color:#e3e5e7;font:400 2.4cqw/1.3 "DM Sans",system-ui,sans-serif}
.s-nav{flex:none;display:flex;align-items:center;justify-content:space-between;padding:2.6cqw 5cqw;border-bottom:1px solid rgba(227,229,231,.14)}
.s-nav b{font:400 3.4cqw/1 Anton,Impact,sans-serif;letter-spacing:.01em;text-transform:uppercase}
.s-links{display:flex;gap:3cqw;color:#a3a8ae;font-size:2.1cqw}
.s-links i{font-style:normal}

/* the area being finished: raw browser defaults until the CSS is typed */
.s-hero{flex:1 1 auto;min-height:0;margin:3cqw 4cqw 0;padding:5cqw;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3.6cqw;
  background:#fff;color:#000;font:400 4.6cqw/1.25 "Times New Roman",Times,serif;transition:background-color .5s,color .5s}
.s-hero .h{margin:0;font-size:2em;font-weight:700}
.s-hero .a{color:#0000ee;text-decoration:underline}
.cx-res.st1 .s-hero{background:#0e1013;color:#e3e5e7}
.cx-res.st2 .s-hero .h{font:400 min(9cqw,11cqh)/.95 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.005em}
.cx-res.st3 .s-hero .h span{display:block}
.cx-res.st4 .s-hero .o{color:transparent;-webkit-text-stroke:.3cqw #fff}
.cx-res.st5 .s-hero .b{color:#55e0ff}
.cx-res.st6 .s-hero .a{display:inline-block;padding:1em;font:700 3.2cqw/1 "DM Sans",system-ui,sans-serif;color:#55e0ff;border:.3cqw solid #55e0ff;text-decoration:none}

/* the finished parts of the site */
.s-cards{flex:0 0 27%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:2.4cqw;padding:3cqw 4cqw 0}
.s-card{position:relative;overflow:hidden;background:#161a1f}
.s-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}
.s-card.add{border:1.5px dashed rgba(227,229,231,.4);display:grid;place-items:center;color:#55e0ff;font:400 5cqw/1 Anton,Impact,sans-serif;background:transparent}
.s-foot{flex:none;display:flex;justify-content:center;padding:2.6cqw 5cqw;margin-top:3cqw;border-top:1px solid rgba(227,229,231,.14);color:#8a939c;font-size:2cqw}

/* ---------- the lens ---------- */
.cx-ring{position:absolute;left:0;top:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);pointer-events:none;opacity:0;mix-blend-mode:difference;z-index:3}

@media (max-width:900px){.about-img:has(.cx){aspect-ratio:1/1}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}.s-hero{transition:none}}