/* /websites/ (v5, 2026-11-02): the website offer for small businesses, rebuilt to belong to the home page:
   the giant stretched Anton title with something standing in front of it, Unbounded section heads with a
   grey last line, the cloud-coloured rows, Caveat hand notes, Kanit for reading. Builds on pf.css (bar,
   buttons, reveals, footer). Motion lives in /websites/js/ws.js: one rAF loop that sleeps when settled.
   Every class here is page-scoped (wh, wx, wf, wsx, wp, wq, wk), except the home page teaser (.wst) at
   the end, which index.html also loads. */

.ws-page { --pad: 16px; --dim: rgba(215, 226, 234, .38); --rule: rgba(215, 226, 234, .14); }
@media (min-width: 640px) { .ws-page { --pad: 32px; } }
@media (min-width: 1100px) { .ws-page { --pad: 48px; } }

/* section heads, the home page's "What I've made so far." */
.wt { font-family: var(--wide); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 6vw, 72px); line-height: 1.04; letter-spacing: -.015em; color: var(--bright); }
.wt span { display: block; }
.wt span:last-child:not(:first-child) { color: var(--dim); }
.hand { font-family: var(--hand); font-weight: 600; }

/* hand notes with a drawn arrow, in the ice blue of the buttons' glow */
.wh-note, .wf-n, .wk-hand { display: flex; align-items: flex-end; gap: 4px; color: var(--ice); pointer-events: none; }
.wh-note .hand, .wf-n .hand, .wk-hand .hand { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.05; }
.wh-note svg, .wf-n svg, .wk-hand svg { flex: none; width: 58px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ======================= the front ======================= */
.wh { position: relative; overflow: hidden; padding: 92px var(--pad) 48px; display: flex; flex-direction: column; gap: 28px; --h: 0; }
.wh-t { margin: 0; font-weight: 400; display: flex; flex-direction: column; gap: 1.2vw; width: 100%; transform: translate3d(0, calc(var(--h) * -5vh), 0); }
.wh-l { display: block; width: 100%; clip-path: inset(-4% -2% -2% -2%); }
.wh-l svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wh-l text { font-family: var(--tall); font-weight: 400; fill: var(--cream); }
.wh-l1 { aspect-ratio: 1000 / 250; }
.wh-l2 { aspect-ratio: 1600 / 250; }

.wh-stack { position: relative; z-index: 2; width: 88%; margin: 22vw auto 0; aspect-ratio: 1200 / 790; }
.wh-win {
  position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: #161616;
  border: 1px solid rgba(215, 226, 234, .14); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 8px 18px -8px rgba(0, 0, 0, .6);
  transform-origin: 50% 100%;
  transform: translate3d(calc(var(--x) * (1 + var(--h) * 1.2) * 1%), calc((var(--y) * (1 + var(--h) * .6) + var(--h) * var(--i) * -5) * 1%), 0) scale(calc(var(--s) + var(--h) * var(--i) * -.03));
}
.wh-win::after { content: ''; position: absolute; inset: 0; background: var(--bg); opacity: var(--hz); pointer-events: none; }
.wh-win img { width: 100%; height: auto; }
.wh-front { transform: translate3d(0, calc(var(--h) * 6%), 0) scale(calc(1 + var(--h) * .05)); }
.wh-bar, .wx-bar {
  display: block; height: 26px; padding: 0 12px; background: #18191b; border-bottom: 1px solid rgba(215, 226, 234, .08);
  font-size: 11px; line-height: 26px; color: #8e939a; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wh-lead { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 22px; }
.wh-p { font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; color: var(--bright); max-width: 34rem; }
.wh-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.wh-en { font-size: .85rem; font-weight: 300; color: var(--muted); }
.wh-note { position: absolute; z-index: 3; right: var(--pad); top: calc(92px + 23vw); transform: rotate(-3deg); }
.wh-note svg { transform: scaleY(-1) rotate(-10deg); margin-bottom: -16px; }

/* entrance: the title rises out of its lines, then the windows land one after another */
html.anim .wh .wh-l svg { transform: translate3d(0, 104%, 0); transition: transform 1.1s var(--e-out); }
html.anim .wh .wh-l2 svg { transition-delay: .08s; }
html.anim .wh-win { translate: 0 90px; opacity: 0; transition: translate 1.2s var(--e-out) calc(.25s + (4 - var(--i)) * .09s), opacity .5s var(--ease) calc(.25s + (4 - var(--i)) * .09s); }
html.anim .wh-lead, html.anim .wh-note { opacity: 0; translate: 0 24px; transition: translate 1s var(--e-out) .55s, opacity .6s var(--ease) .55s; }
html.anim .wh.on .wh-l svg { transform: none; }
html.anim .wh.on .wh-win, html.anim .wh.on .wh-lead, html.anim .wh.on .wh-note { translate: none; opacity: 1; }

@media (max-width: 899px) {
  .wh-note { position: relative; right: auto; top: auto; align-self: flex-end; margin-top: -6px; }
  .wh-note svg { display: none; }
}
@media (min-width: 900px) {
  .wh { min-height: 100vh; min-height: 100svh; padding: 104px var(--pad) 0; display: block; }
  .wh-t { width: min(100%, 112vh); gap: 14px; transform: translate3d(0, calc(var(--h) * -7vh), 0); }
  .wh-l2 { width: 75%; }
  .wh-stack { position: absolute; right: 9vw; bottom: 4vh; width: min(40vw, 82vh); margin: 0; }
  .wh-lead { position: absolute; left: var(--pad); bottom: 7vh; width: min(32vw, 460px); }
  .wh-p { font-size: clamp(1.05rem, 1.35vw, 1.22rem); }
  .wh-note { display: none; }
}
@media (min-width: 1340px) and (min-height: 760px) {
  .wh-note {
    display: flex; flex-direction: column; align-items: flex-start; top: auto; right: auto; width: max-content;
    left: calc(var(--pad) + min(32vw, 460px) + .4vw); bottom: 10vh;
  }
  /* smaller here so the note ends before the front window (it ran onto its edge at 1440) */
  .wh-note .hand { font-size: clamp(18px, 1.45vw, 22px); }
  .wh-note svg { transform: rotate(-14deg); margin: 2px 0 0 120px; }
}
@media (min-width: 900px) and (max-width: 1199px), (min-width: 900px) and (max-height: 760px) {
  .wh-t { width: min(100%, 98vh); }
  .wh-lead { width: min(42vw, 430px); gap: 18px; }
  .wh-cta .cbtn, .wh-cta .gbtn { padding: 13px 30px; font-size: .85rem; }
}
@media (min-width: 900px) and (max-height: 700px) {
  .wh-p { font-size: 1rem; }
  .wh-en { display: none; }
}

/* ======================= the examples ======================= */
.wx { position: relative; padding: 80px 0 24px; }
.wx-head { padding: 0 var(--pad); display: grid; gap: 22px; max-width: 1220px; margin: 0 auto; }
.wx-honest { font-weight: 300; font-size: clamp(.95rem, 1.3vw, 1.05rem); line-height: 1.6; color: rgba(215, 226, 234, .78); max-width: 36rem; }
.wx-honest b { font-weight: 500; color: var(--bright); }
.wx-list { list-style: none; padding: 48px var(--pad) 0; max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px 40px; }
.wx-i { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.wx-win {
  position: relative; display: block; width: 84%; margin-bottom: 30px; border-radius: 10px; background: #161616;
  border: 1px solid rgba(215, 226, 234, .14); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .85);
}
.wx-win::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--bg); opacity: var(--hz, 0); pointer-events: none; }
.wx-bar { border-radius: 10px 10px 0 0; }
.wx-desk { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 0 0 9px 9px; background: #e9e9e6; }
.wx-ph {
  position: absolute; z-index: 2; right: -17%; bottom: -30px; width: 30%; height: auto; aspect-ratio: 480 / 1039; object-fit: cover; object-position: top;
  border-radius: 14px; border: 4px solid #1f2023; background: #e9e9e6; box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .8);
}
@media (hover: hover) {
  .wx:not(.walk) .wx-win { transition: transform .7s var(--e-out); }
  .wx:not(.walk) .wx-ph { transition: transform .7s var(--e-out); }
  .wx:not(.walk) .wx-i:hover .wx-win { transform: translateY(-4px); }
  .wx:not(.walk) .wx-i:hover .wx-ph { transform: translateY(-10px) rotate(-1.5deg); }
}
.wx-kind { font-size: .92rem; color: var(--muted); }
.wx-cap h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.01em; color: var(--bright); margin: 6px 0 10px; }
.wx-cap h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .5s var(--e-out); }
.wx-cap h3 a:hover, .wx-cap h3 a:focus-visible { background-size: 100% 1.5px; }
.wx-cap h3 a::after { content: ' \2192'; font-family: Kanit, system-ui, sans-serif; font-size: .55em; vertical-align: .2em; color: var(--ice); }
.wx-cap p:not([class]) { font-weight: 300; font-size: 1rem; line-height: 1.55; color: rgba(215, 226, 234, .78); max-width: 30rem; }
.wx-grp { padding: 24px 0 8px; border-top: 1px solid var(--rule); }
.wx-grp-h { font-family: var(--wide); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 3.6vw, 40px); line-height: 1.05; color: var(--bright); margin-bottom: 14px; }
.wx-grp p { font-weight: 300; font-size: 1rem; line-height: 1.6; color: rgba(215, 226, 234, .78); max-width: 40rem; }
.wx-note { padding: 56px var(--pad) 0; max-width: 1220px; margin: 0 auto; font-size: .82rem; line-height: 1.55; font-weight: 300; color: var(--muted); }
@media (min-width: 900px) {
  .wx { padding-top: 120px; }
  .wx-head { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); align-items: end; gap: 40px; }
  .wx:not(.walk) .wx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 64px; }
  .wx:not(.walk) .wx-grp { grid-column: 1 / -1; }
}

