:root{
  --cream:#F3EDE1;
  --cream-deep:#E8DFCD;
  --plum:#3A1B34;
  --plum-soft:#6B4462;
  --green:#2E4A38;
  --maize:#E9BE2C;
  --ink:#33302C;
  --rule:#CFC3AC;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}

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

a{color:var(--plum);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--green)}
a:focus-visible,
:focus-visible{outline:3px solid var(--green);outline-offset:3px}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.narrow{max-width:620px}
.mid{max-width:820px}
.edge-left{max-width:560px;margin-left:0}
.center-col{max-width:640px;margin-left:auto;margin-right:auto}
.offset-right{max-width:600px;margin-left:auto}

/* ---------- header ---------- */
.site-head{
  border-bottom:1px solid var(--rule);
  padding:14px 0;
}
.site-head .wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  align-items:baseline;
  justify-content:space-between;
}
.brand{
  font-family:var(--serif);
  font-size:1.05rem;
  letter-spacing:.18em;
  color:var(--plum);
  text-decoration:none;
}
.nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.86rem}
.nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--green);color:var(--plum)}

/* ---------- hero ---------- */
.hero{padding:52px 0 12px;position:relative}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:34px 40px;
  align-items:start;
}
.hero-art{grid-column:2;position:relative}
.hero-art img{width:100%;border:1px solid var(--rule)}
.hero-art figcaption{
  font-size:.76rem;
  line-height:1.5;
  color:var(--plum-soft);
  margin-top:10px;
  max-width:30ch;
}
.hero-head{grid-column:1;align-self:end;padding-top:120px}
h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.5rem,7vw,5rem);
  line-height:1.02;
  letter-spacing:-.015em;
  color:var(--plum);
  margin:0;
  max-width:14ch;
}
.hero-meta{
  font-size:.8rem;
  color:var(--green);
  letter-spacing:.12em;
  margin:0 0 18px;
}
.plane-maize{
  width:96px;height:96px;background:var(--maize);
  margin:0 0 26px;
}
.plane-green{
  width:200px;height:12px;background:var(--green);
  margin:30px 0 0;
}
.hero-intro{
  margin:46px 0 0 auto;
  max-width:520px;
  border-top:2px solid var(--plum);
  padding-top:18px;
  font-size:1.03rem;
}
.hero-intro p{margin:0 0 14px}
.hero-intro p:last-child{margin-bottom:0}

/* ---------- sections ---------- */
main{display:block}
section{padding:56px 0}
section+section{border-top:1px solid var(--rule)}

h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.7rem);
  line-height:1.12;
  color:var(--plum);
  margin:0 0 20px;
  max-width:20ch;
}
h3{
  font-family:var(--sans);
  font-size:1rem;
  color:var(--green);
  margin:28px 0 8px;
}
p{margin:0 0 16px;max-width:72ch}
.lede{font-size:1.08rem;color:var(--plum)}

.num-row{
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.num{
  font-family:var(--serif);
  font-size:clamp(3rem,7vw,5.4rem);
  line-height:.85;
  color:var(--cream-deep);
  -webkit-text-stroke:1px var(--plum-soft);
  margin:0;
}
.vrule{border-left:1px solid var(--rule);padding-left:28px}

ul,ol{margin:0 0 18px;padding-left:1.15rem;max-width:70ch}
li{margin:0 0 9px}
ul.plain{list-style:none;padding-left:0}
ul.plain li{
  border-top:1px solid var(--rule);
  padding:10px 0 10px 0;
  margin:0;
}

.checklist{list-style:none;padding-left:0;max-width:none}
.checklist li{
  border-bottom:1px solid var(--rule);
  padding:12px 0 12px 34px;
  position:relative;
  margin:0;
}
.checklist li::before{
  content:"";
  position:absolute;left:0;top:19px;
  width:14px;height:14px;
  background:var(--maize);
}

.figure-detail{margin:0;max-width:520px}
.figure-detail img{width:100%;border:1px solid var(--rule)}
.figure-detail figcaption{
  font-size:.78rem;line-height:1.55;color:var(--plum-soft);margin-top:10px;max-width:38ch;
}
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px;
  align-items:start;
}

.pair{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px 40px;
}

/* ---------- inner pages ---------- */
.page-head{padding:64px 0 30px}
.page-head h1{max-width:16ch}
.page-body{padding-bottom:64px}
.page-body h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-top:38px}
.about-note{
  max-width:560px;
  margin-left:auto;
  border-top:2px solid var(--plum);
  padding-top:18px;
}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--rule);
  padding:56px 0 44px;
  margin-top:20px;
}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:34px 40px;
  align-items:start;
}
.foot-mark{
  font-family:var(--serif);
  font-size:clamp(2.2rem,7vw,4.4rem);
  line-height:.95;
  letter-spacing:.02em;
  color:var(--plum);
  margin:0;
  word-break:normal;
}
.foot-mark span{display:block;width:120px;height:10px;background:var(--maize);margin-top:18px}
.foot-side{justify-self:end;text-align:right;font-size:.9rem}
.foot-side ul{list-style:none;padding:0;margin:0 0 14px}
.foot-side li{margin:0 0 7px}
.foot-side a{color:var(--ink)}
.foot-note{font-size:.8rem;color:var(--plum-soft);margin:18px 0 0;max-width:34ch;margin-left:auto}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);}
  .hero-art{grid-column:1;grid-row:1;max-width:340px;margin-left:auto}
  .hero-head{grid-column:1;grid-row:2;padding-top:26px}
  .hero-intro{margin-left:0}
  .split,.pair,.foot-grid{grid-template-columns:minmax(0,1fr)}
  .foot-side{justify-self:start;text-align:left}
  .foot-note{margin-left:0}
  .offset-right{margin-left:0}
  .about-note{margin-left:0}
}
@media (max-width:620px){
  body{font-size:16px}
  section{padding:40px 0}
  .num-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .vrule{border-left:0;padding-left:0}
  .wrap{padding:0 18px}
}