/* Shared portfolio foundations. The 22px corner is a chosen shape, not a spacing unit. */
:root{
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-24:96px;
 --layout-max:1320px;--layout-gutter:clamp(20px,4vw,64px);--layout-gap:24px;--layout-section:clamp(48px,7vw,112px);
 --text-body-leading:24px;--text-label-leading:16px;--text-control-leading:20px;
 --ui-radius:22px;--ui-height:44px;--ui-gap:12px;
}
.wrap{width:min(var(--layout-max),calc(100% - var(--layout-gutter)*2))}
.web-overview-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-12) var(--layout-gap)}
.web-overview-card{grid-column:span 3}.cards{column-gap:var(--layout-gap);row-gap:var(--space-12)}
.browser-projects{gap:var(--space-3)}.browser-project{padding:var(--space-4);gap:var(--space-4)}
.browser-project strong{line-height:var(--text-control-leading)}.browser-project small{line-height:var(--text-label-leading);margin-top:var(--space-1)}
.browser-tabs{gap:var(--space-3)}.browser-tabs button,.archive-pills a,.journey-scroll{line-height:var(--text-control-leading)}
.web-overview-card h3{margin-top:var(--space-4);margin-bottom:var(--space-2);line-height:32px}.web-overview-card p{line-height:var(--text-control-leading)}
@media(max-width:700px){:root{--layout-gap:16px}.web-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-8)}.web-overview-card{grid-column:1/-1}.browser-projects{gap:var(--space-3)}.browser-project{padding:var(--space-3);gap:var(--space-3)}.browser-tabs{gap:var(--space-3)}}
/* Optional browser QA overlay. Enable with ?grid=1; never shown by default. */
html[data-layout-grid] body::after{content:'';position:fixed;z-index:2147483646;inset:0 var(--layout-gutter);pointer-events:none;opacity:.2;background-image:repeating-linear-gradient(0deg,#b9d8b6 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#f2b28c 0 1px,transparent 1px calc((100% - 120px)/6),#e2b88d22 calc((100% - 120px)/6) calc((100% - 120px)/6 + 24px));max-width:var(--layout-max);margin:auto}
@media(max-width:700px){html[data-layout-grid] body::after{background-image:repeating-linear-gradient(0deg,#b9d8b6 0 1px,transparent 1px 4px),linear-gradient(90deg,transparent calc(50% - 8px),#e2b88d55 calc(50% - 8px) calc(50% + 8px),transparent calc(50% + 8px))}}
/* Shared web-work grouping; retain the same grid, edges and control geometry. */
.web-section-intro{max-width:72ch;margin-bottom:var(--space-8)}
.web-section-intro h2{font-size:clamp(28px,3vw,42px);line-height:1.15;margin:var(--space-3) 0 var(--space-4)}
.web-section-intro p{line-height:1.5}
.web-work-nav{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.web-work-nav a{display:inline-flex;align-items:center;min-height:var(--ui-height);padding:var(--space-3) var(--space-5);border:1px solid #c7d6bc40;border-radius:var(--ui-radius);text-decoration:none;background:#65816912}
.web-work-nav a:hover{background:#6581692a}
.web-overview-card .web-work-kind{font-size:12px;line-height:16px;color:#d6c19f;margin:var(--space-4) 0 var(--space-2)}
.web-overview-card .web-work-kind+h3{margin-top:0}
.web-overview section[id]{scroll-margin-top:96px}