:root{
  --indigo:#1B2A3C; --vermillion:#D1422D; --gold:#C9A44A; --ivory:#F5F0E6;
  --teal:#4D6F73; --cyan:#73D0E7; --rose:#FA8EA8; --orange:#E67C2E;
}

html,body{
  height:100%;
  margin:0;
  font-family: Georgia, "Times New Roman", serif;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  background-color:#F5F0E6;
  background-image:url("../img/background.PNG");
  background-repeat:repeat;
  background-position:top left;
  background-size:auto;
  color:var(--ivory);
}

.viewport-center{
  width:100%;
  text-align:center;
  padding:2rem;
  padding-top:10vh;
  flex:1 0 auto;
}

.logo-combined{
  max-width:min(82vw, 500px);
  height:auto;
  margin:0 auto 1.1rem;
  display:block;
}

.main-text-box{
  width:min(90vw, 680px);
  margin:0 auto 1.4rem;
  padding:1rem 1.2rem;
  background:#1B2A3C;
  color:#F5F0E6;
  border:1px solid rgba(245,240,230,0.18);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:0;
}

.main-text-box-title{
  margin:0 0 0.8rem;
  font-size:clamp(1.05rem, 2vw, 1.35rem);
  line-height:1.2;
  color:#F5F0E6;
}

.main-text-box p{
  margin:0;
  font-size:clamp(0.95rem, 1.8vw, 1.05rem);
  line-height:1.5;
}

.main-text-box p + p{
  margin-top:0.9rem;
}

.main-copy-image{
  margin:1rem 0 0.1rem;
}

.main-copy-image img{
  display:block;
  width:min(100%, 220px);
  height:auto;
  margin:0 auto;
}

.main-text-box-tail{
  margin-top:1.1rem;
  padding-top:0.95rem;
  border-top:1px solid rgba(245,240,230,0.2);
}

.main-text-box-tail p{
  font-size:clamp(0.9rem, 1.6vw, 0.98rem);
  line-height:1.45;
  color:rgba(245,240,230,0.96);
  font-style:italic;
}

.main-text-box-tail .support-credit{
  margin-top:1rem;
  font-style:normal;
  color:#F5F0E6;
  font-size:clamp(0.72rem, 1.2vw, 0.82rem);
  line-height:1.35;
}

.main-text-box-tail .support-credit strong{
  font-weight:700;
}

.support-banner{
  margin:0.95rem 0 0;
}

.support-banner img{
  display:block;
  width:min(100%, 520px);
  height:auto;
  margin:0 auto;
}

.brand{
  margin:0.8rem 0 0;
  font-weight:700;
  white-space:nowrap;
  font-size:clamp(1.55rem, 4.2vw, 3.25rem);
  line-height:1.03;
  letter-spacing:0.01em;
  color:#1B2A3C;
  -webkit-text-stroke:0.45px rgba(244,185,195,0.95);
  text-shadow:
    1.6px 1.6px 0 rgba(115, 208, 231, 0.95),
    0 0 1px rgba(244,185,195,0.8);
}

.tagline{
  margin:.55rem 0 0.9rem;
  font-style: italic;
  font-weight:700;
  white-space:nowrap;
  font-size:clamp(0.9rem, 1.9vw, 1.45rem);
  letter-spacing:.03em;
  color:#1B2A3C;
  -webkit-text-stroke:0.3px rgba(244,185,195,0.9);
  text-shadow:
    1.2px 1.2px 0 rgba(115, 208, 231, 0.95),
    0 0 1px rgba(244,185,195,0.75);
}

.signup{
  margin-top:1.4rem;
  font-size:.75rem;
  display:flex;
  justify-content:center;
  width:100%;
}

.signup a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px dotted var(--gold);
  transition:all 0.25s ease;
}

.signup a:hover{
  color:var(--cyan);
  border-bottom-color:var(--cyan);
  text-shadow:0 0 1px var(--cyan);
}

.site-footer{
  flex:0 0 auto;
  width:100%;
  text-align:center;
  padding:0.9rem 1.25rem 1.1rem;
  font-size:0.72rem;
  letter-spacing:0.02em;
  color:rgba(245,240,230,.78);
}

@media (max-width: 480px){
  .logo-combined{ max-width:280px; }
  .main-text-box{
    padding:0.9rem 1rem;
    border-radius:8px;
  }
  .brand{
    white-space:normal;
    line-height:1.08;
  }
  .tagline{
    white-space:normal;
    margin-bottom:0.8rem;
  }
  .support-banner img{
    width:min(100%, 460px);
  }
  .site-footer{ font-size:0.68rem; }
}

@media (max-width: 820px){
  .viewport-center{
    padding:1.25rem 0.9rem 1.5rem;
    padding-top:4vh;
  }
  .brand{
    white-space:normal;
    font-size:clamp(1.35rem, 7.2vw, 2.5rem);
    line-height:1.08;
  }
  .tagline{
    white-space:normal;
    font-size:clamp(0.85rem, 4.2vw, 1.2rem);
    margin-bottom:0.75rem;
  }
}