:root{
  --night:#0b100f;
  --pine:#16332c;
  --moss:#2a5348;
  --copper:#c4784a;
  --ember:#e8a06a;
  --snow:#f4efe4;
  --paper:#ece6d6;
  --ink:#161410;
  --mute:#5c564c;
  --line:rgba(22,20,16,.12);
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Source Sans 3","Avenir Next","Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--snow);
  color:var(--ink);
  font:18px/1.65 var(--serif);
}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:9}

.mast{
  background:var(--night);
  color:var(--snow);
  padding:0 7vw 0;
  border-bottom:1px solid rgba(244,239,228,.08);
}
.mast__rail{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:18px 0 14px;
}
.mast__issue{
  margin:0;
  font:600 11px/1.3 var(--sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ember);
}
.mast__mark{
  display:flex;align-items:center;gap:10px;
  color:var(--snow);text-decoration:none;
  font:700 15px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
}
.mast__mark img{display:block}
.mast__tag{
  margin:0;text-align:right;
  font:italic 15px/1.3 var(--serif);
  color:rgba(244,239,228,.72);
}
.nav{
  display:flex;flex-wrap:wrap;gap:8px 28px;
  padding:0 0 16px;
  border-top:1px solid rgba(244,239,228,.1);
  padding-top:12px;
}
.nav a{
  color:rgba(244,239,228,.78);
  text-decoration:none;
  font:600 12px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.nav a.is-on,.nav a:hover{color:var(--ember)}

.hero{
  position:relative;
  min-height:88vh;
  background:var(--night);
  color:var(--snow);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.hero__art{position:absolute;inset:0;width:100%;height:100%}
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,16,15,.15) 0%,rgba(11,16,15,.25) 40%,rgba(11,16,15,.78) 100%);
}
.hero__copy{
  position:relative;z-index:2;
  padding:0 7vw 8vh;
  max-width:980px;
}
.hero__kicker{
  margin:0 0 14px;
  font:700 12px/1 var(--sans);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ember);
}
.hero h1{
  margin:0 0 18px;
  font:700 clamp(40px,7vw,86px)/.95 var(--serif);
  letter-spacing:-.03em;
}
.hero__lede{
  margin:0 0 28px;
  max-width:38rem;
  font:italic 21px/1.45 var(--serif);
  color:rgba(244,239,228,.86);
}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.cta{
  display:inline-block;
  padding:13px 20px;
  text-decoration:none;
  font:700 12px/1 var(--sans);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.cta--solid{background:var(--copper);color:#1a1008}
.cta--ghost{border:1px solid rgba(244,239,228,.45);color:var(--snow)}
.cta--ink{background:var(--pine);color:var(--snow)}
.cta--line{border:1px solid var(--pine);color:var(--pine)}
.cta:hover{filter:brightness(1.08)}
.cta--ghost:hover{background:rgba(244,239,228,.08)}

.band{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(244,239,228,.08);
  margin:0;
}
.band div{
  background:var(--pine);
  color:var(--snow);
  padding:26px 28px;
}
.band b{
  display:block;
  font:700 11px/1 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ember);
  margin-bottom:8px;
}

.wrap{max-width:1180px;margin:0 auto;padding:0 7vw}
.essay{padding:72px 0 40px}
.essay__grid{
  display:grid;
  grid-template-columns:minmax(0,2.1fr) minmax(240px,1fr);
  gap:56px;
}
.essay h2{
  margin:48px 0 14px;
  font:700 clamp(28px,3.6vw,42px)/1.12 var(--serif);
  letter-spacing:-.02em;
}
.essay h2:first-child{margin-top:0}
.essay p{margin:0 0 16px}
.essay .drop::first-letter{
  float:left;
  font:700 5.2rem/.8 var(--serif);
  padding:.08em .12em 0 0;
  color:var(--copper);
}
.pull{
  margin:36px 0;
  padding:8px 0 8px 22px;
  border-left:3px solid var(--copper);
  font:italic 26px/1.35 var(--serif);
  color:var(--pine);
}
.toc{
  position:sticky;top:24px;
  padding:22px 22px 18px;
  background:var(--paper);
  border:1px solid var(--line);
}
.toc p{
  margin:0 0 12px;
  font:700 11px/1 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--copper);
}
.toc a{
  display:block;
  padding:7px 0;
  border-top:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  font:600 14px/1.35 var(--sans);
}
.toc a:hover{color:var(--copper)}
.notice{
  margin:0 0 28px;
  padding:12px 14px;
  background:rgba(196,120,74,.1);
  border-left:3px solid var(--copper);
  font:600 14px/1.45 var(--sans);
  color:var(--mute);
}

.cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:28px 0 8px;
}
.card{
  padding:22px 22px 18px;
  background:var(--paper);
  border:1px solid var(--line);
}
.card em{
  display:block;
  font:700 11px/1 var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--copper);
  font-style:normal;
  margin-bottom:8px;
}
.card strong{display:block;font:700 22px/1.15 var(--serif);margin-bottom:8px}

.faq{margin:10px 0 0}
.faq details{
  border-top:1px solid var(--line);
  padding:14px 0;
}
.faq summary{
  cursor:pointer;
  font:700 20px/1.3 var(--serif);
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:10px 0 0;color:var(--mute)}

.slate{
  background:var(--night);
  color:var(--snow);
  padding:72px 0;
  margin:56px 0 0;
}
.slate h2{margin:0 0 16px;font:700 clamp(28px,4vw,44px)/1.1 var(--serif)}
.slate p{max-width:40rem;color:rgba(244,239,228,.82)}

.inner{padding:56px 0 80px}
.inner h1{
  margin:0 0 12px;
  font:700 clamp(36px,5vw,64px)/1.05 var(--serif);
  letter-spacing:-.03em;
}
.inner .kicker{
  margin:0 0 10px;
  font:700 12px/1 var(--sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--copper);
}
.inner h2{margin:36px 0 10px;font:700 28px/1.15 var(--serif)}
.form label{
  display:block;margin:16px 0 6px;
  font:700 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;
}
.form input,.form textarea{
  width:100%;padding:12px 14px;
  border:1px solid var(--line);background:#fff;
  font:17px/1.4 var(--serif);color:var(--ink);
}
.form button{
  margin-top:18px;border:0;cursor:pointer;
  background:var(--pine);color:var(--snow);
  padding:13px 22px;
  font:700 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;
}
.ok{padding:14px 16px;background:var(--paper);border-left:3px solid var(--moss)}

.colophon{
  background:var(--night);
  color:rgba(244,239,228,.78);
  padding:48px 7vw 36px;
  font:16px/1.55 var(--serif);
}
.colophon__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:32px;
  max-width:1180px;margin:0 auto 28px;
}
.colophon__name{
  margin:0 0 8px;
  font:700 13px/1 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ember);
}
.colophon__k{
  margin:0 0 10px;
  font:700 11px var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ember);
}
.colophon a{display:block;color:var(--snow);text-decoration:none;margin:6px 0}
.colophon a:hover{color:var(--ember)}
.colophon__legal{
  max-width:1180px;margin:0 auto;
  padding-top:22px;
  border-top:1px solid rgba(244,239,228,.1);
  font-size:13px;color:rgba(244,239,228,.5);
}

@media(max-width:880px){
  .mast__rail{grid-template-columns:1fr;text-align:left}
  .mast__tag{text-align:left}
  .hero{min-height:78vh}
  .band,.essay__grid,.cards,.colophon__grid{grid-template-columns:1fr}
  .toc{position:static}
  .essay{padding:40px 0}
}