:root{
  --bg:#efeae1;
  --bg2:#e3dbce;
  --bg3:#d7cdbd;
  --dark:#2c3a5c;
  --tx:#2b2822;
  --mu:#6f6759;
  --ondark:#efeae1;
  --ac:#a83b2c;
  --ac2:#6e7a47;
  --ac2light:#b3c08c;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}

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

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

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

.wrap{
  max-width:1280px;
  margin:0 auto;
  padding:88px 52px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

.col6{grid-column:1 / span 6}
.s1 .col6{grid-column:2 / span 6}
.s2 .col6{grid-column:3 / span 6}
.s3 .col6{grid-column:4 / span 6}

.sec{background:var(--bg)}
.sec--alt{background:var(--bg2)}
.sec--dark{background:var(--dark);color:var(--ondark)}

.sec--dark a{color:var(--ondark);text-decoration-color:#c9a99f}
.sec--dark a:focus-visible{outline-color:var(--ondark)}

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

.hero{display:block}

.layer-nav{background:var(--bg)}
.layer-title{background:var(--bg2)}
.layer-intro{background:var(--bg3)}

.layer-nav .wrap{padding-top:22px;padding-bottom:22px}

.brandline{
  grid-column:1 / span 4;
  font-weight:700;
  font-size:19px;
  letter-spacing:-.01em;
}
.brandline a{color:var(--tx);text-decoration:none}
.brandline a:hover{text-decoration:underline;text-decoration-color:var(--ac)}

.mainnav{grid-column:5 / span 8;display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:flex-end}
.mainnav a{
  color:var(--tx);
  text-decoration:none;
  font-size:15px;
  padding-bottom:3px;
  border-bottom:2px solid transparent;
}
.mainnav a:hover,.mainnav a[aria-current="page"]{border-bottom-color:var(--ac)}

.layer-title .wrap{
  padding-top:110px;
  padding-bottom:44px;
  align-items:end;
  min-height:44vh;
}
.hero-kicker{
  grid-column:1 / span 12;
  color:var(--ac2);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 26px;
}
h1{
  grid-column:1 / span 10;
  margin:0;
  font-size:clamp(38px,6.4vw,78px);
  line-height:1.02;
  font-weight:700;
  letter-spacing:-.035em;
}

.layer-intro .wrap{padding-top:56px;padding-bottom:56px}
.hero-lead{grid-column:1 / span 6;margin:0}
.hero-topics{
  grid-column:8 / span 5;
  margin:0;
  padding:0;
  list-style:none;
  font-size:15px;
  color:var(--mu);
}
.hero-topics li{padding:7px 0;border-bottom:1px solid rgba(111,103,89,.28)}
.hero-topics li:first-child{border-top:1px solid rgba(111,103,89,.28)}

/* ---------- headings & text ---------- */

h2{
  margin:0 0 18px;
  font-size:clamp(23px,2.5vw,31px);
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.015em;
}
h3{
  margin:34px 0 10px;
  font-size:19px;
  font-weight:700;
  line-height:1.35;
}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.num{
  display:block;
  margin:0 0 12px;
  color:var(--ac2);
  font-size:13px;
  letter-spacing:.16em;
}
.sec--dark .num{color:var(--ac2light)}

.lead{font-size:19px;line-height:1.62}

ul.marks,ol.marks{margin:0 0 18px;padding-left:22px}
ul.marks li,ol.marks li{margin:0 0 9px}
ul.marks li::marker,ol.marks li::marker{color:var(--ac);font-weight:700}

.checklist{margin:0;padding:0;list-style:none}
.checklist li{
  padding:11px 0 11px 22px;
  border-bottom:1px solid rgba(111,103,89,.3);
  position:relative;
}
.checklist li:first-child{border-top:1px solid rgba(111,103,89,.3)}
.checklist li::before{
  content:"";
  position:absolute;
  left:0;top:22px;
  width:10px;height:2px;
  background:var(--ac);
}

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

.figmain{grid-column:4 / span 9;margin:0}
.figmain img{width:100%}
.figcap{
  color:var(--mu);
  font-size:13px;
  line-height:1.55;
  margin-top:12px;
  max-width:52ch;
}

.figblock .wrap{padding-top:0;padding-bottom:88px}

.figdetail{grid-column:2 / span 4;margin:0}
.figdetail img{width:100%}
.sec--dark .figcap{color:#c7c9c2}
.darktext{grid-column:7 / span 6}

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

.footer{background:var(--dark);color:var(--ondark);margin-top:0}
.footer .wrap{padding-top:72px;padding-bottom:72px}
.footer-name{
  grid-column:1 / span 12;
  margin:0;
  font-size:clamp(40px,10vw,124px);
  line-height:.92;
  font-weight:700;
  letter-spacing:-.045em;
}
.fcols{
  grid-column:1 / span 12;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:58px;
}
.fcol h2{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin:0 0 12px;color:var(--ac2light)}
.fcol .rule{display:block;width:46px;height:2px;background:var(--ac);margin-bottom:16px}
.fcol ul{list-style:none;margin:0;padding:0;font-size:15px}
.fcol li{margin-bottom:8px}
.fcol p{font-size:15px;color:#cfd2d9}
.footer a{color:var(--ondark)}
.footer a:focus-visible{outline-color:var(--ondark)}

/* ---------- pages ---------- */

.pagehead{background:var(--bg2)}
.pagehead .wrap{padding-top:74px;padding-bottom:52px}
.pagehead h1{grid-column:1 / span 9;font-size:clamp(32px,4.6vw,56px)}
.pagehead .num{grid-column:1 / span 12}

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

@media (max-width:1040px){
  .wrap{padding:64px 34px;column-gap:18px}
  .layer-title .wrap{padding-top:78px;min-height:0}
  .figmain{grid-column:3 / span 10}
  .figdetail{grid-column:1 / span 5}
  .darktext{grid-column:7 / span 6}
}

@media (max-width:860px){
  body{font-size:16.5px}
  .wrap{padding:48px 22px;column-gap:0;row-gap:0}
  .wrap .col6,
  .wrap h1,
  .wrap .hero-lead,
  .wrap .hero-topics,
  .wrap .figmain,
  .wrap .figdetail,
  .wrap .darktext,
  .wrap .brandline,
  .wrap .mainnav,
  .pagehead h1{grid-column:1 / -1}
  .layer-nav .wrap{padding-top:18px;padding-bottom:18px}
  .mainnav{justify-content:flex-start;margin-top:12px;gap:6px 18px}
  .hero-topics{margin-top:26px}
  .figdetail{max-width:440px;margin-bottom:30px}
  .figblock .wrap{padding-bottom:48px}
  .fcols{grid-template-columns:1fr;gap:28px;margin-top:40px}
}
