:root {
  --background: #f2eee3;
  --button: #869180;
  --box: #fff;
  --headline: #232019;
  --copy: #6b5c49;
  --link: #232019;
  --link-hover: #7e8b78;
  --page-width: 40rem;
  --card-padding: 5rem 4rem 2.5rem 2.5rem;
  --logo-size: 8rem;
  --logo-offset: 4rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 1.5rem;
  --font-base: clamp(14px, 1.8vw, 17px);
  --font-standard: 1rem;
  --font-small: 0.8rem;
  --font-medium: 0.9rem;
  --font-large: 1.6rem;
  --radius: 1rem;
}

* { box-sizing: border-box; }

html {
  font-size: var(--font-base);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-width: 20rem;
  min-height: 100svh;
  padding-block: 3rem;
  background: var(--background);
  color: var(--headline);
  font-family: "Inter", Arial, sans-serif;
  font-size: var(--font-standard);
}

.page {
  width: min(calc(100% - 2rem), var(--page-width));
  margin: 0 auto;
  padding-top: var(--logo-offset);
  flex: 0 0 auto;
}

.notice-card {
  position: relative;
  padding: var(--card-padding);
  border-radius: var(--radius);
  background: var(--box);
}

.brand-mark {
  position: absolute;
  top: calc(var(--logo-offset) * -1);
  left: 2.5rem;
  z-index: 1;
  width: var(--logo-size);
  height: auto;
  object-fit: contain;
}

.coming-soon {
  margin: 0 0 0.3rem;
  color: var(--copy);
  font-size: var(--font-medium);
  font-weight: 800;
  letter-spacing: 0.2em;
}

h1 {
  max-width: none;
  margin: 0;
  font-size: var(--font-large);
  font-weight: 900;
  line-height: 1.15;
}

.copy { margin-top: var(--space-md); }
.copy p {
  max-width: none;
  margin: 0 0 var(--space-md);
  color: var(--copy);
  font-size: var(--font-standard);
  font-weight: 700;
  line-height: 1.5;
}
.copy p:last-child { margin-bottom: var(--space-lg); }

.mail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem; 
  border-radius: 999px;
  background: var(--button);
  color: var(--box);
  font-size: var(--font-medium);
  font-weight: 900;
  text-decoration: none;
}
.mail-button:hover { background: var(--link-hover); }
.mail-button:focus-visible,
.contact-item a:focus-visible {
  outline: 0.2rem solid var(--headline);
  outline-offset: 0.2rem;
}

.contact-details {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
}
.contact-item { display: flex; align-items: center; gap: var(--space-sm); }
.contact-item p, .contact-item address { margin: 0; white-space: nowrap; font-style: normal; }
.contact-item small, .contact-item strong { display: block; }
.contact-item small { color: var(--copy); font-size: var(--font-small); font-weight: 800; }
.contact-item strong { font-size: var(--font-medium); font-weight: 900; line-height: 1.3; }
.contact-item a { color: var(--link); text-decoration: none; }
.contact-item a:hover { color: var(--link-hover); }

.no-script {
  margin: var(--space-md) 0 0;
  color: var(--copy);
  font-size: var(--font-standard);
  font-weight: 700;
  line-height: 1.5;
}

.contact-icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

@media (max-width: 700px) {
  body { padding-top: 5rem; }
  .page { width: 100%; padding: var(--space-md); }
  .contact-details { align-items: flex-start; flex-direction: column; gap: var(--space-md); padding-left: var(--space-lg); }
}