:root{
  --bg:#f3eeea;
  --bg-alt:#e6ddd6;
  --bg-dark:#3b2029;
  --ink:#241b1d;
  --ink-soft:#7b6a68;
  --ink-light:#f3eeea;
  --accent:#8b2f45;
  --accent2:#a8642e;
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --pad-y:88px;
  --pad-x:52px;
}

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

h1,h2,h3,nav,.meta,.caption,.kicker,.foot-nav{font-family:var(--sans);}

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

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

.band{
  padding:var(--pad-y) var(--pad-x);
  background:var(--bg);
}
.band--alt{background:var(--bg-alt);}
.band--dark{background:var(--bg-dark);color:var(--ink-light);}
.band--dark h2,.band--dark h3{color:var(--ink-light);}
.band--dark a{color:#e7b7a0;}
.band--dark .caption,.band--dark .kicker{color:#c8a99f;}

/* stepped indent 0,1,2,3 */
.step0 .col{grid-column:1 / span 6;}
.step1 .col{grid-column:2 / span 6;}
.step2 .col{grid-column:3 / span 6;}
.step3 .col{grid-column:4 / span 6;}

.kicker{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent2);
  font-weight:700;
  margin:0 0 14px;
}

h2{
  font-size:clamp(26px,3.4vw,40px);
  line-height:1.06;
  letter-spacing:-.02em;
  font-weight:800;
  margin:0 0 22px;
}
h3{
  font-size:20px;
  line-height:1.25;
  letter-spacing:-.01em;
  font-weight:700;
  margin:34px 0 10px;
}
p{margin:0 0 20px;}
p:last-child{margin-bottom:0;}

ul,ol{margin:0 0 22px;padding-left:20px;}
li{margin-bottom:10px;}
li::marker{color:var(--accent);}
.band--dark li::marker{color:#e7b7a0;}

.lead{font-size:20px;}
.caption{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.5;
  color:var(--ink-soft);
  margin:12px 0 0;
}

/* --- hero: three stacked layers --- */
.hero{display:block;}
.layer{padding:0 var(--pad-x);}

.layer--nav{
  background:var(--bg-alt);
  padding-top:18px;
  padding-bottom:18px;
}
.topbar{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px 32px;
  justify-content:space-between;
}
.brand{
  font-family:var(--sans);
  font-weight:800;
  font-size:19px;
  letter-spacing:-.01em;
  text-decoration:none;
  color:var(--ink);
}
.brand span{color:var(--accent);}
.topbar nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  margin:0;
  padding:0;
}
.topbar nav li{margin:0;}
.topbar nav a{
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.topbar nav a:hover,.topbar nav a[aria-current="page"]{
  border-bottom-color:var(--accent);
  color:var(--accent);
}

.layer--title{
  background:var(--bg);
  padding-top:96px;
  padding-bottom:44px;
  min-height:34vh;
  display:flex;
  align-items:flex-end;
}
.layer--title .inner{width:100%;}
h1{
  font-size:clamp(38px,7vw,82px);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:800;
  margin:0;
  max-width:15ch;
}
.page-head h1{max-width:18ch;}

.layer--intro{
  background:var(--bg-alt);
  padding-top:56px;
  padding-bottom:64px;
}
.layer--intro .lead{grid-column:1 / span 6;margin:0;}
.layer--intro .topics{
  grid-column:8 / span 5;
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
}
.layer--intro .topics li{
  margin:0;
  padding:9px 0;
  border-top:1px solid rgba(123,106,104,.35);
}
.layer--intro .topics li:first-child{border-top:none;padding-top:0;}
.layer--intro .topics a{
  color:var(--ink);
  text-decoration:none;
  display:block;
}
.layer--intro .topics a:hover{color:var(--accent);}
.layer--intro .topics .num{
  color:var(--accent2);
  font-weight:700;
  margin-right:10px;
  font-size:12px;
}

/* --- main image block --- */
.figure-band{padding-top:64px;padding-bottom:64px;}
.figure-main{
  grid-column:4 / span 9;
  margin:0;
}
.figure-main img{width:100%;}

/* --- detail image inside dark band --- */
.detail{align-items:start;row-gap:36px;}
.detail figure{
  grid-column:1 / span 5;
  margin:0;
}
.detail .col-text{grid-column:7 / span 6;}

/* --- footer --- */
.site-footer{
  background:var(--bg-dark);
  color:var(--ink-light);
  padding:72px var(--pad-x) 56px;
  margin:0;
}
.footer-name{
  font-family:var(--sans);
  font-weight:800;
  font-size:clamp(46px,13vw,168px);
  line-height:.86;
  letter-spacing:-.045em;
  margin:0 0 56px;
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
}
.footer-cols section h2{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:700;
  color:#c8a99f;
  margin:0 0 14px;
  padding-top:14px;
  border-top:2px solid var(--accent2);
  display:block;
}
.foot-nav{list-style:none;margin:0;padding:0;font-size:15px;}
.foot-nav li{margin-bottom:8px;}
.foot-nav a{color:var(--ink-light);text-decoration:none;}
.foot-nav a:hover{color:#e7b7a0;text-decoration:underline;}
.footer-cols p{font-size:15px;line-height:1.6;color:#d9c8c2;}
.footer-cols a{color:#e7b7a0;}
.footer-note{
  margin-top:48px;
  font-family:var(--sans);
  font-size:13px;
  color:#c8a99f;
}

/* --- page head for inner pages --- */
.page-head .layer--title{min-height:0;padding-top:80px;padding-bottom:40px;}
.page-head .layer--intro{padding-bottom:56px;}
.page-head .layer--intro .lead{grid-column:1 / span 7;}

/* --- responsive --- */
@media (max-width:1000px){
  :root{--pad-y:64px;--pad-x:36px;}
  .figure-main{grid-column:2 / span 11;}
  .layer--intro .lead{grid-column:1 / span 12;}
  .layer--intro .topics{grid-column:1 / span 12;margin-top:32px;}
  .detail figure{grid-column:1 / span 6;}
  .detail .col-text{grid-column:7 / span 6;}
  .step0 .col,.step1 .col,.step2 .col,.step3 .col{grid-column:1 / span 10;}
  .step1 .col{grid-column:2 / span 10;}
  .step2 .col{grid-column:3 / span 10;}
  .page-head .layer--intro .lead{grid-column:1 / span 12;}
}

@media (max-width:720px){
  :root{--pad-y:48px;--pad-x:20px;}
  body{font-size:17px;}
  .lead{font-size:18px;}
  .topbar{flex-direction:column;align-items:flex-start;gap:12px;}
  .topbar nav ul{gap:8px 18px;}
  .layer--title{padding-top:56px;min-height:0;}
  .figure-main,
  .detail figure,
  .detail .col-text,
  .step0 .col,.step1 .col,.step2 .col,.step3 .col{grid-column:1 / span 12;}
  .footer-cols{grid-template-columns:1fr;gap:28px;}
  .figure-band{padding-top:40px;padding-bottom:40px;}
}