/* Work categories share the existing cards; inactive work stays in the document. */
.work-category-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 22px}
.work-category-tabs{position:relative;display:inline-flex;align-items:stretch;gap:4px;padding:4px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--text) 2.5%,transparent);isolation:isolate;max-width:100%}
.work-category-marker{position:absolute;top:4px;left:4px;bottom:4px;width:0;border:1px solid color-mix(in srgb,var(--text) 13%,transparent);border-radius:6px;background:linear-gradient(120deg,color-mix(in srgb,var(--text) 7%,transparent),color-mix(in srgb,var(--text) 3%,transparent));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 5%,transparent),0 2px 5px #0000000a;pointer-events:none;z-index:-1}
.work-category-tabs[data-ready="true"] .work-category-marker{transition:transform .34s cubic-bezier(.22,.75,.2,1),width .34s cubic-bezier(.22,.75,.2,1)}
.work-category-tab{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:40px;padding:9px 17px;border:0;border-radius:6px;background:none;color:var(--faint);font:12px/1.5 Consolas,"Cascadia Code",monospace;white-space:nowrap;cursor:pointer;transition:color .2s ease}
.work-category-tab[aria-selected="true"]{color:var(--text)}
.work-category-tab:hover{color:var(--text)}
.work-category-tab:focus-visible{outline:1px solid var(--muted);outline-offset:3px}
.work-category-tab-count{font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
.work-category-tab[aria-selected="true"] .work-category-tab-count{color:var(--muted)}
.work-category-stage{position:relative;min-width:0;overflow-anchor:none}
.work-category-panel{min-width:0;display:flow-root}
.work-category-panel[hidden]{display:none!important}
.work-category-panel:focus-visible{outline:1px solid var(--line);outline-offset:6px;border-radius:8px}
.work-category-panel .wb-grid{margin:0}
.work-category-panel .small-projects{margin-bottom:0!important}
.work-categories-enabled .portfolio-heading>.section-count{display:none}
.work-websites-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:320px;padding:38px 24px 40px;border:1px solid var(--line);border-radius:12px;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--text) 2.5%,transparent),transparent 70%);text-align:center}
.work-empty-browser{width:188px;height:94px;margin:0 0 25px;border:1px solid color-mix(in srgb,var(--text) 15%,transparent);border-radius:7px;transform:rotate(-4deg);box-shadow:12px 9px 0 -1px var(--bg),12px 9px 0 0 color-mix(in srgb,var(--text) 6%,transparent);color:var(--faint);user-select:none}
.work-empty-browser-bar{display:flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
.work-empty-browser-bar i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.65}
.work-empty-browser-address{display:flex;align-items:center;justify-content:center;height:70px;gap:8px;font:11px/1.5 Consolas,monospace;letter-spacing:-.2px}
.work-empty-browser-address::after{content:'';display:block;width:47px;height:1px;background:color-mix(in srgb,var(--text) 18%,transparent)}
.work-websites-empty h3{margin:0 0 9px;font:500 21px/1.35 "Segoe UI",Arial,sans-serif;letter-spacing:-.5px;color:var(--text)}
.work-websites-empty p{max-width:390px;margin:0;color:var(--muted);font:14px/1.7 "Segoe UI",Arial,sans-serif}
.work-websites-list:empty{display:none}
.work-category-toolbar[hidden],.work-websites-empty[hidden]{display:none!important}
@media(max-width:600px){.work-category-toolbar{margin-bottom:18px}.work-category-tab{min-height:44px;padding:9px 15px;gap:12px}.work-websites-empty{min-height:300px;padding:32px 20px}.work-websites-empty h3{font-size:19px}.work-websites-empty p{font-size:13px}}
@media(max-width:360px){.work-category-tab{padding:9px 13px;gap:9px}.work-category-tabs{gap:2px}}
@media(prefers-reduced-motion:reduce){.work-category-marker,.work-category-tab{transition:none!important}}