/* walk mode (ws.js, 900px and wider, motion allowed): a pinned stage; the windows walk forward in depth,
   the caption changes at the lower left and the branch word slides behind everything. */
.wx.walk .wx-track { position: relative; }
.wx.walk .wx-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.wx.walk .wx-list { position: absolute; inset: 0; padding: 0; margin: 0; max-width: none; display: block; }
.wx.walk .wx-i { display: block; }
.wx.walk .wx-grp { display: none; }
.wx.walk .wx-win {
  position: absolute; left: 0; top: 0; margin: 0; width: var(--wb, 640px); transform-origin: 50% 50%;
  will-change: transform, opacity; backface-visibility: hidden;
}
.wx.walk .wx-ph { right: -7%; bottom: -12%; width: 25%; will-change: opacity, transform; }
.wx.walk .wx-cap {
  position: absolute; z-index: 300; left: var(--pad); bottom: 15vh; width: min(30vw, 430px);
  will-change: opacity, transform;
}
.wx.walk .wx-cap h3 { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
.wx.walk .wx-cap.off { pointer-events: none; }
.wx-words { position: absolute; z-index: 0; left: 0; right: 0; top: 6vh; height: 40vh; pointer-events: none; }
.wx-w {
  position: absolute; left: 0; top: 0; font-family: var(--tall); font-weight: 400; font-size: 40vh; line-height: .82;
  color: var(--cream); white-space: nowrap; will-change: transform, opacity; padding-top: .04em;
}
.wx.walk .wx-ui { position: absolute; z-index: 300; left: var(--pad); bottom: 5.5vh; display: flex; align-items: center; gap: 10px; }
.wx-ui svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wx-count { margin-left: 8px; font-size: .95rem; color: var(--muted); }
.wx-count b { font-weight: 500; color: var(--bright); }
.wx.walk .wx-note { padding-top: 40px; }

/* ======================= always included ======================= */
.wf { padding: 96px var(--pad) 112px; display: grid; gap: 48px; max-width: 1220px; margin: 0 auto; }
.wf-pic { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wf-phone { width: min(290px, 66vw); padding: 9px; border-radius: 40px; background: #1b1c1f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 80px -30px rgba(0, 0, 0, .9); }
.wf-phone img { width: 100%; height: auto; border-radius: 32px; }
.wf-n .hand { white-space: nowrap; }
.wf-n1 { align-self: flex-start; }
.wf-n1 svg { transform: rotate(18deg); }
.wf-n2 { align-self: flex-end; flex-direction: row-reverse; }
.wf-n2 svg { transform: scaleX(-1) rotate(-12deg); }
.wf-txt { display: flex; flex-direction: column; gap: 32px; }
.wf-list { list-style: none; border-top: 1px solid var(--rule); }
.wf-list li { display: grid; gap: 6px; padding: 20px 0 22px; border-bottom: 1px solid var(--rule); }
.wf-list b { font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.25; color: var(--bright); }
.wf-list span { font-weight: 300; font-size: 1rem; line-height: 1.55; color: rgba(215, 226, 234, .75); max-width: 36rem; }
@media (min-width: 900px) {
  .wf { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; padding-top: 140px; }
  .wf-pic { position: sticky; top: 8vh; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: start; gap: 0 8px; }
  .wf-phone { grid-column: 2; grid-row: 1 / 3; width: min(300px, 24vw); }
  .wf-n1 { grid-column: 1; grid-row: 1; justify-self: end; margin-top: 70px; }
  .wf-n2 { grid-column: 1; grid-row: 2; align-self: end; justify-self: end; flex-direction: row; margin-bottom: 40px; }
  .wf-n2 svg { transform: rotate(0); }
  .wf-n1 svg { transform: rotate(-4deg) translateY(10px); }
}
@media (max-width: 899px) {
  .wf-n svg { display: none; }
  .wf-n1 { align-self: center; }
  .wf-n2 { align-self: center; }
}

/* ======================= how it goes (cloud) and prices (white) ======================= */
.wsx { background: var(--cloud); color: var(--ink2); padding: 96px 0 72px; position: relative; z-index: 2; border-radius: 40px 40px 0 0; }
.wsx-wrap, .wp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.wsx .wt, .wp .wt { color: var(--ink2); }
.wsx .wt span:last-child:not(:first-child), .wp .wt span:last-child:not(:first-child) { color: #8f8b8a; }
.wsx-head { display: grid; gap: 22px; align-items: end; padding-bottom: 40px; }
.wsx-note { font-size: 14px; line-height: 1.55; color: rgba(20, 21, 22, .7); max-width: 320px; }
.wsx-rows { list-style: none; }
.wsx-row { display: grid; gap: 12px; padding: 28px 0 32px; border-top: 1px solid rgba(20, 21, 22, .14); }
.wsx-who b { display: block; font-weight: 600; font-size: 1.05rem; }
.wsx-who span { display: block; font-size: .9rem; color: rgba(20, 21, 22, .58); margin-top: 2px; }
.wsx-big { font-weight: 300; font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.32; letter-spacing: -.005em; max-width: 42rem; }

.wp { background: linear-gradient(180deg, var(--cloud) 0, #fff 220px); color: var(--ink2); padding: 72px 0 120px; position: relative; z-index: 2; }
.wp-rows { list-style: none; }
.wp-row { position: relative; display: grid; gap: 18px; padding: 32px 0 34px; border-top: 1px solid rgba(20, 21, 22, .14); }
.wp-row:last-child { border-bottom: 1px solid rgba(20, 21, 22, .14); }
.wp-a h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.05; }
.wp-a p { font-weight: 300; font-size: 1rem; line-height: 1.55; color: rgba(20, 21, 22, .75); margin-top: 10px; max-width: 26rem; }
.wp-hand { font-size: 22px !important; line-height: 1.1 !important; color: #2d7fd8 !important; margin-top: 14px !important; transform: rotate(-2deg); transform-origin: 0 50%; font-weight: 600 !important; }
.wp-incl { list-style: none; }
.wp-incl li { position: relative; padding: 9px 0 9px 22px; font-weight: 300; font-size: .98rem; line-height: 1.45; border-top: 1px solid rgba(20, 21, 22, .08); }
.wp-incl li:first-child { border-top: 0; padding-top: 0; }
.wp-incl li::before { content: ''; position: absolute; left: 2px; top: calc(9px + .45em); width: 10px; height: 6px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); opacity: .7; }
.wp-incl li:first-child::before { top: .45em; }
.wp-incl a, .wp-terms a { text-decoration: underline; text-underline-offset: 3px; }
.wp-plus { margin-top: 16px; font-weight: 300; font-size: .92rem; line-height: 1.5; color: rgba(20, 21, 22, .75); }
.wp-plus b { font-weight: 500; color: var(--ink2); }
.wp-price { font-family: var(--tall); font-weight: 400; font-size: clamp(2.8rem, 5.4vw, 4.6rem); line-height: .95; letter-spacing: .005em; white-space: nowrap; }
.wp-price i, .wp-price small { font-family: Kanit, system-ui, sans-serif; font-style: normal; font-weight: 300; font-size: .32em; letter-spacing: 0; margin: 0 .4em; vertical-align: .55em; }
.wp-price small { margin-left: 0; }
.wp-price span { font-size: .6em; margin-left: .12em; }
.wp-once { margin-top: 8px; font-size: .92rem; color: rgba(20, 21, 22, .62); }
.wp-row--main .wp-price { color: #1b5fae; }
.wp-terms { margin-top: 28px; display: grid; gap: 8px; }
.wp-terms p { font-weight: 300; font-size: .92rem; line-height: 1.55; color: rgba(20, 21, 22, .75); max-width: 52rem; }
.wp-terms b { font-weight: 500; color: var(--ink2); }
@media (min-width: 760px) {
  .wsx { border-radius: 50px 50px 0 0; padding-top: 128px; }
  .wsx-head { grid-template-columns: 1fr auto; padding-bottom: 48px; }
  .wsx-row { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; padding: 34px 0 40px; }
}
@media (min-width: 900px) {
  .wp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 40px; padding: 40px 0 44px; align-items: start; }
  .wp-price { font-size: clamp(2.6rem, 4.4vw, 4rem); }
  .wp-c { text-align: right; }
}
@media (max-width: 899px) {
  .wp-c { order: -1; grid-row: 2; }
  .wp-a { display: contents; }
  .wp-a h3 { order: -2; }
  .wp-a p { order: 0; margin-top: -6px; }
}

/* ======================= questions ======================= */
.wq { position: relative; z-index: 3; background: var(--bg); border-radius: 40px 40px 0 0; margin-top: -40px; padding: 88px var(--pad) 40px; }
.wq-in { max-width: 1220px; margin: 0 auto; display: grid; gap: 32px; }
.wq-head { display: grid; gap: 16px; align-content: start; }
.wq-head p { font-weight: 300; font-size: 1rem; line-height: 1.55; color: rgba(215, 226, 234, .75); max-width: 22rem; }
.wq-head a { text-decoration: underline; text-underline-offset: 3px; color: var(--bright); }
.wq-qa { border-top: 1px solid var(--rule); }
.wq-qa details { border-bottom: 1px solid var(--rule); }
.wq-qa summary {
  list-style: none; cursor: pointer; position: relative; padding: 22px 44px 22px 2px;
  font-weight: 400; font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.35; color: var(--bright);
}
.wq-qa summary::-webkit-details-marker { display: none; }
.wq-qa summary::before, .wq-qa summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 14px; height: 1.5px; background: currentColor; opacity: .7;
  transition: transform .35s var(--e-out);
}
.wq-qa summary::after { transform: rotate(90deg); }
.wq-qa details[open] summary::after { transform: rotate(0deg); }
.wq-qa summary:hover { color: #fff; }
.wq-qa p { padding: 0 44px 24px 2px; font-weight: 300; font-size: 1rem; line-height: 1.65; color: rgba(215, 226, 234, .75); max-width: 44rem; }
@media (min-width: 640px) { .wq { border-radius: 50px 50px 0 0; margin-top: -50px; } }
@media (min-width: 900px) {
  .wq { padding-top: 128px; }
  .wq-in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; }
  .wq-head { position: sticky; top: 10vh; }
}

/* ======================= contact ======================= */
.wk { padding: 96px var(--pad) 120px; }
/* my character stands behind the title this time, so the words hide where the picture is cut off */
.wk-stage { position: relative; max-width: 1344px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.wk-t { order: 2; position: relative; z-index: 2; width: 100%; margin: -16vw 0 0; font-weight: 400; }
.wk-l { aspect-ratio: 2000 / 250; }
.wk-me {
  order: 1; position: relative; z-index: 1; width: min(48vw, 260px); height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 97%); mask-image: linear-gradient(180deg, #000 72%, transparent 97%);
}
.wk-hand { order: 0; position: relative; z-index: 3; justify-content: center; margin-bottom: 10px; }
.wk-hand svg { display: none; }
.wk-body { max-width: 44rem; margin: 40px auto 0; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.wk-p { font-weight: 300; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--bright); }
.wk-mail {
  font-weight: 500; font-size: clamp(1.6rem, 4.6vw, 3.4rem); line-height: 1.1; letter-spacing: -.01em; color: var(--bright); overflow-wrap: anywhere;
  background: linear-gradient(var(--ice), var(--ice)) 0 100% / 100% 2px no-repeat; padding-bottom: 4px; transition: color .25s;
}
.wk-mail:hover { color: var(--ice); }
.wk-body .wh-cta { justify-content: center; }
.wk-small { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: .88rem; font-weight: 300; color: var(--muted); }
.wk-small a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .wk { padding-top: 140px; }
  .wk-me { width: min(22vw, 320px); }
  .wk-t { margin-top: min(-10vw, -140px); }
  .wk-hand { position: absolute; left: calc(50% + min(11vw, 160px) + 8px); top: 22%; margin: 0; flex-direction: column; align-items: flex-start; }
  .wk-hand svg { display: block; margin: 4px 0 0 -14px; }
}

/* ---------- the home page teaser (index.html #websites) ---------- */
.wst { padding: 88px 16px 40px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.wst-t { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; max-width: 44rem; }
.wst-t .su-k { margin-bottom: -8px; }
.wst-t .sec-h { font-size: clamp(2.6rem, 10vw, 128px); }
.wst-t p:not([class]), .wst-p { font-weight: 300; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; opacity: .8; }
.wst-p { font-size: .95rem; opacity: .6; }
.wst-row { list-style: none; width: 100%; max-width: 76rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
.wst-row a { display: flex; flex-direction: column; gap: 10px; }
.wst-row img {
  width: 100%; height: auto; aspect-ratio: 480 / 1039; object-fit: cover; object-position: top;
  border-radius: 16px; border: 1px solid rgba(215, 226, 234, .18); background: #161616;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .8); transition: transform .7s var(--e-out);
}
.wst-row span { display: flex; flex-direction: column; gap: 2px; font-weight: 500; font-size: .85rem; line-height: 1.2; color: var(--bright); }
.wst-row small { font-family: var(--mono); font-weight: 400; font-size: .68rem; letter-spacing: .04em; opacity: .55; color: var(--ink); }
@media (hover: hover) { .wst-row a:hover img { transform: translateY(-8px); } }
.wst-row a:focus-visible { outline-offset: 6px; }
@media (min-width: 640px) { .wst { padding: 112px 32px 48px; } }
@media (min-width: 1100px) {
  .wst-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
  .wst-row li:nth-child(even) { margin-top: 36px; }
}