:root {
  color-scheme: light;
  --bordeaux: #8B1A17;
  --bordeaux-dark: #6E1412;
  --or: #D4A76A;
  --or-soft: #E9C99B;
  --creme: #FAF6F0;
  --creme-card: rgba(255, 252, 247, 0.92);
  --brun-night: #2C1810;
  --brun-text: #4A3228;
  --brun-muted: #7A6E64;
  --border: rgba(139, 26, 23, 0.14);
  --serif: "Cormorant", Georgia, serif;
  --sans: "Karla", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html,
body { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--brun-text);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 18% 18%, rgba(212, 167, 106, 0.22), transparent 30%),
    radial-gradient(circle at 82% 80%, rgba(139, 26, 23, 0.12), transparent 28%),
    linear-gradient(135deg, #fffaf3 0%, var(--creme) 42%, #efe2d2 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40H160M0 80H160M0 120H160M40 0V160M80 0V160M120 0V160' fill='none' stroke='%232C1810' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.page {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(20px, 4vw, 56px);
}

.card {
  width: min(100%, 560px);
  padding: clamp(34px, 6vw, 58px);
  text-align: center;
  background: var(--creme-card);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 22px 70px rgba(44, 24, 16, 0.14), 0 2px 10px rgba(44, 24, 16, 0.06);
  backdrop-filter: blur(10px);
}

.eyebrow {
  margin: 0 0 28px;
  color: var(--bordeaux);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.identity { margin: 0 auto 26px; }

.logo-mark {
  display: inline-grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 22px;
  color: var(--creme);
  background: var(--bordeaux);
  border: 2px solid var(--or);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 12px 30px rgba(139, 26, 23, 0.24);
}

h1 {
  margin: 0;
  color: var(--brun-night);
  font-family: var(--serif);
  font-size: clamp(2.45rem, 8vw, 4rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.baseline {
  margin: 14px 0 0;
  color: var(--brun-muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.message {
  max-width: 390px;
  margin: 0 auto 34px;
  color: var(--brun-text);
  font-size: clamp(1.02rem, 2vw, 1.14rem);
  line-height: 1.65;
}

.contact {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  color: var(--bordeaux);
  border: 1px solid rgba(139, 26, 23, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.contact-link.primary {
  color: #fff;
  background: var(--bordeaux);
  border-color: var(--bordeaux);
  box-shadow: 0 10px 26px rgba(139, 26, 23, 0.22);
}

.contact-link:hover,
.contact-link:focus-visible {
  transform: translateY(-1px);
  border-color: var(--or);
  outline: none;
}

.contact-link.primary:hover,
.contact-link.primary:focus-visible { background: var(--bordeaux-dark); }

@media (max-width: 520px) {
  body { overflow: auto; }
  .page { align-items: center; padding: 18px; }
  .card { border-radius: 22px; }
  .logo-mark { width: 72px; height: 72px; }
  .contact-link { font-size: 0.95rem; }
}