/* Master Rugs brand (from master-rugs.com): charcoal "MR" logo, black type, warm taupe accent, square black buttons.
   Her site's fonts are IvyPresto Display (headings) and Harmonia Sans (text), licensed to her Shopify store; here we
   self-host the open-license fonts her theme also loads: Playfair Display and Montserrat. See BRAND.md. */
@font-face { font-family: 'Playfair Display'; src: url('/fonts/playfair-display.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('/fonts/playfair-display-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('/fonts/montserrat.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  --mr-black: #111111;
  --mr-ink: #212529;
  --mr-charcoal: #4d4d4d;
  --mr-taupe: #877e7b;
  --mr-line: #e4e4e4;
  --mr-soft: #f5f3f1;
  --mr-white: #ffffff;
  --mr-error: #a12a1f;
  --mr-ok: #3d6b4a;
  --mr-serif: 'Playfair Display', 'IvyPresto Display', Georgia, serif;
  --mr-sans: 'Montserrat', 'Harmonia Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--mr-soft); color: var(--mr-ink); font: 15px/1.65 var(--mr-sans); }
.card { max-width: 760px; margin: 40px auto; padding: 32px 32px 28px; background: var(--mr-white); border: 1px solid var(--mr-line); }
@media (max-width: 800px) { .card { margin: 16px; padding: 24px 20px; } }

.brand { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; padding-bottom: 18px; border-bottom: 1px solid var(--mr-line); }
.brand img { height: 40px; width: auto; display: block; }
.brand span { font: italic 500 1.05rem var(--mr-serif); color: var(--mr-taupe); letter-spacing: .03em; }

h1 { margin: 0 0 18px; font: 500 1.9rem/1.2 var(--mr-serif); color: var(--mr-black); }
h2 { margin: 30px 0 8px; font: 500 1.2rem/1.3 var(--mr-serif); color: var(--mr-black); }
a { color: var(--mr-black); text-decoration-color: var(--mr-taupe); text-underline-offset: 3px; }
a:hover { color: var(--mr-taupe); }
ul { padding-left: 1.2em; }
.muted { color: var(--mr-taupe); font-size: .9rem; }
.error { color: var(--mr-error); font-weight: 600; }
.ok { color: var(--mr-ok); font-weight: 600; }

label { display: block; margin: 14px 0 6px; font-size: .85rem; letter-spacing: .04em; color: var(--mr-charcoal); }
input { width: 100%; max-width: 380px; padding: 11px 12px; border: 1px solid var(--mr-line); border-radius: 0; background: var(--mr-white); color: var(--mr-ink); font: inherit; }
input:focus { outline: 2px solid var(--mr-black); outline-offset: 1px; }

button, .btn {
  display: inline-block; margin-top: 14px; padding: 12px 24px; border: 1px solid var(--mr-black); border-radius: 0;
  background: var(--mr-black); color: var(--mr-white); font: 600 .75rem/1 var(--mr-sans); letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
}
button:hover, .btn:hover { background: var(--mr-charcoal); border-color: var(--mr-charcoal); color: var(--mr-white); }
button.secondary { background: transparent; color: var(--mr-black); }
button.secondary:hover { background: var(--mr-black); color: var(--mr-white); }

dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0 0 8px; }
dt { color: var(--mr-taupe); font-size: .85rem; letter-spacing: .03em; }
dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { dl { grid-template-columns: 1fr; gap: 2px; } dd { margin-bottom: 8px; } }

.lang { border-top: 1px solid var(--mr-line); margin-top: 36px; padding-top: 12px; }
footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--mr-line); font-size: .85rem; color: var(--mr-taupe); }
footer a { color: var(--mr-taupe); }