/* ============================================================
   DevCo · Base — reset, document, typography, layout primitives
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body.devco-site{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.devco-site img,
body.devco-site svg,
body.devco-site video{display:block;max-width:100%;}
body.devco-site h1,
body.devco-site h2,
body.devco-site h3,
body.devco-site h4,
body.devco-site p,
body.devco-site figure,
body.devco-site ul,
body.devco-site ol{margin:0;}
body.devco-site ul,
body.devco-site ol{list-style:none;padding:0;}
body.devco-site a{color:inherit;text-decoration:none;}
body.devco-site em,
body.devco-site i{font-style:italic;}
body.devco-site ::selection{background:var(--accent);color:var(--bone);}
body.devco-site button{font-family:inherit;}

/* visible keyboard focus — accessibility */
body.devco-site a:focus-visible,
body.devco-site button:focus-visible{
  outline:var(--hair) solid var(--accent);
  outline-offset:4px;
}

/* — Layout primitives — */
.dc-shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%;}
.dc-section{position:relative;padding-block:var(--section-pad);overflow:clip;}
.dc-section--tight{padding-block:var(--section-pad-sm);}

/* — Section ground themes — */
.sec--dark{background:var(--ink);color:var(--bone);}
.sec--light{background:var(--bone);color:var(--ink);}
.sec--paper{background:var(--paper);color:var(--ink);}

/* — Display type — */
.dc-d1,.dc-d2,.dc-d3{
  font-family:var(--font-display);font-weight:400;
  letter-spacing:var(--tracking-display);line-height:var(--lh-display);
}
.dc-d1{font-size:var(--fs-display-1);}
.dc-d2{font-size:var(--fs-display-2);}
.dc-d3{font-size:var(--fs-display-3);line-height:1.16;}
.dc-statement{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-statement);line-height:1.22;
  letter-spacing:-.01em;
}
.dc-lead{font-size:var(--fs-lead);line-height:1.55;}
.dc-body{font-size:var(--fs-body);line-height:var(--lh-body);}

/* — Tone helpers — */
.t-soft{color:var(--bone-soft);}   .sec--light .t-soft,.sec--paper .t-soft{color:var(--ink-soft);}
.t-faint{color:var(--bone-faint);} .sec--light .t-faint,.sec--paper .t-faint{color:var(--ink-faint);}
.t-accent{color:var(--accent);}

/* — Hairlines — */
.dc-hair{display:block;height:var(--hair);width:100%;background:currentColor;opacity:.18;}
.dc-hair--v{width:var(--hair);height:100%;}

/* skip link */
.dc-skip{position:absolute;left:-9999px;top:0;z-index:9999;}
.dc-skip:focus{left:var(--gutter);top:12px;background:var(--accent);color:var(--bone);
  padding:10px 18px;font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;}