:root{
  --bg:#e8e6e1;
  --bg-alt:#d3d0c9;
  --bg-dark:#2a2a28;
  --ink:#17171a;
  --ink-soft:#6a6862;
  --ink-inv:#e8e6e1;
  --rust:#8c4a2f;
  --steel:#55707a;
  --seam:4px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{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.72;
  overflow-x:hidden;
}

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

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

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- grid modules ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--seam);
}
.mod{padding:28px 26px;background:var(--bg-alt)}
.c4{grid-column:span 4}
.c5{grid-column:span 5}
.c6{grid-column:span 6}
.c7{grid-column:span 7}
.c8{grid-column:span 8}
.c12{grid-column:span 12}
.off2{grid-column:3/span 6}

.fill-rust{background:var(--rust)}
.fill-steel{background:var(--steel)}
.fill-dark{background:var(--bg-dark)}
.fill-bg{background:var(--bg)}
.mod-plain{background:var(--bg)}

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:0}
h1{font-size:2.5rem;line-height:1.16;margin:0}
h2{font-size:1.72rem;line-height:1.24;margin:0 0 14px}
h3{font-size:1.24rem;font-style:italic;margin:26px 0 8px}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}

.label{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel);
  margin:0 0 10px;
}
.num{font-family:var(--sans);font-size:12px;letter-spacing:.18em;color:var(--steel)}
.lead{font-size:1.08rem}
.cap{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:10px 0 0}
.soft{color:var(--ink-soft)}

ul,ol{margin:0 0 16px;padding-left:0;list-style:none}
ul li{position:relative;padding-left:22px;margin-bottom:9px}
ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;background:var(--rust);
}
ol{counter-reset:s}
ol li{position:relative;padding-left:34px;margin-bottom:11px;counter-increment:s}
ol li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:.1em;
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;color:var(--steel);
}

/* ---------- header / nav ---------- */
.masthead{background:var(--bg-dark);color:var(--ink-inv)}
.masthead .wrap{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:14px 32px;padding-top:20px;padding-bottom:20px;
}
.brand{
  font-family:var(--serif);font-size:1.32rem;color:var(--ink-inv);
  text-decoration:none;letter-spacing:.02em;
}
.brand:hover{text-decoration:underline}
.masthead nav{margin-left:auto}
.masthead ul{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;list-style:none;padding:0}
.masthead li{padding:0;margin:0}
.masthead li::before{display:none}
.masthead a{
  color:var(--ink-inv);font-size:14px;letter-spacing:.06em;
  text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
}
.masthead a:hover,.masthead a[aria-current="page"]{border-bottom-color:var(--rust)}
.masthead :focus-visible{outline-color:#c9764f}

/* ---------- tile separator ---------- */
.tiles{display:flex;flex-wrap:wrap;gap:var(--seam);margin:0}
.tiles span{width:24px;height:24px;background:var(--bg-alt);flex:0 0 auto}
.tiles span:nth-child(3n){background:var(--rust)}
.tiles span:nth-child(5n){background:var(--steel)}

/* ---------- sections ---------- */
.band{padding:72px 0}
.band-alt{background:var(--bg-alt)}
.band-dark{background:var(--bg-dark);color:var(--ink-inv)}
.band-dark h2,.band-dark h3{color:var(--ink-inv)}
.band-dark .label,.band-dark .num{color:#9fb3b9}
.band-dark .cap{color:#a8a69f}
.band-dark a{color:#d29168}
.band-dark ul li::before{background:#d29168}
.band-dark :focus-visible{outline-color:#d29168}
.band-alt .mod{background:var(--bg)}

.hero{padding:72px 0 0}
.hero .mod{background:var(--bg-alt)}
.hero-head{display:flex;flex-direction:column;justify-content:center;min-height:230px}
.hero-head h1{max-width:14ch}
.tile-mod{min-height:56px}

.figure-mod{padding:0;background:transparent}
.figure-mod img{width:100%}
.side-cap{display:flex;flex-direction:column;justify-content:flex-end}

.textcol{max-width:70ch}
.stack>*+*{margin-top:var(--seam)}

.detail-figure{margin:0}
.detail-figure img{width:100%}

/* ---------- footer ---------- */
.site-foot{background:var(--bg-alt);padding:48px 0 56px}
.site-foot .tiles{margin-bottom:24px}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--seam)}
.foot-grid>div{background:var(--bg);padding:22px 20px}
.foot-grid h2{font-size:1.05rem;margin:0 0 8px}
.foot-grid p{font-size:14px;line-height:1.6;margin:0 0 8px}
.foot-grid ul{margin:0}
.foot-grid li{padding-left:0;margin-bottom:6px;font-size:14px}
.foot-grid li::before{display:none}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .band,.hero{padding:56px 0}
  .hero{padding-bottom:0}
  h1{font-size:2.1rem}
  .c4,.c5,.c6,.c7,.c8,.off2{grid-column:span 12}
  .c4.half,.c6.half{grid-column:span 6}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .band,.hero{padding:48px 0}
  .hero{padding-bottom:0}
  h1{font-size:1.82rem}
  h2{font-size:1.42rem}
  .mod{padding:22px 18px}
  .c4.half,.c6.half{grid-column:span 12}
  .tile-mod{min-height:24px}
  .foot-grid{grid-template-columns:1fr}
  .masthead .wrap{flex-direction:column;align-items:flex-start}
  .masthead nav{margin-left:0}
}