/* The page itself: background, body type, links, focus, and the type helpers every
   page uses. After Campfire's base.css. */

body.staff {
  background: var(--bg); color: var(--ink);
  font: 14px/1.5 var(--body); -webkit-font-smoothing: antialiased;
}
body.customer {
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased;
}

.staff a, .customer a { color: var(--link); }
.staff :focus-visible, .customer :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
summary { cursor: pointer; }

/* The office's type: display caps for titles, condensed caps for labels, mono for figures. */
.staff .title { font-family: var(--display); font-stretch: 125%; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; line-height: 1.05; margin: 0; }
.staff .title.large { font-size: var(--text-2xl); }
.staff .title.medium { font-size: var(--text-xl); }
.staff .eyebrow { font-family: var(--display); font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: var(--text-xs); color: var(--muted); }
.staff .mono { font-family: var(--mono); font-stretch: 87.5%; }
.staff .h3 { font-family: var(--display); font-weight: 700; font-size: 15.5px; margin: 0; }
.staff .muted { color: var(--muted); } .staff .small { font-size: var(--text-s); } .staff .xs { font-size: var(--text-xs); }
label.eyebrow, label > .eyebrow:first-child { display: block; margin-bottom: var(--space-xs); }

/* The customer's type. */
.customer h1, .customer h2, .customer h3 { margin: 0; color: var(--black); }
.customer h3 { color: var(--blue-ink); font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.customer .intro h1 { font-size: clamp(26px, 7vw, 34px); line-height: 1.15; font-weight: 700; }
.customer .kicker { margin: 0 0 4px; color: var(--accent); font-weight: 700; font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; }
.customer .lede { margin: 22px 0 0; color: var(--muted); font-size: 15px; }
.customer .fine { margin: 8px 0 0; font-size: var(--text-s); color: var(--muted); }
.customer .words p, .customer .words li { margin: 6px 0; }
.customer .words ol, .customer .words ul { padding-left: 20px; }

/* Turbo's stream connections are elements; keep them out of flex and grid gaps. */
turbo-cable-stream-source { display: none; }