.graphics-header { background: #0a1219; border-bottom: 1px solid #405366; }
.graphics-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; }
.graphics-nav .brand { display: block; }
.graphics-hero { background: linear-gradient(125deg, #0b1118, #3b242b); }
.graphics-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: clamp(1.5rem, 6vw, 5rem); padding-block: clamp(3rem, 8vw, 7rem); }
.graphics-page h1, .graphics-page h2 { font-family: Georgia, serif; line-height: 1.12; }
.graphics-page h1 { margin: .25em 0; font-size: clamp(2.5rem, 6vw, 5rem); }
.graphics-page h2 { margin: .4em 0; font-size: clamp(1.75rem, 4vw, 3rem); }
.graphics-kicker { color: #f2bdac; font-size: .8rem; font-weight: 800; letter-spacing: .14em; }
.graphics-lead { color: #f2d1c7; font-size: clamp(1.2rem, 3vw, 1.6rem); }
.graphics-art { display: block; width: 100%; max-width: 25rem; height: auto; justify-self: center; border: 1px solid #8e625b; }
.graphics-section { padding-block: clamp(2.5rem, 7vw, 5rem); }
.graphics-section > p { max-width: 65ch; }
.graphics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.graphics-grid article { padding: 1.25rem; background: #2b2028; border: 1px solid #72524f; border-top: 3px solid #cd9b8e; }
.graphics-grid h3 { margin-top: 0; }
.graphics-grid p { margin-bottom: 0; color: #d3dce4; }
.graphics-examples, .graphics-contact { background: #221a23; }
.graphics-button { background: #f0c3b5; color: #0b2034; }
.graphics-button:hover { background: #ffe1d8; }
@media (max-width: 46rem) {
  .graphics-hero-grid, .graphics-grid { grid-template-columns: 1fr; }
  .graphics-art { justify-self: start; }
}