:root{
  --bg:#171514;
  --bg-alt:#201c19;
  --bg-contrast:#ede9e3;
  --text:#e6e1da;
  --muted:#9a9088;
  --text-contrast:#171514;
  --accent:#f08a24;
  --accent2:#2f7a6e;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:96px;
}

*{box-sizing:border-box}

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

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

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

a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(240,138,36,.45)}
a:hover{border-bottom-color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}

.wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

/* ---------- header / nav ---------- */

.site-head{
  padding:26px 0 22px;
  border-bottom:1px solid rgba(230,225,218,.14);
}
.site-head .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 32px;
}
.brand{
  font-family:var(--serif);
  font-size:23px;
  letter-spacing:.01em;
  color:var(--text);
  border-bottom:0;
}
.brand:hover{color:var(--accent)}
.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
}
.site-nav a{
  color:var(--muted);
  font-size:15px;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent)}

/* ---------- generic sections ---------- */

.band{padding:var(--gap) 0}
.band--alt{background:var(--bg-alt)}
.band--contrast{background:var(--bg-contrast);color:var(--text-contrast)}
.band--contrast .caption{color:#5d564f}
.band--contrast a{color:#b45c05;border-bottom-color:rgba(180,92,5,.45)}
.band--contrast .num{color:#2f7a6e}
.band--contrast .rule{background:rgba(23,21,20,.22)}
.band--contrast .lede-mark{border-left-color:#2f7a6e}

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
h1{font-size:clamp(38px,6.2vw,68px);line-height:1.05;letter-spacing:-.01em}
h2{font-size:clamp(26px,3.2vw,36px);line-height:1.12;margin-bottom:20px}
h3{font-size:21px;line-height:1.25;margin:34px 0 10px}
p{margin:0 0 20px}
p:last-child{margin-bottom:0}

.num{
  font-family:var(--serif);
  font-size:14px;
  color:var(--accent2);
  letter-spacing:.06em;
  display:block;
  margin-bottom:8px;
}
.caption{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  font-style:italic;
  margin-top:12px;
}
.rule{
  height:1px;
  border:0;
  background:rgba(240,138,36,.55);
  margin:0;
  width:100%;
}

/* ---------- hero ---------- */

.hero{padding:78px 0 var(--gap)}
.hero__title{grid-column:1 / span 8}
.hero__lede{
  grid-column:1 / span 4;
  margin-top:40px;
  color:var(--muted);
  font-size:17px;
}
.hero__figure{
  grid-column:9 / span 4;
  grid-row:1 / span 2;
  align-self:end;
  max-width:480px;
  width:100%;
  margin:0;
  justify-self:end;
}
.hero__meta{
  grid-column:1 / span 8;
  margin-top:34px;
  font-size:15px;
  color:var(--muted);
}

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

.sec{position:relative}
.sec + .sec{margin-top:var(--gap)}
.sec__num{
  grid-column:1 / span 1;
  font-family:var(--serif);
  font-size:15px;
  color:var(--accent2);
  padding-top:8px;
}
.sec__body{grid-column:2 / span 6}
.sec__body--wide{grid-column:3 / span 8}
.sec__body--right{grid-column:5 / span 7}

.band--contrast .sec__num{color:#2f7a6e}

/* lists */

.checks{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:34px;
  row-gap:14px;
}
.checks li{
  position:relative;
  padding-left:22px;
  font-size:16px;
  line-height:1.65;
}
.checks li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--accent);
}
.steps{
  margin:22px 0 0;
  padding-left:20px;
}
.steps li{margin-bottom:14px;padding-left:6px}
.steps li::marker{color:var(--accent);font-family:var(--serif)}

.defs{margin:26px 0 0}
.defs dt{
  font-family:var(--serif);
  font-size:19px;
  margin-bottom:6px;
  padding-top:18px;
  border-top:1px solid rgba(47,122,110,.5);
}
.defs dd{margin:0 0 4px;color:var(--text)}
.band--contrast .defs dt{border-top-color:rgba(47,122,110,.55)}

/* ---------- detail (contrast) section ---------- */

.detail{align-items:start}
.detail__figure{
  grid-column:1 / span 4;
  margin:0;
}
.detail__text{grid-column:6 / span 6}
.detail__text .num{color:#2f7a6e}

/* ---------- about page ---------- */

.about-labels{
  grid-column:1 / span 3;
  list-style:none;
  margin:10px 0 0;
  padding:0;
  font-size:14px;
  color:var(--muted);
}
.about-labels li{
  padding:14px 0;
  border-bottom:1px solid rgba(230,225,218,.16);
}
.about-labels li:first-child{border-top:1px solid rgba(230,225,218,.16)}
.about-body{grid-column:6 / span 7}

/* ---------- legal ---------- */

.page-head{padding:70px 0 0}
.page-head h1{grid-column:1 / span 9;font-size:clamp(32px,4.6vw,52px)}
.page-head .page-lede{grid-column:1 / span 6;margin-top:26px;color:var(--muted)}
.doc{grid-column:2 / span 8}
.doc h2{margin-top:52px}
.doc h2:first-of-type{margin-top:0}
.doc ul{padding-left:20px}
.doc li{margin-bottom:10px}

/* ---------- footer ---------- */

.site-foot{
  background:var(--bg-contrast);
  color:var(--text-contrast);
  padding:64px 0 56px;
  margin-top:var(--gap);
}
.site-foot a{color:#b45c05;border-bottom-color:rgba(180,92,5,.4)}
.site-foot a:focus-visible{outline-color:#b45c05}
.foot-grid{
  display:grid;
  grid-template-columns:4fr 3fr 3fr;
  column-gap:32px;
  row-gap:34px;
  align-items:start;
}
.foot-name{
  font-family:var(--serif);
  font-size:clamp(30px,4vw,44px);
  line-height:1.05;
}
.foot-name span{
  display:block;
  font-family:var(--sans);
  font-size:14px;
  color:#5d564f;
  margin-top:12px;
  line-height:1.6;
  max-width:30ch;
}
.foot-nav ul{list-style:none;margin:0;padding:0}
.foot-nav li{margin-bottom:8px}
.foot-nav a{color:var(--text-contrast);border-bottom:1px solid rgba(23,21,20,.2);font-size:15px}
.foot-nav a:hover{color:#b45c05;border-bottom-color:#b45c05}
.foot-contact{font-size:15px}
.foot-contact p{margin-bottom:8px}
.foot-note{
  margin-top:44px;
  padding-top:18px;
  border-top:1px solid rgba(23,21,20,.2);
  font-size:13px;
  color:#5d564f;
}

/* ---------- responsive ---------- */

@media (max-width:1000px){
  .sec__body,.sec__body--wide,.sec__body--right{grid-column:2 / span 10}
  .detail__figure{grid-column:1 / span 5}
  .detail__text{grid-column:7 / span 6}
  .about-labels{grid-column:1 / span 4}
  .about-body{grid-column:6 / span 7}
  .doc{grid-column:1 / span 10}
  .page-head h1,.page-head .page-lede{grid-column:1 / span 11}
}

@media (max-width:820px){
  :root{--gap:64px}
  .hero{padding:52px 0 var(--gap)}
  .hero__title{grid-column:1 / span 12}
  .hero__lede{grid-column:1 / span 12;margin-top:26px}
  .hero__meta{grid-column:1 / span 12}
  .hero__figure{
    grid-column:1 / span 8;
    grid-row:auto;
    justify-self:start;
    margin-top:38px;
  }
  .detail__figure{grid-column:1 / span 8;margin-bottom:30px}
  .detail__text{grid-column:1 / span 12}
  .about-labels{grid-column:1 / span 12}
  .about-body{grid-column:1 / span 12;margin-top:34px}
  .doc,.page-head h1,.page-head .page-lede{grid-column:1 / span 12}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:620px){
  :root{--gap:56px}
  body{font-size:16px}
  .wrap{padding:0 20px}
  .sec__num{grid-column:1 / span 12;padding-top:0;margin-bottom:6px}
  .sec__body,.sec__body--wide,.sec__body--right{grid-column:1 / span 12}
  .hero__figure{grid-column:1 / span 12}
  .checks{grid-template-columns:1fr;row-gap:12px}
  .foot-grid{grid-template-columns:1fr}
  .site-head .wrap{flex-direction:column;align-items:flex-start}
  .site-nav ul{gap:6px 20px}
}