/* ==========================================================================
   Shared brand ground for the lab.
   The two faces and the three colours are Strulen's own, from the style guide.
   Everything else in a component is the component's own decision.
   ========================================================================== */
@font-face{font-family:"Bomstad Display";src:url("fonts/bomstad-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --ink:#000000;
  --paper:#FFFFFF;
  --orange:#F92A00;
  --grey-mid:#808080;
  --grey-cool:#CFCFD1;
  --grey-light:#EBEBEB;

  --display:"Bomstad Display","Helvetica Neue",Arial,sans-serif;
  --text:"Poppins","Helvetica Neue",Arial,sans-serif;

  --t-note:0.8125rem;
  --gut:clamp(18px,3.2vw,56px);

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-draw:cubic-bezier(.4,0,.1,1);
  --ease-curtain:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{background:#000}
body{margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--text);font-weight:400;font-size:1.0625rem;line-height:1.45;
  -webkit-font-smoothing:antialiased}
@media (min-width:768px){ body{font-size:1.125rem} }
img,video,svg{display:block;max-width:100%}
figure,figcaption,p{margin:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;line-height:1;letter-spacing:-.03em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.note{font-family:var(--text);font-size:var(--t-note);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.3}
.shell{width:100%;max-width:1680px;margin-inline:auto;padding-inline:var(--gut)}

/* the lab's own chrome, not part of any component */
.lab{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:flex;flex-wrap:wrap;
  gap:8px 10px;align-items:center;padding:10px var(--gut);
  background:rgba(0,0,0,.82);backdrop-filter:blur(6px);
  border-top:1px solid rgba(255,255,255,.18)}
.lab__id{font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:-.02em;
  margin-right:6px}
.lab button,.lab a.lab__btn{border:1px solid rgba(255,255,255,.4);padding:7px 13px;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  transition:background .2s,color .2s,border-color .2s}
.lab button:hover,.lab a.lab__btn:hover{background:#fff;color:#000;border-color:#fff}
.lab__state{margin-left:auto;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey-mid)}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}