/*
 * Baltic Studio — Under Construction Page Styles
 *
 * This stylesheet defines the look and feel of the temporary landing page. It
 * follows SEO guidelines by separating presentation from structure (no inline
 * styles) and uses semantic classes that aid maintainability. Care has been
 * taken to keep the CSS lean for quick loading, which search engines reward.
 */

/* Apply a natural box-sizing model so that paddings and borders behave predictably */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Reset default margin */
body, h1, p {
  margin: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: #111;
  background-color: #f7f2df; /* soft beige tone reminiscent of the studio's aesthetic */
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Decorative radial gradient and dotted effect drawn using CSS. The radial
   gradient emulates the subtle swirl seen on the inspiration page, while the
   repeating linear gradients create tiny dots. Using multiple backgrounds
   avoids additional HTTP requests and keeps the markup minimal. */
.background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /*
     Multiple backgrounds combine to create a subtle swirling pattern with tiny
     dots. Two radial gradients generate concentric rings that fade out towards
     the edges. Two linear gradients form a light dotted grid. The opacity is
     deliberately low so that the pattern doesn’t distract from the content.  
  */
  background-image:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0) 65%),
    radial-gradient(circle at center, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0) 45%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.015) 50%, transparent 50%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.015) 50%, transparent 50%);
  background-size:
    100% 100%,
    100% 100%,
    4px 4px,
    4px 4px;
  background-position:
    center,
    center,
    0 0,
    0 0;
}

header {
  padding: 1rem 2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  color: #111;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
}

.logo svg {
  height: 32px;
  width: 32px;
  margin-right: 0.5rem;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
}

h1 {
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.tagline {
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 1rem;
}

.under-construction {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  /* Prevent automatic line breaks or glyph substitutions that some browsers might insert */
  white-space: nowrap;
}

.description {
  max-width: 640px;
  font-size: 1rem;
  color: #333;
  margin-bottom: 2rem;
}

.contact-box {
  border: 1px solid #111;
  padding: 1rem 1.5rem;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.7);
  max-width: 400px;
}

.contact-email {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.contact-email:hover,
.contact-email:focus {
  text-decoration: underline;
}

.contact-text {
  font-size: 0.9rem;
  color: #444;
}

footer {
  text-align: center;
  padding: 1rem 0;
  font-size: 0.75rem;
  color: #666;
}

/* Responsive typography for smaller screens */
@media (max-width: 600px) {
  h1 {
    font-size: 2.25rem;
  }
  .under-construction {
    font-size: 1.25rem;
  }
  .description {
    font-size: 0.95rem;
  }
}