:root {
  --rustic-red: #A23E3E;
  --sage: #7A8B4A;
  --dark-olive: #5D6732;
  --golden-wheat: #D6A94A;
  --warm-taupe: #C2A98B;
  --warm-cream: #F8F3E8;
  --dark-brown: #4A3728;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--dark-brown);
  font-family: "Arvo", Georgia, serif;
  background:
    radial-gradient(circle at 12% 16%, rgba(214,169,74,.13), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(122,139,74,.12), transparent 30%),
    repeating-linear-gradient(0deg, rgba(74,55,40,.018) 0, rgba(74,55,40,.018) 1px, transparent 1px, transparent 5px),
    var(--warm-cream);
}

.site-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(22px, 5vw, 64px);
}

.construction-card {
  width: min(880px, 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(32px, 7vw, 76px) clamp(24px, 7vw, 76px);
  background: rgba(248,243,232,.92);
  border: 5px solid var(--rustic-red);
  outline: 2px dashed var(--warm-taupe);
  outline-offset: -15px;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(74,55,40,.18);
}

.construction-card::before,
.construction-card::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(93,103,50,.28);
  border-radius: 12px;
  pointer-events: none;
}

.construction-card::after {
  inset: 0;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.logo-wrap, h1, .ribbon, .intro, .note, .divider, .signature, .copyright, .eyebrow {
  position: relative;
  z-index: 2;
}

.brand-logo {
  width: clamp(150px, 24vw, 220px);
  height: auto;
  filter: drop-shadow(0 7px 8px rgba(74,55,40,.14));
}

.eyebrow {
  margin: 24px 0 4px;
  color: var(--dark-olive);
  font-family: "Bree Serif", Georgia, serif;
  font-size: clamp(.9rem, 2vw, 1.05rem);
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: var(--rustic-red);
  font-family: "Rye", "Rockwell Extra Bold", Georgia, serif;
  font-size: clamp(2.7rem, 8vw, 5.6rem);
  font-weight: 400;
  line-height: 1.02;
  text-shadow: 1px 2px 0 rgba(194,169,139,.45);
}

.ribbon {
  width: min(500px, 90%);
  margin: 22px auto 26px;
  color: #fffdf7;
  background: var(--dark-olive);
  padding: 11px 32px;
  font-family: "Bree Serif", Georgia, serif;
  font-size: clamp(1.05rem, 3vw, 1.45rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 5px 0 rgba(74,55,40,.14);
}

.ribbon::before,
.ribbon::after {
  content: "";
  position: absolute;
  top: 11px;
  border: 22px solid var(--sage);
  z-index: -1;
}
.ribbon::before { left: -29px; border-left-color: transparent; }
.ribbon::after { right: -29px; border-right-color: transparent; }

.intro {
  max-width: 670px;
  margin: 0 auto;
  font-size: clamp(1.05rem, 2.3vw, 1.35rem);
  line-height: 1.75;
  font-weight: 700;
}

.note {
  max-width: 620px;
  margin: 15px auto 0;
  font-size: clamp(.95rem, 2vw, 1.08rem);
  line-height: 1.75;
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  max-width: 370px;
  margin: 28px auto 17px;
}
.divider span { height: 1px; flex: 1; background: var(--warm-taupe); }
.divider b { color: var(--rustic-red); font-size: 1.1rem; }

.signature {
  margin: 0;
  color: var(--dark-olive);
  font-family: "Bree Serif", Georgia, serif;
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
}

.copyright {
  margin: 14px 0 0;
  font-size: .78rem;
  opacity: .72;
}

.botanical {
  position: absolute;
  z-index: 1;
  color: var(--sage);
  font-size: clamp(80px, 15vw, 150px);
  opacity: .16;
  line-height: 1;
}
.botanical-left { left: -20px; bottom: 18px; transform: rotate(-26deg); }
.botanical-right { right: -20px; top: 22px; transform: scaleX(-1) rotate(-26deg); }

@media (max-width: 560px) {
  .construction-card { border-width: 4px; outline-offset: -11px; }
  .ribbon { width: 86%; padding-inline: 18px; }
  .ribbon::before, .ribbon::after { display: none; }
}