/* ==========================================================================
   LINE AND LIGHT: foundation
   Written from the Strulen brand style guide. Page citations are in
   deliverables/verified_brand.json. Nothing is carried over from the earlier
   rejected builds except the engineering lessons they taught.
   ========================================================================== */

/* Only the weights the page actually asks for are declared and shipped. */
@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{
  /* GUIDE p28, p29 */
  --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;

  /* GUIDE p35 roles. Body sits at the brand ceiling of 18px; leads use the
     guide's own Subheadline role at 20 to 22. */
  --t-body:1.125rem;
  --t-body-m:1.0625rem;
  --t-lead:clamp(1.25rem,.45vw + 1.14rem,1.375rem);
  --t-note:0.8125rem;
  --lh-body:1.45;

  --gut:clamp(18px,3.2vw,56px);
  --maxw:1680px;

  /* the datum: one horizontal reference that never moves */
  --datum:28vh;

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

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--text);font-weight:400;font-size:var(--t-body-m);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
@media (min-width:768px){ body{font-size:var(--t-body)} }

img,video,svg{display:block;max-width:100%}
/* the browser's own figure margin is 1em 40px and silently insets every
   picture from its frame */
figure,figcaption,blockquote,p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;
  line-height:1;letter-spacing:-0.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}

.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--orange);
  color:#000;padding:12px 18px;font-size:var(--t-note);font-weight:600}
.skip:focus{left:10px;top:10px}

/* The one annotation style this project allows itself. Information role,
   GUIDE p35, used for real metadata only. */
.note{font-family:var(--text);font-size:var(--t-note);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.3}

/* Text is readable before any script runs. The stagger lives in the
   transform; opacity is never delayed. */
[data-in]{opacity:1;transform:none}
html.js [data-in]:not(.is-in){opacity:0;transform:translateY(16px)}
html.js [data-in]{transition:opacity .5s var(--ease),transform .7s var(--ease);
  transition-delay:0ms,var(--d,0ms)}

@media (prefers-reduced-motion:reduce){
  html.js [data-in]:not(.is-in){opacity:1;transform:none}
  html.js [data-in]{transition:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}