:root{
  --bg:#f6f0e6;
  --bg-alt:#eadcc6;
  --dark:#4a2b1b;
  --ink:#2c1f15;
  --muted:#6e5d49;
  --acc:#a9631d;
  --acc-deep:#8f4f12;
  --acc-light:#d79a4e;
  --acc2:#2a3f63;
  --acc2-light:#a9bede;
  --mono:ui-monospace,Consolas,'Liberation Mono',monospace;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --rule:6px;
  --bridge:5px;
}

*,*::before,*::after{box-sizing:border-box}

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

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

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

a{color:var(--acc-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--ink)}
a:focus-visible,:focus-visible{outline:3px solid var(--acc);outline-offset:3px}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

h1,h2,h3,.mono{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:700;
  line-height:1.28;
}

h1{font-size:clamp(1.55rem,4.4vw,2.6rem);letter-spacing:.09em;margin:0}
h2{font-size:clamp(1.05rem,2.2vw,1.32rem);margin:0 0 26px}
h3{font-size:.94rem;letter-spacing:.16em;margin:34px 0 12px;color:var(--acc-deep)}

.num{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.3em;
  color:var(--acc2);
  display:block;
  margin-bottom:14px;
}

.caption{
  font-family:var(--mono);
  font-size:.7rem;
  line-height:1.7;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- page frame ---------- */

.wrap{max-width:1440px;margin:0 auto;border-left:var(--rule) solid var(--ink);border-right:var(--rule) solid var(--ink)}

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

.masthead{
  background:var(--bg);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 30px;
  padding:22px 44px;
  border-bottom:var(--rule) solid var(--ink);
}

.brand{
  font-family:var(--mono);
  font-size:1.02rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--acc-deep)}

.mainnav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
}
.mainnav a{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border-bottom:2px solid transparent;
  padding-bottom:3px;
}
.mainnav a:hover{border-bottom-color:var(--acc);color:var(--acc-deep)}
.mainnav a[aria-current="page"]{border-bottom-color:var(--acc2);color:var(--acc-deep)}

/* ---------- grid bands ---------- */

.band{border-bottom:var(--rule) solid var(--ink)}
.band:last-of-type{border-bottom:none}

.cells{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--bridge);
  background:var(--ink);
}

.cell{padding:72px 44px;background:var(--bg)}
.cell.alt{background:var(--bg-alt)}
.cell.dark{background:var(--dark);color:var(--bg)}
.cell.amber{background:var(--acc-deep);color:var(--bg)}
.cell.solid{background:var(--acc);padding:0;min-height:120px}
.cell.tight{padding:34px 44px}
.cell.flush{padding:0}

.c3{grid-column:span 3}
.c4{grid-column:span 4}
.c5{grid-column:span 5}
.c7{grid-column:span 7}
.c8{grid-column:span 8}
.c12{grid-column:span 12}

.cell.dark h2,.cell.amber h2{color:var(--bg)}
.cell.dark h3{color:var(--acc-light)}
.cell.dark .num,.cell.amber .num{color:var(--acc2-light)}
.cell.dark .caption{color:var(--acc-light)}
.cell.amber .caption{color:var(--bg)}
.cell.dark a{color:var(--acc-light)}
.cell.amber a{color:var(--bg)}

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

.hero .cells{grid-auto-rows:auto}
.hero-title{grid-column:span 7;grid-row:span 2;display:flex;flex-direction:column;justify-content:center}
.hero-title h1{max-width:20ch}
.hero-kicker{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--acc2);
  margin-bottom:26px;
}
.hero-lead{grid-column:span 5}
.hero-lead p{font-size:1.05rem;line-height:1.7}
.hero-block{grid-column:span 5}
.hero-index{grid-column:span 12}

.index-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 34px;
}
.index-list a{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border-bottom:2px solid var(--acc);
  padding-bottom:2px;
}
.index-list a:hover{color:var(--acc-deep);border-bottom-color:var(--acc2)}

/* ---------- figures ---------- */

.figure-cell{padding:0;background:var(--ink)}
.figure-cell img{width:100%;height:auto}

.fig-note{padding:34px 44px}
.fig-note .caption{display:block}

.detail-fig{margin:0}
.detail-fig img{width:100%;height:auto;border:var(--bridge) solid var(--ink)}
.detail-fig figcaption{margin-top:16px}

/* ---------- lists ---------- */

ul.checklist,ol.steps{margin:0 0 1.2em;padding:0 0 0 1.35em}
ul.checklist{list-style:none;padding-left:0}
ul.checklist li{position:relative;padding-left:26px;margin-bottom:11px}
ul.checklist li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:12px;height:3px;
  background:var(--acc);
}
.cell.dark ul.checklist li::before{background:var(--acc-light)}
ol.steps li{margin-bottom:11px;padding-left:6px}
ol.steps{list-style:decimal}
ol.steps::marker{font-family:var(--mono)}

dl.gloss{margin:0}
dl.gloss dt{font-family:var(--mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-deep);margin-top:22px}
dl.gloss dd{margin:6px 0 0}
.cell.dark dl.gloss dt{color:var(--acc-light)}

.rule-thin{border:0;border-top:2px solid var(--acc2);margin:32px 0;width:70px}

.lead{font-size:1.05rem;line-height:1.7}

.contact-line{font-family:var(--mono);font-size:.95rem;letter-spacing:.08em}

/* ---------- about panel ---------- */

.panel .cells{grid-template-columns:repeat(12,1fr)}
.panel-block{grid-column:span 12}

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

.sitefoot{border-top:var(--rule) solid var(--ink)}
.sitefoot .cells{background:var(--ink)}
.foot-name{grid-column:span 3;background:var(--dark);color:var(--bg)}
.foot-nav{grid-column:span 4;background:var(--bg-alt)}
.foot-contact{grid-column:span 5;background:var(--bg)}
.sitefoot .cell{padding:44px}
.foot-name .brand{color:var(--bg);display:block;margin-bottom:14px}
.foot-name .brand:hover{color:var(--acc-light)}
.foot-name .caption{color:var(--acc-light)}
.sitefoot ul{list-style:none;margin:0;padding:0}
.sitefoot li{margin-bottom:9px}
.sitefoot .foot-nav a{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border-bottom:2px solid transparent;
}
.sitefoot .foot-nav a:hover{border-bottom-color:var(--acc);color:var(--acc-deep)}

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

@media (max-width:1000px){
  .cell{padding:56px 32px}
  .cell.tight,.fig-note,.sitefoot .cell{padding:32px}
  .masthead{padding:20px 32px}
  .c3,.c4,.c5,.c7,.c8,
  .hero-title,.hero-lead,.hero-block,.hero-index,
  .foot-name,.foot-nav,.foot-contact{grid-column:span 12}
  .hero-title{grid-row:auto}
  .cell.solid{min-height:64px}
}

@media (max-width:620px){
  body{font-size:16px}
  .wrap{border-left:0;border-right:0}
  .cell{padding:40px 20px}
  .cell.tight,.fig-note,.sitefoot .cell{padding:26px 20px}
  .masthead{padding:18px 20px}
  .brand{letter-spacing:.3em}
  .mainnav ul{gap:8px 18px}
  h1{letter-spacing:.05em}
}