/* ============================================
   TEEZZY — Base / Reset / Typography
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body{
  max-width: 100%;
  margin:0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: break-word;
}
img, svg, iframe, video{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; max-width: 100%; }
table{ max-width: 100%; }

h1,h2,h3,h4,.font-serif{
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
}

.eyebrow{
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.text-muted{ color: var(--color-text-muted); }
.text-faint{ color: var(--color-text-faint); }

.wrap{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 6rem);
  width: 100%;
}

.section{
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (max-width: 768px){
  .section{ padding-top: 3rem; padding-bottom: 3rem; }
}

/* Scrollbar (subtle, non-essential) */
::selection{ background: var(--color-accent); color: var(--color-bg); }

/* Skip link for accessibility */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--color-accent); color:var(--color-bg);
  padding:.75rem 1.25rem; z-index:999; font-size:.85rem;
}
.skip-link:focus{ left: 1rem; top: 1rem; }