:root {
  --ink: #46535d;
  --ink-2: #62787d;
  --paper: #fbf7f2;
  --white: #fffdfb;
  --coral: #c9858f;
  --yellow: #f0d8ad;
  --sky: #bfded5;
  --line: rgba(70, 83, 93, .18);
  --sans: "Lora", Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, serif;
}

body { background: var(--paper); }
.site-header { background: rgba(251, 247, 242, .94); }
.brand strong, .footer-brand strong { font-size: 1.55rem; font-weight: 700; }
.brand small, .footer-brand small, .eyebrow, .poster-kicker, .poster-footer, .project-copy p, .field label { letter-spacing: .11em; }
.hero h1 { font-weight: 600; }
.hero h1 em { color: var(--coral); }
.hero-poster { box-shadow: 12px 12px 0 #708b8e; }
.button-primary { background: #a96e79; }
.button-primary:hover { background: #8e5964; }
.service-grid { gap: 1rem; border: 0; }
.service-card { background: rgba(255, 253, 251, .7); border: 1px solid var(--line); border-radius: 1.3rem; min-height: 420px; }
.service-icon { color: #b67882; }
.portfolio { background: #62787d; }
.project-grid { gap: 1.35rem; }
.project-card:nth-child(n) { grid-column: span 6; border-radius: 1.2rem; box-shadow: 0 16px 34px rgba(48, 63, 67, .18); }
.project-art { height: 310px; }
.project-art strong { font-family: var(--serif); font-weight: 600; letter-spacing: -.045em; line-height: .88; }
.project-one .project-art { background: #d9a0a8; color: var(--ink); }
.project-one .project-art::after { background: #f0d8ad; }
.project-two .project-art { background: #bfded5; }
.project-three .project-art { background: #f0d8ad; }
.project-three .project-art::after { border-color: #718c8d; }
.project-four .project-art { background: #dec6dc; }
.project-four .project-art::after { content: ""; position: absolute; width: 260px; height: 260px; right: -45px; top: 35px; border: 32px solid #fff5ee; border-radius: 50%; }
.project-five .project-art { background: #cbd6e4; }
.project-five .project-art::after { content: ""; position: absolute; inset: 58px 30px 30px 50%; background: repeating-linear-gradient(0deg, #667886 0 2px, transparent 2px 12px); transform: rotate(5deg); }
.project-six .project-art { background: #eac7b8; }
.project-six .project-art::after { content: ""; position: absolute; width: 220px; height: 220px; right: 35px; top: 45px; background: #93bdb8; border-radius: 50% 44% 52% 46%; }
.project-seven .project-art { background: #c8d8ee; }
.project-seven .project-art::after { content: ""; position: absolute; inset: 45px 35px 38px 46%; border: 3px solid #657985; border-radius: 1rem; box-shadow: 14px 14px 0 rgba(255,255,255,.55); }
.project-eight .project-art { background: #d8d2b2; }
.project-eight .project-art::after { content: ""; position: absolute; width: 250px; height: 250px; right: -20px; top: 35px; background: repeating-conic-gradient(#819187 0 12deg, transparent 12deg 24deg); border-radius: 50%; opacity: .55; }
.portfolio-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.portfolio-tags span { padding: .28rem .6rem; border: 1px solid var(--line); border-radius: 999px; color: #56636c; font-size: .78rem; }
.book-back { background: #bfded5; }
.book-front, .contact { background: #a96e79; }
.quote-form { border-radius: 1.4rem; box-shadow: 10px 10px 0 #bfded5; }
.button-yellow { background: #f0d8ad; }

@media (max-width: 900px) {
  .project-card:nth-child(n) { grid-column: span 12; }
}

@media (max-width: 600px) {
  .hero-poster { box-shadow: 7px 7px 0 #708b8e; }
  .project-art { height: 270px; }
}