@charset "UTF-8";
:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: #263e35; background: #f7f5ef; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
.site-header { width: 100%; padding: 28px 5%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; width: 215px; }
.brand img { width: 100%; height: auto; }
.brand:focus-visible { outline: 2px solid #263e35; outline-offset: 6px; }
.status { display: flex; align-items: center; gap: 9px; font-size: 12px; white-space: nowrap; }
.status span { width: 6px; height: 6px; background: #677c53; border-radius: 50%; }
main { flex: 1; text-align: center; padding: 40px 24px 65px; }
.card-art { position: relative; width: 210px; height: 195px; margin: 0 auto 40px; }
.card { position: absolute; width: 125px; height: 170px; border-radius: 7px; top: 10px; left: 42px; }
.card-back { background: #ced6bd; transform: rotate(-19deg) translate(-22px, 4px); }
.card-middle { background: #d5a186; transform: rotate(15deg) translate(25px, 0); }
.card-front { background: #fffcf4; border: 1px solid #e4dfd1; transform: rotate(-5deg); box-shadow: 0 12px 24px #3a402518; display: grid; place-items: center; }
.corner { position: absolute; top: 13px; left: 13px; font: italic 15px Georgia, serif; }
.bottom { top: auto; left: auto; right: 13px; bottom: 13px; transform: rotate(180deg); }
.flower { font-family: Georgia, serif; font-size: 78px; font-weight: normal; line-height: 1; color: #9b523b; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 2.8px; margin: 0 0 22px; }
h1 { font: normal clamp(48px, 6.5vw, 82px)/1.04 Georgia, 'Times New Roman', serif; letter-spacing: -3px; margin: 0 0 25px; }
h1 em { font-weight: normal; color: #7a8266; }
.intro { font-size: 15px; line-height: 1.8; color: #657068; margin: 0 auto; max-width: 470px; }
.sign-off { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .7px; margin-top: 32px; }
.sign-off span { height: 1px; width: 27px; background: #c3c8b9; }
footer { margin: 0 5%; padding: 23px 0; border-top: 1px solid #dedfd4; display: flex; justify-content: space-between; gap: 16px; color: #687166; font-size: 11px; }
@media (max-width: 520px) {
  .site-header { padding: 23px 6%; gap: 12px; }
  .brand { width: 160px; }
  .status { font-size: 10px; gap: 6px; }
  main { padding: 40px 22px 48px; }
  .card-art { margin-bottom: 30px; }
  h1 { letter-spacing: -1.8px; }
  .intro { font-size: 14px; }
  footer { margin: 0 6%; font-size: 10px; }
}