:root{
  --paper:#fbf7f2;
  --paper-2:#f4ece2;
  --ink:#2c2621;
  --muted:#776d63;
  --rule:#e4d9cb;
  --accent:#a85a38;
  --accent-dark:#8c472a;
  --radius:3px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17.5px/1.75 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

.wrap{
  max-width:44rem;
  margin:0 auto;
  padding:0 1.25rem;
}

a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-dark)}

/* ---------------------------------------------------------------- opening */

.hero{
  position:relative;
  min-height:75vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#3a322c;
}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(28,23,19,.18) 0%,rgba(28,23,19,.30) 42%,rgba(28,23,19,.80) 100%),
    linear-gradient(90deg,rgba(28,23,19,.48) 0%,rgba(28,23,19,.10) 62%);
}
.hero-words{position:relative;width:100%;padding:0 0 clamp(2rem,5vw,3.4rem)}

.kicker{
  margin:0 0 1.05rem;
  font-size:.74rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  font-weight:600;
  color:rgba(255,255,255,.78);
}

h1{
  margin:0 0 1.05rem;
  color:#fff;
  font-family:Fraunces,Georgia,serif;
  font-weight:400;
  font-size:clamp(1.85rem,4.4vw,2.85rem);
  line-height:1.17;
  letter-spacing:-.014em;
  max-width:20ch;
  text-wrap:balance;
}

.sub{
  margin:0;
  font-size:clamp(1rem,1.6vw,1.1rem);
  line-height:1.6;
  color:rgba(255,255,255,.88);
  max-width:46ch;
}

/* ----------------------------------------------------------------- blocks */

main{padding-bottom:1rem}

section.wrap,
.invite{margin-top:3.6rem}

/* the first section sits in the quarter of the screen below the opening */
.me{margin-top:2.1rem}

h2{
  margin:0 0 1.05rem;
  font-size:.76rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
}

p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}

/* -------------------------------------------------------------- image band */

.band{
  margin:3.4rem 0 0;
  height:clamp(190px,30vw,340px);
  overflow:hidden;
  background:var(--paper-2);
}
.band img{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------------------------- study */

.study .big{
  font-family:Fraunces,Georgia,serif;
  font-size:clamp(1.3rem,3vw,1.6rem);
  line-height:1.35;
  margin-bottom:1.2rem;
  max-width:26ch;
}

.aside{
  margin-top:1.6rem;
  padding-left:1.1rem;
  border-left:2px solid var(--accent);
  color:#4a423b;
  font-style:italic;
}

/* ------------------------------------------------------------------ invite */

.invite{
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:2.9rem 0 3rem;
}

.cta{margin:1.7rem 0 .55rem}

.button{
  display:inline-block;
  padding:.92rem 1.75rem;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  border-radius:var(--radius);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.01em;
}
.button:hover{background:var(--accent-dark);color:#fff}
.button:focus-visible{outline:2px solid var(--accent-dark);outline-offset:3px}

.cta-note{color:var(--muted);font-size:.95rem}

/* ----------------------------------------------------------------- contact */

.contact .mail{font-size:1.1rem}

footer{
  margin-top:3.4rem;
  padding:1.6rem 0 3rem;
  border-top:1px solid var(--rule);
  color:var(--muted);
  font-size:.9rem;
}
footer p{margin:0}

/* ------------------------------------------------------------------- small */

@media (max-width:38rem){
  body{font-size:16.5px}
  .hero{min-height:75vh}
  section.wrap,.invite,.band{margin-top:2.6rem}
  .me{margin-top:1.7rem}
  .invite{padding:2.2rem 0 2.4rem}
  .button{display:block;text-align:center}
}