/* 401 LAB demo · shared base. Tokens come from tokens.css (generated from sdlc/design/tokens.json). */
@font-face{font-family:Switzer;font-weight:300;font-display:swap;src:url(../fonts/switzer-300.woff2) format("woff2")}
@font-face{font-family:Switzer;font-weight:400;font-display:swap;src:url(../fonts/switzer-400.woff2) format("woff2")}
@font-face{font-family:Switzer;font-weight:500;font-display:swap;src:url(../fonts/switzer-500.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:400;font-display:swap;src:url(../fonts/lato-400.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:700;font-display:swap;src:url(../fonts/lato-700.woff2) format("woff2")}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.no-motion{scroll-behavior:auto}
body{margin:0;font-family:var(--font-family-text);font-size:var(--font-size-body);font-weight:var(--font-weight-regular);line-height:1.5;color:var(--color-text-on-light);background:var(--color-surface-light);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--color-accent-base);outline-offset:var(--space-1)}
.on-dark :focus-visible,.dark :focus-visible{outline-color:var(--color-text-on-dark)}
.skip{position:absolute;left:var(--space-3);top:-100px;z-index:100;background:var(--color-text-on-light);color:var(--color-surface-light);padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill)}
.skip:focus{top:var(--space-3)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{font-family:var(--font-family-label);font-size:var(--font-size-label);letter-spacing:var(--font-tracking-label);text-transform:uppercase}
.display{font-weight:var(--font-weight-light);font-size:clamp(2.5rem,7vw,var(--font-size-display));line-height:1.04}
.headline{font-weight:var(--font-weight-light);font-size:clamp(2rem,4.6vw,var(--font-size-headline));line-height:1.1}
.icon{display:inline-flex;width:var(--space-4);height:var(--space-4)}
.icon svg{width:100%;height:100%}
.wrap{width:min(100% - var(--space-5)*2,1280px);margin-inline:auto}
@media (max-width:640px){.wrap{width:min(100% - var(--space-4)*2,1280px)}}
/* reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(var(--space-4));transition:opacity var(--motion-duration-slow) var(--motion-easing-standard),transform var(--motion-duration-slow) var(--motion-easing-standard);transition-delay:calc(var(--d,0) * 80ms)}
[data-reveal].is-in{opacity:1;transform:none}
.no-motion [data-reveal]{opacity:1;transform:none;transition:none}
/* form */
.field{display:grid;gap:var(--space-1)}
.field .label{color:var(--color-text-muted-on-light)}
.field input,.field textarea{background:transparent;border:var(--border-hairline) solid var(--color-grey-line);border-radius:var(--radius-sm);padding:var(--space-3);transition:border-color var(--motion-duration-fast)}
.field input:hover,.field textarea:hover{border-color:var(--color-text-muted-on-light)}
.field input:focus,.field textarea:focus{border-color:var(--color-accent-base);outline:none}
.field [aria-invalid=true]{border-color:var(--color-text-on-light)}
.err{color:var(--color-text-on-light);font-size:var(--font-size-label)}
.err::before{content:"✕ "}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;border:var(--border-hairline) solid var(--color-text-on-light);background:var(--color-text-on-light);color:var(--color-surface-light);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);text-decoration:none;transition:background var(--motion-duration-base) var(--motion-easing-standard),color var(--motion-duration-base) var(--motion-easing-standard)}
.btn::before{content:"";width:var(--space-2);height:var(--space-2);border-radius:var(--radius-pill);background:currentColor}
.btn:hover{background:var(--color-accent-base);border-color:var(--color-accent-base)}
.btn.ghost{background:transparent;color:var(--color-text-on-light)}
.btn.ghost:hover{background:var(--color-grey-line);color:var(--color-text-on-light)}
.on-dark .btn,.dark .btn{background:var(--color-text-on-dark);border-color:var(--color-text-on-dark);color:var(--color-surface-dark)}
.on-dark .btn.ghost,.dark .btn.ghost{background:transparent;color:var(--color-text-on-dark);border-color:var(--color-stroke-on-dark)}
.on-dark .btn.ghost:hover,.dark .btn.ghost:hover{border-color:var(--color-text-on-dark);background:transparent}
[data-status][data-state=ok]{color:var(--color-text-on-light)}
.lang{display:inline-flex;gap:var(--space-2)}
.lang button{background:none;border:0;cursor:pointer;padding:var(--space-1);opacity:.5;font:inherit;letter-spacing:inherit;text-transform:inherit}
.lang button[aria-pressed=true]{opacity:1;text-decoration:underline;text-underline-offset:var(--space-1)}
/* black-and-white image that takes colour (hover, focus or tap) */
.bw img{filter:grayscale(1);transition:filter var(--motion-duration-slow) var(--motion-easing-standard)}
.has-hover .bw:hover img,.bw:focus-within img,.bw.is-color img{filter:grayscale(0)}
.no-motion .bw img{transition:none}