:root{
  --bg:#1d1815;
  --bg-alt:#251f1a;
  --bg-deep:#15110f;
  --bg-contrast:#f1ebdf;
  --text:#eae4d8;
  --muted:#9a8f82;
  --text-contrast:#1d1815;
  --accent:#c08a45;
  --accent-2:#728a63;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --pad-y:88px;
  --pad-x:52px;
  --col-gap:24px;
}

*{box-sizing:border-box}

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

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

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

a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(192,138,69,.45)}
a:hover{border-bottom-color:var(--accent)}

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

/* ---------- grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--col-gap);
  max-width:1320px;
  margin:0 auto;
  width:100%;
}

.block{grid-column:1 / span 6;min-width:0}

.step-0 .block{grid-column:1 / span 6}
.step-1 .block{grid-column:2 / span 6}
.step-2 .block{grid-column:3 / span 6}
.step-3 .block{grid-column:4 / span 6}

/* ---------- sections ---------- */
.sec{
  padding:var(--pad-y) var(--pad-x);
  margin:0;
}
.tone-a{background:var(--bg)}
.tone-b{background:var(--bg-alt)}
.tone-deep{background:var(--bg-deep)}
.tone-contrast{background:var(--bg-contrast);color:var(--text-contrast)}
.tone-contrast a{color:#8a5c1c;border-bottom-color:rgba(138,92,28,.4)}
.tone-contrast .secnum{color:#5c6f50}
.tone-contrast .caption{color:#6a6055}

/* ---------- typography ---------- */
h1,h2,h3{font-weight:400;margin:0}

h1{
  font-size:clamp(2.4rem,6.2vw,4.35rem);
  line-height:1.04;
  letter-spacing:-.015em;
  max-width:18ch;
}

h2{
  font-size:clamp(1.6rem,2.7vw,2.25rem);
  line-height:1.18;
  margin:0 0 22px;
  letter-spacing:-.01em;
}

h3{
  font-style:italic;
  font-size:1.22rem;
  line-height:1.3;
  margin:38px 0 12px;
}

p{margin:0 0 26px}
p:last-child{margin-bottom:0}

.lead{font-size:1.18rem}

.secnum{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent-2);
  margin:0 0 14px;
}

.caption{
  font-family:var(--sans);
  font-size:12px;
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--muted);
  margin:14px 0 0;
  max-width:48ch;
}

ul,ol{margin:0 0 26px;padding:0 0 0 1.15em}
li{margin:0 0 10px}
li::marker{color:var(--accent)}
ul.plain{list-style:none;padding:0}
ul.plain li{
  padding:0 0 10px 20px;
  border-left:2px solid rgba(114,138,99,.5);
  padding-left:16px;
  margin-bottom:14px;
}

dl{margin:0 0 26px}
dt{font-style:italic;color:var(--accent);margin:22px 0 4px}
dt:first-child{margin-top:0}
dd{margin:0}
.tone-contrast dt{color:#8a5c1c}

/* ---------- hero ---------- */
.hero-nav{
  background:var(--bg-alt);
  padding:20px var(--pad-x);
}
.hero-mid{
  background:var(--bg);
  padding:150px var(--pad-x) 60px;
  display:flex;
  align-items:flex-end;
}
.hero-low{
  background:var(--bg-deep);
  padding:70px var(--pad-x);
}
.hero-mid .grid,.hero-low .grid{width:100%}
.hero-mid h1{grid-column:1 / span 10}
.hero-low .intro{grid-column:1 / span 6;min-width:0}
.hero-low .topics{grid-column:8 / span 5;min-width:0}
.hero-low .topics ul{list-style:none;padding:0;margin:0}
.hero-low .topics li{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--muted);
  padding:9px 0;
  border-top:1px solid rgba(154,143,130,.22);
  margin:0;
}
.hero-low .topics li:last-child{border-bottom:1px solid rgba(154,143,130,.22)}

/* ---------- nav ---------- */
.mainnav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  align-items:baseline;
}
.mainnav li{margin:0}
.mainnav a,.brand{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  border-bottom:none;
}
.brand{
  color:var(--text);
  margin-right:auto;
  font-weight:600;
}
.mainnav a{color:var(--muted)}
.mainnav a:hover,.mainnav a[aria-current="page"]{color:var(--accent)}
.navbar{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:baseline;max-width:1320px;margin:0 auto}

/* ---------- images ---------- */
.figure-main{margin:0;grid-column:4 / span 9;min-width:0}
.figure-main img{width:100%;aspect-ratio:3/2;object-fit:cover}

.detail-fig{grid-column:2 / span 4;margin:0;min-width:0;align-self:start}
.detail-fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.detail-text{grid-column:7 / span 6;min-width:0}

/* ---------- footer ---------- */
.site-footer{
  background:var(--bg-contrast);
  color:var(--text-contrast);
  padding:64px var(--pad-x) 56px;
  margin:0;
}
.footer-name{
  font-size:clamp(2.8rem,11vw,7.5rem);
  line-height:.94;
  letter-spacing:-.03em;
  margin:0 0 54px;
  color:var(--text-contrast);
}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
  max-width:1320px;
  margin:0 auto;
}
.footer-name-wrap{max-width:1320px;margin:0 auto}
.footer-col h2,.footer-col .fh{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#5c6f50;
  margin:0 0 14px;
  padding-top:14px;
  border-top:2px solid #8a5c1c;
  display:block;
  width:56px;
}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin:0 0 8px}
.footer-col a{color:#8a5c1c;border-bottom-color:rgba(138,92,28,.35)}
.footer-col p{font-size:15px;line-height:1.55;margin:0;color:#43392f}
.footer-col li a,.footer-col p a{font-size:15px}

/* ---------- page header (inner pages) ---------- */
.page-head{
  background:var(--bg-deep);
  padding:110px var(--pad-x) 66px;
}
.page-head h1{grid-column:1 / span 9;margin-bottom:26px}
.page-head .intro{grid-column:1 / span 6;color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  :root{--pad-y:68px;--pad-x:36px;--col-gap:20px}
  .block,.step-0 .block,.step-1 .block,.step-2 .block,.step-3 .block{grid-column:1 / span 8}
  .figure-main{grid-column:3 / span 10}
  .detail-fig{grid-column:1 / span 5}
  .detail-text{grid-column:6 / span 7}
  .hero-mid h1,.page-head h1{grid-column:1 / span 12}
  .hero-low .intro{grid-column:1 / span 7}
  .hero-low .topics{grid-column:8 / span 5}
  .page-head .intro{grid-column:1 / span 8}
}

@media (max-width:760px){
  :root{--pad-y:52px;--pad-x:22px;--col-gap:16px}
  body{font-size:17px}
  .grid{display:block}
  .block,.step-0 .block,.step-1 .block,.step-2 .block,.step-3 .block,
  .figure-main,.detail-fig,.detail-text,
  .hero-mid h1,.hero-low .intro,.hero-low .topics,
  .page-head h1,.page-head .intro{grid-column:auto;width:100%}
  .hero-mid{padding:88px var(--pad-x) 42px}
  .hero-low .topics{margin-top:34px}
  .detail-text{margin-top:28px}
  .page-head{padding:74px var(--pad-x) 46px}
  .footer-cols{grid-template-columns:1fr;gap:30px}
  .footer-name{margin-bottom:38px}
  .mainnav ul{gap:8px 18px}
  h3{margin-top:30px}
}