/* Open-source interpretations, not Apple's proprietary font.
   Font files and their original SIL Open Font Licenses are self-hosted. */
@font-face {
  font-family: 'Didier Garamond';
  src: url('assets/fonts/EBGaramond.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Didier Hand';
  src: url('assets/fonts/Caveat.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --display: 'Didier Garamond', 'Baskerville', 'Palatino Linotype', Georgia, serif;
  --hand: 'Didier Hand', 'Bradley Hand', 'Segoe Print', cursive;
}
[data-design] :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.025em;
  font-synthesis: none;
}
[data-design='contact'] .case-hero h1 { font-weight: 400; }
[data-design] .wordmark {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.035em;
}
.wordmark small { font-family: var(--sans); }
[data-design] .marker {
  font-family: var(--hand);
  font-size: 1.06em;
  font-weight: 600;
  letter-spacing: -.015em;
  font-synthesis: none;
}
/* Paint each wrapped phrase fragment, close to the handwritten letterforms. */
[data-design] .marker-phrase {
  background: linear-gradient(transparent 60%, var(--marker) 60%, var(--marker) 88%, transparent 88%);
}
[data-design] :is(.pencil-note, .margin-note p, .cs-hand-note, .cs-screen-note, .team-photo figcaption) {
  font-family: var(--hand);
  font-weight: 500;
  letter-spacing: 0;
}
[data-design] .pencil-note { font-size: 23px; }
[data-design] .cs-screen-note { font-size: 25px; }
[data-design] .cs-hand-note { font-size: 21px; }
[data-design] .margin-note p { font-size: 23px; }
/* Quotations share the personal handwriting, while source attribution stays
   in the reading face. Keep the exact quote text and semantic cite intact. */
[data-design] .pullquote {
  font-family: var(--hand);
  font-size: clamp(28px, 2.6vw, 34px);
  font-weight: 500;
  font-synthesis: none;
  line-height: 1.4;
  letter-spacing: 0;
}
[data-design] .pullquote cite {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
}
@media (max-width: 720px) {
  [data-design] .wordmark { font-size: 24px; }
  [data-design] .pencil-note { font-size: 21px; }
  [data-design] .cs-screen-note { font-size: 21px; }
  [data-design] .cs-hand-note { font-size: 20px; }
}
@media (max-width: 380px) {
  [data-design] .wordmark { font-size: 22px; }
  [data-design] .cs-screen-note { font-size: 18px; }
}