/* HostCritiq sketch illustrations (<x-sketch>). Loaded after hc-ux.css; uses its tokens only.
   Pen = --ink, highlighter = --acc, paper = --s1. Wobble = #hc-rough filter from <x-sketch-defs>. */

.hc-sketch-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hc-hatch-line { stroke: var(--ink); stroke-width: 1.1; opacity: .3; }

.hc-sketch { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink); }
.hc-sketch .ink { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: url(#hc-rough); }
.hc-sketch .thin { stroke-width: 1.6; opacity: .75; }
.hc-sketch .dash { stroke-dasharray: 4 6; }
.hc-sketch .fog { opacity: .28; }
.hc-sketch .paper { fill: var(--s1); }
.hc-sketch .glass { fill: color-mix(in srgb, var(--s1) 70%, transparent); }
.hc-sketch .dot { fill: var(--acc); }
.hc-sketch .marks { filter: url(#hc-rough); mix-blend-mode: multiply; }
.hc-sketch .hl, .hc-sketch .hl-box { fill: var(--acc); stroke: none; opacity: .8; }
.hc-sketch .hatch { fill: url(#hc-hatch); stroke: none; }
body[data-theme="dark"] .hc-sketch .marks { mix-blend-mode: screen; }
body[data-theme="dark"] .hc-sketch .hl, body[data-theme="dark"] .hc-sketch .hl-box { opacity: .3; }
body[data-theme="dark"] .hc-sketch .paper { fill: var(--s2); }

/* ---------- home: hero ---------- */
.hc-hero h1 .serif { position: relative; z-index: 0; white-space: nowrap; }
.hc-hero h1 .serif::after {
    content: ""; position: absolute; z-index: -1; left: -2%; right: -3%; bottom: .06em; height: .32em;
    background: var(--acc); opacity: .7; border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%; transform: rotate(-1.2deg);
}
body[data-theme="dark"] .hc-hero h1 .serif::after { opacity: .35; }
.hc-hero-grid > div:first-child { position: relative; }
.hc-hero-sketch { position: absolute; right: 2%; top: -78px; width: 190px; pointer-events: none; }
@media (max-width: 1180px) { .hc-hero-sketch { width: 150px; top: -64px; } }
@media (max-width: 900px) { .hc-hero-sketch { display: none; } }

/* ---------- home: project cards and feature tiles ---------- */
.hc-project-card .hc-project-art { width: 100%; max-width: 230px; margin: -6px 0 14px -6px; transition: transform var(--t); }
.hc-project-card:hover .hc-project-art { transform: translateY(-3px) rotate(-1deg); }
.hc-tile .hc-tile-art { width: 132px; margin: -8px 0 10px -6px; transition: transform var(--t); }
.hc-tile:hover .hc-tile-art { transform: translateY(-3px) rotate(-1.5deg); }
.hc-tile-acc .hc-sketch { color: var(--acc-ink); }
.hc-tile-acc .hc-sketch .paper { fill: color-mix(in srgb, var(--acc) 70%, #fff); }
.hc-tile-acc .hc-sketch .marks { mix-blend-mode: normal; }
.hc-tile-acc .hc-sketch .hl, .hc-tile-acc .hc-sketch .hl-box { fill: #fff; opacity: .45; }

/* ---------- inner pages: header illustration ---------- */
.hc-head.hc-head-art, .page-heading.hc-head-art { position: relative; padding-right: clamp(0px, 28vw, 300px); }
.hc-head-sketch { position: absolute; right: 0; bottom: 0; width: clamp(180px, 22vw, 270px); pointer-events: none; }
@media (max-width: 760px) {
    .hc-head.hc-head-art, .page-heading.hc-head-art { padding-right: 0; }
    .hc-head-sketch { position: static; width: 150px; margin: 18px 0 0; }
}

/* ---------- empty states and errors ---------- */
.empty-state .hc-empty-art { width: 170px; margin: 0 auto 10px; }
.hc-error { position: relative; }
.hc-error-art { width: min(320px, 70vw); margin: 0 0 8px -10px; }

@media (prefers-reduced-motion: reduce) {
    .hc-project-card:hover .hc-project-art, .hc-tile:hover .hc-tile-art { transform: none; }
}