/* Text categories sit beside the work heading; the caption gets its own quiet row. */
.work-category-tabs{gap:18px;padding:0;border:0;border-radius:0;background:none}
.work-category-marker{top:auto;left:0;bottom:0;height:1px;border:0;border-radius:0;background:var(--text);box-shadow:none}
.work-category-tab{gap:8px;min-height:34px;padding:8px 0;border-radius:0;font-size:11px}
.work-category-tab-count{font-size:10px}
.work-category-tab-label{display:inline-block;white-space:nowrap}
.work-category-letter{display:inline-block;width:1ch;text-align:center;transform-origin:50% 80%}
html body:is(.home-page,.portfolio-page) .work-heading-tabs>.work-category-toolbar{grid-column:2;grid-row:1;justify-self:start;min-width:0;margin:0}
html body.home-page #works>.section-heading.work-heading-tabs,
html body.portfolio-page .portfolio-section>.section-heading.work-heading-tabs{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;align-items:center;column-gap:18px;row-gap:9px}
html body:is(.home-page,.portfolio-page) .work-heading-tabs>.section-heading-title{grid-column:1;grid-row:1;min-width:0}
html body.home-page #works .work-heading-tabs>.works-heading-hint{grid-column:3;grid-row:1;justify-self:end;max-width:none;margin:0;white-space:nowrap}
html body.home-page #works .work-heading-tabs>.works-heading-note{grid-column:1 / 3;grid-row:2;display:block;justify-self:start;align-self:center;max-width:100%;margin:0;text-align:left}
html body.home-page #works .work-heading-tabs>.works-heading-wip{grid-column:3;grid-row:2;justify-self:end;align-self:center;margin:0}
@media(max-width:600px){
 html body.home-page #works>.section-heading.work-heading-tabs,
 html body.portfolio-page .portfolio-section>.section-heading.work-heading-tabs{grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:10px}
 html body:is(.home-page,.portfolio-page) .work-heading-tabs>.work-category-toolbar{grid-column:1 / -1;grid-row:2}
 html body.home-page #works .work-heading-tabs>.works-heading-hint{grid-column:2;grid-row:1;max-width:116px;white-space:normal;text-align:right;font-size:10px}
 html body.home-page #works .work-heading-tabs>.works-heading-note{grid-column:1;grid-row:3;max-width:100%;margin:0}
 html body.home-page #works .work-heading-tabs>.works-heading-wip{grid-column:2;grid-row:3;align-self:start}
 .work-category-tabs{gap:20px}
 .work-category-tab{min-height:44px;padding:10px 0;gap:8px}
}
@media(pointer:coarse){.work-category-tab{min-height:44px}}
html body:is(.home-page,.portfolio-page) .work-heading-tabs :is(h2,.works-heading-note,.works-heading-hint){height:auto!important}
html body:is(.home-page,.portfolio-page) .work-heading-tabs h2{white-space:nowrap}
html body.home-page #works .work-heading-tabs>.section-heading-title{grid-column:1;grid-row:1}
@media(max-width:600px){
 html body.home-page #works .work-heading-tabs>.works-heading-note{grid-column:1 / -1;padding-right:35px;box-sizing:border-box}
}
@media(max-width:360px){
 html body.home-page #works .work-heading-tabs>.section-heading-title{grid-column:1 / -1;grid-row:1}
 html body.home-page #works .work-heading-tabs>.work-category-toolbar{grid-column:1;grid-row:2}
 html body.home-page #works .work-heading-tabs>.works-heading-hint{grid-column:2;grid-row:2}
}
/* End text work heading. */

