/* A website card and reader complement the existing project quick view. */
.portfolio-page .work-websites-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.website-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--text) 3%,transparent);box-shadow:inset 0 1px 0 #ffffff07;transition:border-color .22s ease,background .22s ease}
.website-card:hover{border-color:color-mix(in srgb,var(--accent) 48%,var(--line));background:color-mix(in srgb,var(--text) 4.5%,transparent)}
.website-card-button{display:block;width:100%;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--text);text-align:left;cursor:pointer;font:inherit}
.website-card-button:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:18px}
.website-card-media{display:block;overflow:hidden;aspect-ratio:16/10;background:#f7f7fb;border-bottom:1px solid var(--line)}
.website-card-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .55s cubic-bezier(.22,.75,.2,1)}
.website-theme-split{position:relative;background:#f8f7fd}
.website-theme-pane{position:absolute;inset:0;display:block;height:100%;overflow:hidden}
.website-theme-indigo{clip-path:polygon(0 0,100% 0,0 100%)}
.website-theme-graphite{background:#151817;border:0;clip-path:polygon(100% 0,100% 100%,0 100%)}
.website-theme-pane img{object-position:center top}
.website-card-copy{display:flex;flex-direction:column;gap:13px;padding:12px 25px 20px}
.website-card-top{display:flex;align-items:center;justify-content:space-between;gap:15px}
.website-card-kicker{color:var(--muted);font:11px/1.5 Consolas,"Cascadia Code",monospace}
.website-card-arrow{display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;color:var(--accent);line-height:0;transition:transform .28s ease,border-color .22s ease}
.website-card-title{margin-top:-8px;color:var(--text);font:600 31px/1.15 "Segoe UI",Arial,sans-serif;letter-spacing:-.8px}
.website-card-description{max-width:49ch;margin:0;color:var(--muted);font:14px/1.65 "Segoe UI",Arial,sans-serif}
.website-card-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:1px}
.website-card-tag{padding:5px 10px;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));border-radius:6px;color:var(--muted);background:color-mix(in srgb,var(--accent) 5%,transparent);font:12px/1.5 Consolas,"Cascadia Code",monospace}
.website-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 25px;padding:14px 0 18px;border-top:1px solid var(--line);font:10px/1.5 Consolas,"Cascadia Code",monospace}
.website-card-hint{color:var(--faint)}
.website-card-fallback{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.website-card-fallback:hover{color:var(--text);border-color:var(--muted)}
.website-card-fallback:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
html.website-preview-open{overflow:hidden;scrollbar-gutter:stable}
.wb-dialog.wb-website-dialog{width:min(1180px,calc(100% - 48px));height:min(880px,calc(100dvh - 48px));max-height:calc(100dvh - 48px)}
.wb-website-dialog>.wb-header{display:flex;align-items:center;justify-content:space-between;padding:16px 25px;gap:18px}
.wb-website-dialog .wb-header-main{display:flex;flex-direction:column;gap:5px;min-width:0}
.wb-website-dialog .wb-header .wb-eyebrow{min-height:0;margin:0;font-size:10px;line-height:1.4}
.wb-website-dialog .wb-header h2{margin:0;line-height:1.2}
.wb-website-dialog .wb-header h2{font-size:23px}
.wb-website-dialog .wb-close{display:flex;align-items:center;gap:10px}
.website-close-mark{font:22px/1 "Segoe UI",Arial,sans-serif;transform:translateY(-1px)}
.website-preview-notice{flex:none;margin:0;padding:15px 25px;border-bottom:1px solid var(--wb-glass-line,var(--line));color:var(--muted);background:color-mix(in srgb,var(--accent) 4%,transparent);font:12px/1.6 "Segoe UI",Arial,sans-serif}
.website-preview-stage{position:relative;flex:1 1 auto;min-width:0;min-height:180px;overflow:hidden;background:#f7f7fb}
.website-preview-frame{display:block;width:100%;height:100%;border:0;background:#f7f7fb;color-scheme:normal}
.website-preview-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:30px;color:#53566e;background:#f7f7fb;text-align:center;font:14px/1.6 "Segoe UI",Arial,sans-serif}
.website-preview-loading[hidden],.website-preview-loading [hidden]{display:none!important}
.website-preview-loading:before{content:"";flex:none;width:15px;height:15px;border:2px solid #d8daeb;border-top-color:#3d4bc7;border-radius:50%;animation:website-load-spin .8s linear infinite}
.website-preview-stage[data-state="slow"] .website-preview-loading:before{display:none}
.website-preview-slow-text{max-width:36ch}
.wb-website-dialog>.wb-footer{padding:13px 25px;gap:15px}
.wb-website-dialog>.wb-footer p{max-width:none;font-size:10px}
.website-open-separately{text-decoration:none;text-align:center}
.wb-website-dialog .website-open-separately::after{content:none}
@keyframes website-load-spin{to{transform:rotate(360deg)}}
@media(hover:hover) and (pointer:fine){.website-card-button:hover .website-card-media img{transform:scale(1.025)}.website-card-button:hover .website-card-arrow{transform:translate(2px,-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}}
@media(max-width:760px){.portfolio-page .work-websites-list{grid-template-columns:minmax(0,1fr)}.website-card{max-width:640px}.website-card-copy{padding:10px 21px 18px}.website-card-footer{margin:0 21px}.wb-dialog.wb-website-dialog{width:calc(100% - 20px);height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);border-radius:14px}.wb-website-dialog>.wb-header{padding:14px 16px}.website-preview-notice{padding:12px 16px;font-size:11px;line-height:1.55}.wb-website-dialog>.wb-footer{padding:12px 16px}.wb-website-dialog>.wb-footer p{max-width:22ch}}
@media(max-width:400px){.website-card-copy{gap:11px}.website-card-title{font-size:28px}.website-card-description{font-size:13px}.website-card-kicker{font-size:10px}.wb-website-dialog>.wb-footer{align-items:center;gap:10px}.wb-website-dialog>.wb-footer p{font-size:9px;max-width:18ch}.wb-website-dialog .website-open-separately{font-size:10px;padding:8px 10px}.wb-website-dialog .wb-close{font-size:11px;padding:8px 10px}.website-preview-stage{min-height:140px}}
@media(prefers-reduced-motion:reduce){.website-card,.website-card-media img,.website-card-arrow,.website-card-fallback{transition:none}.website-card-button:hover .website-card-media img,.website-card-button:hover .website-card-arrow{transform:none}.website-preview-loading:before{animation:none}.wb-website-dialog::backdrop{animation:none}}

.website-card-arrow svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Website label glass: one finite highlight, matching project tag motion. */
.website-card-tag{position:relative;display:inline-flex;isolation:isolate;overflow:hidden;transform-origin:center;transition:color .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.website-card-tag-copy{position:relative;z-index:1}
.website-card-tag-light{position:absolute;inset:0;pointer-events:none;user-select:none;border-radius:inherit;opacity:0;transform:translateX(-110%);background:linear-gradient(115deg,transparent 15%,color-mix(in srgb,var(--accent) 17%,transparent) 45%,color-mix(in srgb,var(--text) 24%,transparent) 50%,transparent 78%)}
.website-card-button:focus-visible .website-card-tag{color:var(--text);border-color:color-mix(in srgb,var(--accent) 62%,var(--line));background:color-mix(in srgb,var(--accent) 11%,transparent);box-shadow:0 3px 12px color-mix(in srgb,var(--accent) 10%,transparent),inset 0 1px 0 color-mix(in srgb,var(--accent) 12%,transparent)}
@media(hover:hover) and (pointer:fine){.website-card-tag:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 62%,var(--line));background:color-mix(in srgb,var(--accent) 11%,transparent);box-shadow:0 3px 12px color-mix(in srgb,var(--accent) 10%,transparent),inset 0 1px 0 color-mix(in srgb,var(--accent) 12%,transparent);transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){.website-card-tag{transition:none}.website-card-tag:hover{transform:none}.website-card-tag-light{display:none}}
@media(forced-colors:active){.website-card-tag-light{display:none}.website-card-button:focus-visible .website-card-tag,.website-card-tag:hover{border-color:Highlight;box-shadow:none}}
/* End website label glass. */

/* Website metadata: status has a stable hue; the second chip names the business. */
.website-card-tag[data-site-status="demo"]{--site-status-ink:#efc477;--site-status-accent:#d9a74d}
.website-card-tag[data-site-status="client"]{--site-status-ink:#8ed7ad;--site-status-accent:#69b68b}
html[data-theme="light"] .website-card-tag[data-site-status="demo"]{--site-status-ink:#805a15;--site-status-accent:#b07d23}
html[data-theme="light"] .website-card-tag[data-site-status="client"]{--site-status-ink:#276347;--site-status-accent:#3b8c61}
.website-card-tag[data-site-status]{--accent:var(--site-status-accent);color:var(--site-status-ink);border-color:color-mix(in srgb,var(--accent) 44%,var(--line));background:color-mix(in srgb,var(--accent) 9%,transparent)}
.website-card-button:focus-visible .website-card-tag[data-site-status]{color:var(--site-status-ink)}
@media(hover:hover) and (pointer:fine){.website-card-tag[data-site-status]:hover{color:var(--site-status-ink)}}
@media(forced-colors:active){.website-card-tag[data-site-status]{color:ButtonText;border-color:ButtonText;background:Canvas;box-shadow:none}.website-card-button:focus-visible .website-card-tag[data-site-status],.website-card-tag[data-site-status]:hover{color:Highlight;border-color:Highlight}}
/* End website metadata. */