:root{
  --paper: #f3eee4;
  --paper-deep: #e4dccd;
  --ink: #161513;
  --muted: #5f5a52;
  --line: rgba(22, 21, 19, 0.12);
  --max-width: 960px;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  color:var(--ink);
  background:linear-gradient(180deg, #f6f1e7 0%, var(--paper) 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.wrap{
  position:relative;
  max-width:var(--max-width);
  margin:0 auto;
  padding:clamp(24px, 3vw, 32px);
}
.site-header{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 0 22px;
}
.eyebrow{
  margin:0;
  font-size:0.72rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--muted);
}
.brand{
  margin:0;
  font-family: Georgia, "Iowan Old Style", Palatino, "Times New Roman", serif;
  font-size:clamp(3rem, 12vw, 7rem);
  line-height:0.9;
  letter-spacing:-0.06em;
}
.subtitle{
  margin:0;
  font-size:clamp(1rem, 2vw, 1.25rem);
  color:var(--muted);
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.hero{
  position:relative;
  display:block;
  text-align:center;
  padding:clamp(20px, 3vw, 28px);
  border:1px solid var(--line);
  border-radius:0;
  background:rgba(255,255,255,0.34);
  overflow:hidden;
}
.hero-copy{
  position:relative;
  z-index:1;
  display:inline-block;
  width:auto;
  max-width:100%;
  text-align:left;
}
.kicker{
  margin:0 0 10px;
  color:var(--muted);
  font-size:0.74rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
}
.hero-title{
  margin:0;
  max-width:11ch;
  font-family: Georgia, "Iowan Old Style", Palatino, "Times New Roman", serif;
  font-size:clamp(1.9rem, 4.8vw, 3.6rem);
  line-height:0.98;
  letter-spacing:-0.05em;
}
.lead{
  margin:16px 0 0;
  max-width:42ch;
  color:var(--muted);
  font-size:1rem;
  line-height:1.65;
}
.stack-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:8px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}
.stack-list li{
  padding:9px 12px;
  border:1px solid rgba(22, 21, 19, 0.12);
  border-radius:0;
  background:rgba(255,255,255,0.72);
  color:var(--ink);
  font-size:0.9rem;
  letter-spacing:0.02em;
}
.stack-list li:nth-child(4){
  background:rgba(255,255,255,0.72);
  border-color:rgba(22, 21, 19, 0.12);
}
.site-footer{
  margin:20px 0 0;
  color:var(--muted);
  font-size:0.82rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
}

@media (min-width: 820px){
  .hero{
    min-height:380px;
  }
}

@media (max-width: 640px){
  .wrap{padding:18px}
  .brand{font-size:clamp(2.8rem, 16vw, 5rem)}
}