:root{
  --paper:#f7f3e8;
  --ink:#2f4633;
  --muted:#6d786d;
  --line:rgba(47,70,51,.18);
  --button:#5b704f;
  --button-hover:#495c41;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.page{
  min-height:100vh;
}

.hero{
  width:100%;
  background:var(--paper);
}

.hero img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.content{
  border-top:1px solid var(--line);
  background:var(--paper);
}

.content-inner{
  width:min(760px,88vw);
  margin:0 auto;
  padding:38px 0 calc(48px + env(safe-area-inset-bottom));
  text-align:center;
}

h1{
  margin:0;
  font-size:clamp(2rem,6vw,3.4rem);
  line-height:1.1;
  font-weight:500;
}

.tagline{
  margin:12px auto 30px;
  max-width:660px;
  color:var(--muted);
  font-size:clamp(1.05rem,3.6vw,1.28rem);
  line-height:1.55;
}

.support-button{
  display:inline-block;
  margin:2px auto 30px;
  padding:15px 30px;
  min-width:min(360px,82vw);
  border-radius:999px;
  background:var(--button);
  color:#fff;
  text-decoration:none;
  font-size:1.08rem;
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:0 6px 20px rgba(47,70,51,.10);
}

.support-button:hover,
.support-button:focus-visible{
  background:var(--button-hover);
}

.links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.links a{
  color:var(--ink);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line);
  padding-bottom:4px;
  font-size:1rem;
}

.links a:hover,
.links a:focus-visible{
  border-bottom-color:var(--ink);
}

.icon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.icon svg{
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.icon svg .fill{
  fill:currentColor;
  stroke:none;
}

@media(max-width:700px){
  .hero img{
    width:100%;
    height:auto;
    object-fit:contain;
  }

  .content-inner{
    width:min(90vw,520px);
    padding-top:30px;
  }

  .support-button{
    width:100%;
  }

  .links a{
    font-size:.96rem;
  }
}


/* Final hero image behavior: always show the complete artwork */
.hero img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center;
}


.logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 0 10px;
}

.project-logo{
  display:block;
  width:min(420px, 78vw);
  height:auto;
}