/* A compact, quieter introduction belongs to the standalone portfolio. */
html body.portfolio-page .topbar{border-bottom:0;min-height:62px}
html body.portfolio-page .portfolio-return{min-height:44px;padding:0;margin:0;align-items:center}
html body.portfolio-page .portfolio-home-link:hover{transform:none}
html body.portfolio-page .portfolio-hero{padding:0 0 12px}
html body.portfolio-page .portfolio-hero h1{margin:8px 0 12px;font-size:clamp(38px,4.6vw,56px);font-weight:500;line-height:1.1;letter-spacing:-.045em}
html body.portfolio-page .portfolio-hero>p{max-width:700px;font-size:15px;line-height:1.65}
html body.portfolio-page .portfolio-contact{margin-top:14px}
html body.portfolio-page .portfolio-section{padding-top:6px}
html body.portfolio-page .portfolio-heading{padding-block:12px;margin-bottom:11px}
html body.portfolio-page .site-footer{margin-top:20px;padding-top:14px}
html body.portfolio-page .small-projects>summary{min-height:48px;padding-block:9px}
html body.portfolio-page .work-websites-empty{min-height:270px;padding:30px 24px}
html body.portfolio-page .work-category-symbol{display:inline-flex;align-items:center;justify-content:center;align-self:center;flex:0 0 16px;width:16px;height:18px;padding:0;line-height:0;color:var(--faint)}
html body.portfolio-page .work-category-symbol svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){
 html body.portfolio-page .topbar{min-height:0;padding-block:10px 6px}
 html body.portfolio-page .portfolio-return{min-height:42px}
 html body.portfolio-page .portfolio-hero{padding:0 0 10px}
 html body.portfolio-page .portfolio-hero h1{font-size:clamp(36px,8.4vw,48px)}
 html body.portfolio-page .portfolio-hero>p{font-size:14px}
 html body.portfolio-page .portfolio-contact{margin-top:12px}
 html body.portfolio-page .work-websites-empty{min-height:270px;padding:26px 20px}
}
html body.portfolio-page .work-category-symbol :is(g,path){transform-box:fill-box;transform-origin:center}
/* End compact portfolio. */


/* Category changes keep the viewport and its ambient field in place. */
html:has(>body:is(.home-page,.portfolio-page)){scrollbar-gutter:stable}
html:not([data-night-mode="on"]) body.portfolio-page{isolation:isolate;background-image:none}
html:not([data-night-mode="on"]) body.portfolio-page::before{
 content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(ellipse 46vw 510px at 94% 4%,hsl(var(--palette-hue) 68% 60% / .105),transparent 100%),radial-gradient(ellipse 32vw 570px at -7% 48%,hsl(calc(var(--palette-hue) - 82) 58% 57% / .065),transparent 100%);
}
html:not([data-night-mode="on"])[data-theme="light"] body.portfolio-page::before{display:none}
/* End category viewport stability. */

/* Keep Home centered in the space between the brand and portfolio label. */
html body.portfolio-page .portfolio-return{position:relative;top:-6px}
@media(min-width:641px) and (max-width:760px){html body.portfolio-page .portfolio-return{top:-10.75px}}
@media(max-width:640px){html body.portfolio-page .portfolio-return{top:-5.75px}}
/* The opening hint belongs above the cards; the status note closes Projects. */
html body.portfolio-page .work-heading-tabs>.works-heading-note{grid-column:1 / -1;grid-row:2;display:block;max-width:100%;margin:0;text-align:left;font:11px/1.55 Consolas,monospace;color:var(--faint)}
@media(max-width:600px){html body.portfolio-page .work-heading-tabs>.works-heading-note{grid-row:3}}
/* End portfolio header and copy refinement. */


/* Websites blueprint: transparent lines preserve the empty state's reserved size. */
.work-empty-browser[data-empty-blueprint]{width:188px;height:94px;transform:none;box-shadow:none;background:transparent;border-color:color-mix(in srgb,var(--text) 17%,transparent);color:var(--muted);overflow:hidden;pointer-events:none}
.work-empty-browser[data-empty-blueprint]>svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.work-empty-browser[data-empty-blueprint]>svg>g{opacity:1;transform:none}
.work-empty-browser[data-empty-blueprint="waiting"]>svg>g{opacity:0}
@media(prefers-reduced-motion:reduce){.work-empty-browser[data-empty-blueprint]>svg>g{opacity:1;transform:none}}
/* End Websites blueprint styles. */