/* DreamBug UI kit: base. Load order: tokens.css, base.css, then css/components/*.css. */
@font-face{font-family:"Baloo 2";font-weight:400 800;font-style:normal;font-display:swap;src:url("../assets/fonts/baloo2.woff2") format("woff2")}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark}
body{margin:0;font-family:var(--db-font);font-weight:500;font-size:var(--db-fs-body);line-height:var(--db-lh-body);
  color:var(--fg);background:var(--db-night-bottom);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--db-focus);outline-offset:3px;border-radius:6px}
::selection{background:rgba(255,206,92,.35);color:var(--db-ink)}

/* ---- type ---- */
h1,h2,h3,h4{margin:0;font-weight:700;line-height:var(--db-lh-head);letter-spacing:-.01em;text-wrap:balance}
.db-display{font-size:var(--db-fs-display);font-weight:800;line-height:var(--db-lh-tight);letter-spacing:-.02em}
.db-h2{font-size:var(--db-fs-h2);font-weight:800;line-height:var(--db-lh-tight);letter-spacing:-.015em}
.db-h3{font-size:var(--db-fs-h3);font-weight:700}
.db-lead{font-size:var(--db-fs-lead);color:var(--fg-muted);max-width:38ch;text-wrap:pretty}
p{margin:0;text-wrap:pretty}
.db-eyebrow{display:inline-block;font-size:var(--db-fs-label);font-weight:800;letter-spacing:var(--db-track-label);
  text-transform:uppercase;color:var(--db-gold)}
.db-light .db-eyebrow{color:var(--db-gold-ink)}
.db-gold-word{color:var(--db-gold)}           /* one highlighted word in a headline, like "bug" in the wordmark */
.db-light .db-gold-word{color:var(--db-gold-ink)}
.db-num{font-variant-numeric:tabular-nums}

/* ---- layout ---- */
.db-container{width:min(100% - 2*var(--db-gutter), var(--db-container));margin-inline:auto}
.db-section{position:relative;padding-block:var(--db-section-y);isolation:isolate}
.db-stack{display:flex;flex-direction:column;gap:var(--db-s4)}
.db-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--db-s3)}
.db-split{display:grid;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.db-split{grid-template-columns:1fr 1fr}.db-split--wide-right{grid-template-columns:.85fr 1.15fr}}
.db-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---- grounds ---- */
.db-night{background:radial-gradient(120% 90% at 50% -10%, var(--db-night-top), var(--db-night-bottom) 70%);color:var(--db-ink)}
.db-deep{background:var(--db-navy-plate);color:var(--db-ink)}
.db-paper{background:var(--db-page);color:var(--db-ink-light)}

/* ---- skip link ---- */
.db-skip{position:absolute;left:1rem;top:-4rem;z-index:1000;background:var(--db-gold);color:var(--db-on-gold);
  padding:.7rem 1.1rem;border-radius:var(--db-r-pill);font-weight:700;text-decoration:none}
.db-skip:focus{top:1rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
