:root{
  --bg:#f1f2f0;
  --bg-alt:#e3e5e2;
  --dark:#141614;
  --ink:#171917;
  --muted:#6a6e6a;
  --accent:#2a6b3c;
  --accent-light:#9ec7a8;
  --gold:#8a6a20;
  --gold-light:#c8a558;
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;overflow-x:hidden}

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

img{max-width:100%}

a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

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

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

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

.site-head{border-bottom:1px solid var(--accent);padding:20px 0}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 30px}
.brand{font-family:var(--serif);font-size:1.2rem;letter-spacing:.02em;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--accent)}
.site-head nav ul{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:0;padding:0}
.site-head nav a{font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--muted);text-decoration:none;padding:4px 0}
.site-head nav a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}

/* ---------- typography ---------- */

h1{
  font-size:clamp(2.35rem,5.4vw,4.1rem);
  line-height:1.05;
  letter-spacing:-.015em;
  font-weight:400;
  margin:0;
}
h2{font-size:clamp(1.55rem,2.6vw,2.1rem);line-height:1.2;font-weight:400;letter-spacing:-.01em;margin:0 0 18px}
h3{font-style:italic;font-size:1.22rem;font-weight:400;line-height:1.35;margin:34px 0 10px}
p{margin:0 0 26px}
p:last-child{margin-bottom:0}

.lead{font-size:1.06rem;line-height:1.6}
.note{color:var(--muted);font-size:.95rem}

.rule{border:0;height:1px;background:var(--accent);opacity:.5;margin:0 0 46px}

.num{
  grid-column:1 / 3;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--gold);
  margin:6px 0 0;
}

.body6{grid-column:3 / 9}
.body8{grid-column:3 / 11}
.body10{grid-column:2 / 12}

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

.band{padding:72px 0 96px}
.band--alt{background:var(--bg-alt)}

.band--dark{background:var(--dark);color:var(--bg);padding:88px 0 96px}
.band--dark .rule{background:var(--gold-light);opacity:.45}
.band--dark .num{color:var(--gold-light)}
.band--dark a{color:var(--accent-light)}
.band--dark a:hover{color:#fff}
.band--dark .note,.band--dark figcaption{color:rgba(241,242,240,.68)}
.band--dark :focus-visible{outline-color:var(--bg)}

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

.hero{padding:66px 0 84px}
.hero h1{grid-column:1 / 9;grid-row:1}
.hero .lead{grid-column:1 / 5;grid-row:2;margin:36px 0 0}
.hero figure{grid-column:9 / 13;grid-row:2;margin:-3.6rem 0 0;max-width:480px;justify-self:end}
.hero figure img{display:block;width:100%;height:auto}

figure{margin:0}
figcaption{font-style:italic;font-size:.9rem;line-height:1.5;color:var(--muted);margin-top:12px}

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

.list{list-style:none;margin:0;padding:0}
.list li{position:relative;padding-left:22px;margin-bottom:14px;line-height:1.55}
.list li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:1px;background:var(--accent)}
.band--dark .list li::before{background:var(--accent-light)}

.cols2{display:grid;grid-template-columns:1fr 1fr;column-gap:44px;row-gap:0}

.index-list{list-style:none;margin:0;padding:0}
.index-list li{border-top:1px solid rgba(42,107,60,.32);padding:12px 0}
.index-list a{text-decoration:none;color:var(--ink)}
.index-list a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.index-list .ix{font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--gold);margin-right:14px}

/* ---------- dark detail block ---------- */

.detail-fig{grid-column:2 / 7;max-width:430px}
.detail-fig img{display:block;width:100%;height:auto}
.detail-text{grid-column:8 / 13}

/* ---------- about layout ---------- */

.about-labels{grid-column:1 / 4;font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--muted);margin:8px 0 0;padding:0;list-style:none}
.about-labels li{border-top:1px solid rgba(42,107,60,.4);padding:14px 0}
.about-labels li:last-child{border-bottom:1px solid rgba(42,107,60,.4)}
.about-text{grid-column:6 / 13}

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

.site-foot{background:var(--dark);color:var(--bg);padding:62px 0 46px}
.foot-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px;row-gap:34px}
.foot-name{grid-column:1 / 5;font-size:1.85rem;line-height:1.15;margin:0}
.foot-name span{display:block;font-size:.85rem;font-style:italic;color:rgba(241,242,240,.68);margin-top:12px;line-height:1.5}
.foot-nav{grid-column:6 / 9}
.foot-nav ul{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:12px;letter-spacing:.08em}
.foot-nav li{margin-bottom:12px}
.foot-nav a{color:rgba(241,242,240,.85);text-decoration:none}
.foot-nav a:hover{color:var(--accent-light);text-decoration:underline;text-underline-offset:4px}
.foot-mail{grid-column:10 / 13}
.foot-mail p{margin:0 0 10px;font-size:.95rem}
.foot-mail a{color:var(--accent-light)}
.site-foot :focus-visible{outline-color:var(--bg)}
.foot-legal{grid-column:1 / 13;border-top:1px solid rgba(200,165,88,.35);padding-top:18px;font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:rgba(241,242,240,.6);margin:10px 0 0}

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

@media (max-width:1040px){
  .body6{grid-column:3 / 11}
  .body8{grid-column:3 / 12}
  .body10{grid-column:2 / 13}
  .hero h1{grid-column:1 / 10}
  .hero .lead{grid-column:1 / 6}
  .hero figure{grid-column:10 / 13;margin-top:-2.4rem}
  .detail-fig{grid-column:1 / 6}
  .detail-text{grid-column:7 / 13}
  .about-text{grid-column:5 / 13}
}

@media (max-width:820px){
  body{font-size:17px}
  .grid,.foot-grid{grid-template-columns:1fr;column-gap:0}
  .grid > *,.foot-grid > *{grid-column:1 / -1 !important;grid-row:auto !important}
  .hero{padding:44px 0 52px}
  .hero .lead{margin-top:26px}
  .hero figure{margin:34px 0 0;max-width:420px;justify-self:start}
  .band{padding:44px 0 56px}
  .band--dark{padding:52px 0 56px}
  .rule{margin-bottom:32px}
  .num{margin:0 0 10px}
  .detail-fig{max-width:100%;margin-bottom:30px}
  .cols2{grid-template-columns:1fr;column-gap:0}
  .about-labels{margin-bottom:28px}
  .site-foot{padding:48px 0 38px}
  .foot-name{font-size:1.6rem}
}

@media (max-width:480px){
  .wrap{padding:0 20px}
  h1{font-size:2.05rem}
}