/* ----------------------------------------------------------------
   Vessel — Brand System Explorations
   Shared canvas styles + font registrations
   ---------------------------------------------------------------- */

/* Matter (existing brand typeface) */
@font-face {
  font-family: 'Matter';
  src: url('assets/fonts/matter-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Matter';
  src: url('assets/fonts/matter-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Matter';
  src: url('assets/fonts/matter-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Matter';
  src: url('assets/fonts/matter-semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

html, body {
  margin: 0;
  background: #f0eee9;
  font-family: 'Matter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Artboard reset (each artboard is its own little world) ---------- */
.ab {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-feature-settings: "ss01", "ss02", "cv01";
}
.ab img { display: block; }
.ab * { box-sizing: border-box; }

/* ---------- Intro / brief artboard ---------- */
.brief {
  background: #1a1714;
  color: #e7e3dc;
  padding: 64px 72px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.brief .eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffae00;
  font-weight: 500;
}
.brief h1 {
  font-weight: 300;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 22ch;
}
.brief h1 em { font-style: normal; color: #ffae00; font-weight: 400; }
.brief .lede {
  font-size: 19px;
  line-height: 1.55;
  color: #b8b1a4;
  max-width: 62ch;
  font-weight: 400;
}
.brief .grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: auto;
}
.brief .col h3 {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 12px;
  color: #e7e3dc;
}
.brief .col p {
  font-size: 13.5px;
  line-height: 1.55;
  color: #8e887d;
  margin: 0;
}
.brief .rule {
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 8px 0;
}
.brief .meta {
  display: flex;
  gap: 32px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6e695f;
}

/* ---------- Universal hairline rule shared by all systems ---------- */
.hair {
  height: 1px;
  width: 100%;
  background: currentColor;
  opacity: 0.14;
}