body{font:400 15px/1.35 var(--sans);background:var(--bg);color:var(--ink)}
h1,h2,h3{font:500 15px/1.35 var(--sans);letter-spacing:0;margin:0}.index-head h2,.info>h2{font:italic 400 clamp(28px,2.6vw,40px)/1.1 var(--serif);letter-spacing:-.01em}.wv-text h2,.svc h3{font:italic 400 clamp(20px,1.6vw,26px)/1.2 var(--serif)}.bio p{font-family:var(--serif)}
a{color:inherit}
main>section{scroll-margin-top:56px}
.topbar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:6px 24px;padding:0 clamp(16px,3vw,32px);min-height:56px;color:var(--bg-l);transition:background var(--dur-3),color var(--dur-3)}
.topbar.scrolled{background:var(--bg);color:var(--ink);box-shadow:0 1px 0 var(--line)}.topbar:not(.scrolled){background-image:linear-gradient(color-mix(in srgb,var(--bg-dk) 55%,transparent),transparent)}
.logo{font-weight:600;text-decoration:none}
.role{opacity:.72;margin-right:auto}
#nav-links{display:flex;gap:4px 24px;list-style:none;margin:0;padding:0}
#nav-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;text-underline-offset:.4em}
#nav-links a:hover{text-decoration:underline}
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--bg-dk);color:var(--bg-l)}
.hero-frames,.frame{position:absolute;inset:0;margin:0}
.frame .art,.frame::after{position:absolute;inset:0;background:var(--bg-dk)}
.frame .art svg{display:block;width:100%;height:100%}
.frame::after{content:"";z-index:1;background:linear-gradient(color-mix(in srgb,var(--bg-dk) 55%,transparent),transparent 18% 62%,color-mix(in srgb,var(--bg-dk) 78%,transparent))}
.frame figcaption{position:absolute;z-index:2;right:clamp(16px,3vw,32px);bottom:clamp(20px,4vh,32px);font-size:13px;opacity:.86}
.frame-b{opacity:0;animation:xf 16s var(--ease) infinite}
.frame-a:not(:has(.kp-has))+.frame-b{animation:none;opacity:1}
.frame-a:not(:has(.kp-has)) figcaption{display:none}
@keyframes xf{40%{opacity:0}50%,90%{opacity:1}}
.hero-text{position:absolute;z-index:3;left:clamp(16px,3vw,32px);bottom:clamp(20px,4vh,32px);max-width:min(520px,60%)}
.hero h1{font:400 clamp(44px,7.2vw,112px)/.95 var(--serif);letter-spacing:-.02em}
.hero h1 span{display:block;margin-top:14px;font:500 15px/1.3 var(--sans);letter-spacing:0;opacity:.9}.hmail{display:inline-block;padding:12px 0;font:600 15px/1.35 var(--sans);font-style:normal;white-space:normal;text-underline-offset:.25em}
.line{margin:6px 0 0;font:italic 400 clamp(17px,1.4vw,21px)/1.35 var(--serif);opacity:.95}
#gallery{padding:clamp(56px,8vw,96px) clamp(16px,3vw,32px) 32px}
.index-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.filters{display:flex;flex-wrap:wrap;gap:0 16px}
.filters button{min-height:44px;padding:0;border:0;background:none;color:var(--ink-2);font:inherit;cursor:pointer}
.filters button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:.4em}
.count{margin:0 0 0 auto;color:var(--ink-2)}
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px 24px;align-items:start}
.gitem{grid-column:span 4;display:block;text-decoration:none}
.gitem:nth-child(6n+1),.gitem:nth-child(6n+4){grid-column:span 7}.gitem:nth-child(6n+5),.gitem:nth-child(6n+6){grid-column:span 6}
.gitem:nth-child(6n+2),.gitem:nth-child(6n+3){grid-column:span 5}.mosaic .art{aspect-ratio:7/6}.gitem:nth-child(6n+2) .art,.gitem:nth-child(6n+3) .art{aspect-ratio:5/6}.gitem:nth-child(6n+5) .art,.gitem:nth-child(6n+6) .art{aspect-ratio:1}.mosaic .art svg{height:100%}
.art{position:relative;display:block;overflow:hidden;background:var(--sunk)}
.art svg{display:block;width:100%;height:auto}
.gitem .kp-cover{transition:transform .6s var(--ease)}
.gitem:hover .kp-cover{transform:scale(1.02)}
.gcap{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:10px}
.gcap b{font:italic 400 17px/1.3 var(--serif)}
.gcap span{color:var(--ink-2)}
.gitem:hover b{text-decoration:underline;text-underline-offset:.3em}
.gitem:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
#gallery .kp-credits,.sample-note{font-size:12px;color:var(--ink-2)}
.info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px 24px;margin:0 clamp(16px,3vw,32px);padding:28px 0 56px;border-top:1px solid var(--line)}
.info-body{max-width:640px}
.bio p{margin:0 0 1em;font-size:clamp(17px,1.2vw + 8px,22px);line-height:1.4}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px 24px;margin:24px 0 0}
.facts dt,.wv-meta,.price{color:var(--ink-2)}
.facts dd{margin:2px 0 0}
.lede{margin:0 0 16px;color:var(--ink-2)}
.svc{list-style:none;margin:0;padding:0}
.svc li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;padding:14px 0;border-top:1px solid var(--line)}
.svc p{margin:0;grid-column:1}
.svc .price{grid-column:2;grid-row:1}
.mail{display:inline-block;margin-bottom:16px;font-size:clamp(20px,2vw + 8px,32px);text-underline-offset:.2em}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.wide{grid-column:1/-1}
.field{display:grid;gap:6px;min-width:0}
input,select,textarea{font-size:16px;min-height:48px;border-radius:0}
textarea{min-height:0;resize:vertical}
.error{margin:0}
.hint{color:var(--ink-2);font-size:13px;margin:0}
.select{position:relative;display:block}
select{appearance:none;padding-right:40px;width:100%}
.select::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border:solid var(--ink-2);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.send{min-height:48px;padding:0 24px;border:1px solid var(--ink);border-radius:0;background:var(--ink);color:var(--bg);font:inherit;font-weight:500;cursor:pointer}
.send:hover{background:none;color:var(--ink)}
.form-status{min-height:1.4em;margin:0}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:24px clamp(16px,3vw,32px) 32px;color:var(--ink-2);font-size:13px}
footer p{margin:0}
.wv-open{overflow:hidden}
.work-view{position:fixed;inset:0;z-index:80;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:auto;background:var(--bg);color:var(--ink)}
.wv-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(16px,3vw,32px);min-height:56px}
.wv-nav{display:flex;gap:20px}
.wv-nav button{min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-underline-offset:.4em}
.wv-nav button:hover{text-decoration:underline}
.wv-count{font-variant-numeric:tabular-nums}
.wv-fig{display:flex;align-items:center;justify-content:center;min-height:0;margin:0;padding:0 clamp(16px,3vw,32px)}
.wv-art{display:block;max-width:100%}
.wv-art .art{background:none}
.wv-art svg{width:auto;max-width:100%;height:calc(100svh - 200px)}
.wv-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:4px 24px;padding:16px clamp(16px,3vw,32px) 24px}
.wv-text>*{margin:0;grid-column:2}
.wv-text h2{grid-column:1;grid-row:1/4;font-weight:600}
.wv-ask{justify-self:start;display:inline-flex;align-items:center;min-height:44px}
@media (max-width:900px){.gitem,.gitem[class]:nth-child(n){grid-column:span 6;margin-top:0}}
@media (max-width:600px){
.topbar{min-height:52px;gap:0 16px}.role{display:none}.logo{margin-right:auto}
.hero{height:min(78svh,125vw);min-height:0}
.hero-text{max-width:none;right:16px}
.frame figcaption{display:none}.frame::after{background:linear-gradient(color-mix(in srgb,var(--bg-dk) 55%,transparent),transparent 18% 40%,color-mix(in srgb,var(--bg-dk) 92%,transparent) 78%)}
.mosaic{grid-template-columns:1fr;gap:36px}.mosaic .art,.mosaic .gitem[class] .art{aspect-ratio:auto}.mosaic .art svg{height:auto}.gitem,.gitem[class]:nth-child(n){grid-column:1/-1}.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.count{display:none}
.info,.wv-text{grid-template-columns:1fr}.wv-art svg{width:100%;height:auto}.wv-text>*,.wv-text h2{grid-column:1;grid-row:auto}
form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.frame-b{animation:none}.gitem .kp-cover{transition:none}}


/* tap-targets: comfortable phone taps -- the sizes win on phones, the page's own layout stays */
@media (max-width: 600px) {
  a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a), button, [role=button], [onclick], summary, select, input:not([type=hidden], [type=checkbox], [type=radio], [type=range]) { min-height: 44px !important; min-width: 44px !important; }
  :where(a[href]:not(p a, li p a, blockquote a, figcaption a, td a, dd a, label a)) { display: inline-flex; align-items: center; justify-content: center; }
  input, select, textarea { font-size: max(16px, 1em) !important; }
}