/* Real website captures are the work. Frames stay quiet and never crop them. */
.web-work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(38px,4.8vw,84px) 24px;padding-top:8px}
.web-work-item{min-width:0;--web-surface:oklch(93.5% .009 255)}
.web-work-feature{grid-column:1/-1}
.web-work-wide{grid-column:span 7}
.web-work-narrow{grid-column:span 5}
[data-project='scooch']{--web-surface:oklch(92% .015 235)}
[data-project='fortress-wipes']{--web-surface:oklch(92% .018 156)}
[data-project='dr-toms-blends']{--web-surface:oklch(94% .021 86)}
[data-project='iosue-law']{--web-surface:oklch(92% .013 255)}
[data-project='estgi']{--web-surface:oklch(92% .021 280)}
[data-project='employability-project']{--web-surface:oklch(93% .018 62)}
[data-project='glass-hands']{--web-surface:oklch(91% .012 330)}
.web-work-link{display:block;min-width:0}
.web-preview-pane{padding:clamp(16px,2.1vw,40px);background:var(--web-surface);overflow:hidden}
.web-work-feature .web-preview-pane{padding:clamp(18px,3vw,58px)}
.web-browser{width:100%;min-width:0;overflow:hidden;border:1px solid oklch(80% .012 255);border-radius:7px;background:oklch(98.5% .003 255);box-shadow:0 10px 24px oklch(25% .02 255 / .07);transform:translateZ(0);transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s}
.web-browser-bar{display:flex;align-items:center;justify-content:center;gap:15px;position:relative;height:clamp(22px,2.1vw,32px);padding:0 42px;border-bottom:1px solid oklch(85% .008 255);background:oklch(96.5% .004 255)}
.web-browser-controls{position:absolute;left:13px;top:50%;width:5px;height:5px;border-radius:50%;background:oklch(72% .009 255);box-shadow:8px 0 oklch(72% .009 255),16px 0 oklch(72% .009 255);transform:translateY(-50%)}
.web-browser-domain{font-size:10px;line-height:1;letter-spacing:.015em;color:oklch(49% .018 255);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.web-capture{width:100%;height:auto;display:block}
.web-work-caption{display:flex;align-items:baseline;justify-content:space-between;gap:10px 28px;flex-wrap:wrap;padding-top:17px}
.web-work-name{font-size:clamp(25px,2.35vw,38px);font-weight:550;line-height:1.12;letter-spacing:-.045em;max-width:27ch;text-wrap:balance;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:transparent;transition:text-decoration-color .2s}
.web-work-feature .web-work-name{font-size:clamp(30px,3.3vw,54px)}
.web-work-domain{font-size:13px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.web-work-link:hover .web-work-name,.web-work-link:focus-visible .web-work-name{text-decoration-color:currentColor}
.web-work-link:hover .web-browser,.web-work-link:focus-visible .web-browser{transform:translateY(-4px);box-shadow:0 14px 28px oklch(25% .02 255 / .11)}

.web-project-top{position:relative;isolation:isolate;padding:36px 0 44px}
.web-project-top .breadcrumbs{flex-wrap:wrap;line-height:1.5}
.web-project-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:28px 50px}
.web-project-title{font-size:clamp(42px,6.5vw,104px);line-height:1.06;max-width:20ch;text-wrap:balance;overflow-wrap:normal}
.web-live-link{flex:none;display:inline-block;padding:9px 0;font-size:16px;line-height:1.5;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.web-live-link:hover{text-decoration-thickness:2px}
.web-project-figure{display:flex;flex-direction:column;margin:0;min-width:0;--web-surface:oklch(93.5% .009 255)}
.web-project-pane{flex:1;padding:clamp(16px,3vw,58px);background:var(--web-surface)}
.web-project-views{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:24px;align-items:stretch;margin-top:clamp(24px,3vw,54px)}
.web-project-detail .web-project-pane{display:grid;align-items:center;padding:clamp(18px,2.7vw,52px)}
.web-project-mobile .web-project-pane{display:grid;place-items:center;padding:clamp(28px,3vw,58px) 24px}
.web-browser-mobile{max-width:clamp(230px,17vw,300px)}
.web-browser-mobile .web-browser-bar{height:28px}
.web-browser-mobile .web-browser-domain{font-size:9px}
.web-capture-caption{padding:12px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.web-related-work{padding-top:clamp(62px,6.4vw,110px)}
.web-related-work>h2{font-size:clamp(34px,4vw,60px);margin-bottom:28px}
.web-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.web-related-link{display:block;min-width:0}
.web-related-image{overflow:hidden;border:1px solid var(--line);background:oklch(94% .005 255)}
.web-related-image .web-capture{transition:transform .55s cubic-bezier(.16,1,.3,1)}
.web-related-link h3{margin:14px 0 0;font-size:clamp(21px,1.7vw,28px);font-weight:550;letter-spacing:-.035em;line-height:1.18;text-wrap:balance;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:transparent;transition:text-decoration-color .2s}
.web-related-link:hover h3,.web-related-link:focus-visible h3{text-decoration-color:currentColor}
.web-related-link:hover .web-capture,.web-related-link:focus-visible .web-capture{transform:scale(1.015)}

@media(max-width:950px){
 .web-work-wide,.web-work-narrow{grid-column:span 6}
 .web-work-caption{display:block}
 .web-work-domain{margin-top:8px}
 .web-project-heading{display:block}
 .web-live-link{margin-top:18px}
 .web-project-views{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
 .web-related-grid{gap:18px}
}
@media(max-width:650px){
 .web-work-grid{grid-template-columns:minmax(0,1fr);gap:34px;padding-top:0}
 .web-work-feature,.web-work-wide,.web-work-narrow{grid-column:auto}
 .web-preview-pane,.web-work-feature .web-preview-pane{padding:12px}
 .web-browser{border-radius:5px;box-shadow:0 6px 16px oklch(25% .02 255 / .06)}
 .web-browser-bar{height:23px;padding:0 38px}
 .web-browser-controls{left:10px;width:4px;height:4px;box-shadow:7px 0 oklch(72% .009 255),14px 0 oklch(72% .009 255)}
 .web-browser-domain{font-size:8px}
 .web-work-caption{padding-top:13px}
 .web-work-name,.web-work-feature .web-work-name{font-size:clamp(25px,6.6vw,34px);line-height:1.14}
 .web-work-domain{font-size:12px;margin-top:7px}
 .web-project-top{padding:25px 0 30px}
 .web-project-title{font-size:clamp(34px,10vw,55px);line-height:1.08;max-width:21ch}
 .web-project-heading .web-live-link{font-size:15px;margin-top:14px}
 .web-project-pane,.web-project-detail .web-project-pane{padding:12px}
 .web-project-views{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:24px}
 .web-project-mobile .web-project-pane{padding:30px 28px}
 .web-browser-mobile{max-width:320px}
 .web-capture-caption{padding-top:9px;font-size:12px}
 .web-related-work{padding-top:55px}
 .web-related-work>h2{font-size:34px;margin-bottom:24px}
 .web-related-grid{grid-template-columns:minmax(0,1fr);gap:28px}
 .web-related-link h3{font-size:23px;margin-top:11px}
}
@media(prefers-reduced-motion:reduce){
 .web-work-link:hover .web-browser,.web-work-link:focus-visible .web-browser,.web-related-link:hover .web-capture,.web-related-link:focus-visible .web-capture{transform:none}
}