/* Grey Haven — single-page site */
:root{
  --bg:#EDF1F4;
  --text:#0E1216;
  --accent:#3B556B;
  --hairline: rgba(12,18,24,0.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container{
  width: min(1200px, 100% - 48px);
  margin-inline:auto;
}

.page{
  display:flex;
  min-height:100vh;
  flex-direction:column;
}

.hero{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 6vw, 80px);
  padding-block: clamp(72px, 12vh, 140px);
  /* Equal-height columns so art can match copy */
  align-items: stretch;
}

.copy{
  max-width: 640px;
  align-self: center;
}

h1{
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight:400;
  font-size: clamp(44px, 6vw, 72px);
  line-height:1.1;
  letter-spacing: 0.01em;
  margin:0 0 24px 0;
}

p{
  margin:0 0 16px 0;
  font-size: clamp(16px, 1.6vw, 18px);
}

em{
  color: var(--accent);
  font-style: italic;
}

.contact{
  margin-top: 32px;
}

a{
  color: inherit;
  text-underline-offset: 3px;
}

/* Art column: center vertically; right-align on desktop */
.art{
  position:relative;
  min-height: 300px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* PNG badge:
   - Desktop: height follows the row (no distortion: width auto + object-fit)
   - Never exceed container width
*/
.badge{
  display:block;
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: min(520px, 48vw);
  margin-left:auto;
  opacity: 0.35;
  object-fit: contain;   /* preserves aspect ratio */
}

/* Footer */
.foot{
  margin-top:auto;
  padding-block: 40px;
  border-top: 1px solid var(--hairline);
  color: rgba(14,18,22,0.7);
  display:flex;
  justify-content:flex-start;
}

/* Mobile */
@media (max-width: 900px){
  .hero{
    grid-template-columns: 1fr;
    padding-block: 72px;
  }

  /* Center the art when it stacks below */
  .art{
    justify-content:center;
    min-height: unset;
  }

  /* Mobile: rely on natural aspect ratio; cap width only */
  .badge{
    height: auto !important;           /* ensure no leftover fixed height */
    width: auto;                        /* natural width */
    max-width: min(360px, 80vw);        /* cap size without stretching */
    margin: 24px auto 0;
    opacity: 0.3;
    object-fit: contain;                /* belt-and-suspenders */
  }
}