:root{
  --paper:#f6f0e6;
  --paper-alt:#eadcc6;
  --dark:#4a2b1b;
  --ink:#2c1f15;
  --ink-soft:#7c6a55;
  --amber:#a9631d;
  --indigo:#2a3f63;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --rhythm:76px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
}

a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
img{max-width:100%;height:auto;display:block}

/* ---------- grid ---------- */
.sheet{
  max-width:1180px;
  margin:0 auto;
  padding:0 22px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:22px;
}
.spine{
  grid-column:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  padding-top:14px;
}
.spine span{display:block;width:22px;height:2px;background:var(--amber);opacity:.75}
.spine span:nth-child(3n){width:12px;background:var(--indigo);opacity:.6}

.col-main{grid-column:2 / 9}
.col-wide{grid-column:2 / 11}
.col-lead{grid-column:2 / 10}

/* ---------- header / nav ---------- */
.masthead{border-bottom:1px solid rgba(44,31,21,.18)}
.masthead .sheet{padding-top:20px;padding-bottom:18px;align-items:baseline}
.wordmark{
  grid-column:1 / 5;
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
}
.wordmark:hover{color:var(--amber)}
.mainnav{grid-column:5 / 13;justify-self:end}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px}
.mainnav a{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink-soft);
  padding:4px 0;
  border-bottom:1px solid transparent;
}
.mainnav a:hover,.mainnav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--amber)}

/* ---------- running heads ---------- */
.runhead{
  grid-column:1 / 13;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--indigo);
  padding-bottom:8px;
  border-bottom:1px solid rgba(44,31,21,.2);
  margin:0 0 26px;
}
.runhead .num{color:var(--amber);margin-right:12px}

/* ---------- typography ---------- */
h1{
  font-size:clamp(34px,5.2vw,58px);
  line-height:1.1;
  font-weight:400;
  margin:0 0 22px;
  letter-spacing:-.01em;
}
h2{font-size:clamp(25px,3vw,33px);font-weight:400;line-height:1.24;margin:0 0 16px}
h3{font-size:21px;font-style:italic;font-weight:400;margin:30px 0 10px}
p{margin:0 0 1.15em;text-indent:0}
p + p{text-indent:1.7em}
.lead{font-size:20.5px;line-height:1.6;color:var(--ink)}
.rule-double{border:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);height:4px;margin:0 0 26px;max-width:230px}
.caption{
  font-family:var(--sans);
  font-size:12.5px;
  line-height:1.55;
  color:var(--ink-soft);
  letter-spacing:.02em;
  margin:10px 0 0;
}
.marks{display:flex;justify-content:center;gap:10px;margin:var(--rhythm) 0}
.marks span{width:26px;height:2px;background:var(--amber)}
.marks span:nth-child(2){background:var(--indigo)}

/* ---------- sections ---------- */
.band{padding:var(--rhythm) 0}
.band--alt{background:var(--paper-alt)}
.band--dark{background:var(--dark);color:var(--paper)}
.band--dark h2,.band--dark h3{color:var(--paper)}
.band--dark .runhead{color:#d8b98c;border-bottom-color:rgba(246,240,230,.28)}
.band--dark .runhead .num{color:#e0a45f}
.band--dark .caption{color:#cbb69a}
.band--dark a{color:#e0a45f}
.band--dark a:hover{color:var(--paper)}
.band--dark .spine span{background:#e0a45f;opacity:.85}
.band--dark .spine span:nth-child(3n){background:#93a9cf}

/* ---------- hero ---------- */
.hero{padding:calc(var(--rhythm) - 8px) 0 var(--rhythm)}
.hero .kicker{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--indigo);
  margin:0 0 18px;
}
.hero-text{grid-column:2 / 9}
.hero-fig{grid-column:7 / 13;margin-top:44px}
.hero-fig figure{margin:0}

/* ---------- lists ---------- */
ul.checks,ol.steps{margin:0 0 1.3em;padding-left:0;list-style:none}
ul.checks li{position:relative;padding-left:26px;margin-bottom:10px}
ul.checks li::before{
  content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--amber);
}
ol.steps{counter-reset:s}
ol.steps li{position:relative;padding-left:38px;margin-bottom:13px;counter-increment:s}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:.18em;
  font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--indigo);
}
.band--dark ol.steps li::before{color:#93a9cf}
.band--dark ul.checks li::before{background:#e0a45f}
dl.gloss{margin:0}
dl.gloss dt{font-style:italic;color:var(--ink);margin-top:18px}
.band--dark dl.gloss dt{color:var(--paper)}
dl.gloss dd{margin:4px 0 0}

/* ---------- dark section with detail image ---------- */
.detail-fig{grid-column:2 / 6;margin:0}
.detail-text{grid-column:7 / 13}
@media (min-width:861px){.detail-text{padding-top:10px}}

/* ---------- about ---------- */
.dropcap::first-letter{
  float:left;
  font-size:66px;
  line-height:.86;
  padding:6px 12px 0 0;
  color:var(--amber);
}

/* ---------- footer ---------- */
.sitefoot{
  background:var(--paper-alt);
  border-top:1px solid rgba(44,31,21,.2);
  padding:52px 0 46px;
  text-align:center;
}
.sitefoot .inner{max-width:760px;margin:0 auto;padding:0 22px}
.sitefoot .name{
  font-size:20px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px;
}
.sitefoot nav ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;justify-content:center}
.sitefoot nav li + li{border-left:1px solid rgba(44,31,21,.35)}
.sitefoot nav a{
  display:inline-block;padding:2px 14px;
  font-family:var(--sans);font-size:13px;letter-spacing:.04em;text-decoration:none;color:var(--ink);
}
.sitefoot nav a:hover{color:var(--amber)}
.sitefoot .mail{margin:0 0 10px}
.sitefoot .note{font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--ink-soft);margin:0}

/* ---------- responsive ---------- */
@media (max-width:860px){
  :root{--rhythm:46px}
  body{font-size:17px}
  .sheet{column-gap:16px;padding:0 18px}
  .spine{display:none}
  .col-main,.col-wide,.col-lead,.hero-text,.hero-fig,.detail-fig,.detail-text,.runhead{grid-column:1 / 13}
  .hero-fig{margin-top:30px}
  .masthead .sheet{padding-top:16px}
  .wordmark{grid-column:1 / 13;margin-bottom:12px}
  .mainnav{grid-column:1 / 13;justify-self:start}
  .mainnav ul{gap:6px 16px}
  .lead{font-size:19px}
  .dropcap::first-letter{font-size:52px}
}