:root{
  --bg:#f5f0df;
  --bg-alt:#e9e1c9;
  --bg-dark:#2f2a1e;
  --tx:#241f16;
  --tx2:#736b55;
  --tx-inv:#f5f0df;
  --ac:#8a6a1f;
  --ac2:#4a6b52;
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --step:80px;
}

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

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

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

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

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(34px,5.4vw,62px);line-height:1.05}
h2{font-size:clamp(23px,2.4vw,29px);line-height:1.15}
h3{font-size:19px;line-height:1.25;margin:0 0 8px}
p{margin:0 0 20px}
p:last-child{margin-bottom:0}
.lead{font-size:18px;line-height:1.75}
.note{font-size:13px;line-height:1.6;color:var(--tx2)}
strong{font-weight:600}

/* ---------- header / nav ---------- */
.site-head{background:var(--bg);border-bottom:0;padding:22px 0 18px}
.site-head .wrap{align-items:baseline;row-gap:10px}
.brand{
  grid-column:1/4;
  font-family:var(--serif);
  font-size:22px;
  font-weight:700;
  color:var(--tx);
  text-decoration:none;
  letter-spacing:.02em;
}
.brand:hover{color:var(--ac)}
.site-nav{grid-column:4/13;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:flex-end}
.site-nav a{
  color:var(--tx2);
  font-size:15px;
  text-decoration:none;
  padding:2px 0;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--tx);border-bottom-color:var(--ac)}
.site-nav a[aria-current="page"]{color:var(--tx);border-bottom-color:var(--ac)}

/* ---------- hero ---------- */
.hero{padding:56px 0 var(--step)}
.hero-title{grid-column:1/8}
.hero-intro{grid-column:8/13;align-self:start;padding-top:8px;color:var(--tx)}

.axis{margin-top:34px;position:relative;height:74px}
.axis-bar{display:block;height:2px;background:var(--ac);width:100%}
.axis-drop{position:absolute;top:2px;width:2px;background:var(--ac2)}
.axis-drop::after{
  content:"";
  position:absolute;
  left:-3px;
  bottom:-8px;
  width:8px;
  height:8px;
  background:var(--ac);
}
.axis-drop.d1{left:6%;height:44px}
.axis-drop.d2{left:31%;height:64px}
.axis-drop.d3{left:72%;height:26px}
.axis-drop.d3::after{background:var(--ac2)}

/* ---------- main figure ---------- */
.figure-main{
  grid-column:1/13;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  margin:0;
}
.figure-main img{grid-column:4/13;width:100%}
.figure-main figcaption{grid-column:1/4;align-self:end;padding-bottom:4px}

/* ---------- sections ---------- */
.band{padding:var(--step) 0}
.band-alt{background:var(--bg-alt)}
.band-dark{background:var(--bg-dark);color:var(--tx-inv)}
.band-dark h2,.band-dark h3{color:var(--tx-inv)}
.band-dark .note{color:#c4bda4}
.band-dark a{color:#d8b768}

.sec-head{grid-column:1/4;position:relative;padding-left:20px}
.sec-head::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:8px;
  height:8px;
  background:var(--ac);
}
.band-dark .sec-head::before{background:#d8b768}
.sec-head .kicker{display:block;font-family:var(--sans);font-size:13px;color:var(--ac2);margin-top:10px}
.band-dark .sec-head .kicker{color:#9dbca4}
.sec-body{grid-column:4/11}
.sec-body h3{margin-top:30px}
.sec-body h3:first-child{margin-top:0}

ul.list,ol.list{margin:0 0 20px;padding-left:0;list-style:none}
ol.list{counter-reset:li}
ul.list li,ol.list li{position:relative;padding-left:24px;margin-bottom:10px}
ul.list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:7px;
  height:7px;
  background:var(--ac);
}
ol.list li{counter-increment:li;padding-left:34px}
ol.list li::before{
  content:counter(li,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0;
  font-size:13px;
  color:var(--ac2);
  line-height:1.9;
}
.band-dark ul.list li::before{background:#d8b768}

/* ---------- dark detail block ---------- */
.detail-grid{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:32px}
.detail-figure{grid-column:1/6;margin:0}
.detail-figure figcaption{margin-top:12px}
.detail-text{grid-column:7/13;align-self:center}
.detail-text h2{margin-bottom:20px}

/* ---------- about layout ---------- */
.about-grid{grid-column:1/13;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.about-head{grid-column:1/4;padding-right:24px}
.about-body{grid-column:4/12;border-left:1px solid rgba(115,107,85,.35);padding-left:32px}
.about-body h2{margin-top:44px;margin-bottom:14px}
.about-body h2:first-child{margin-top:0}

/* ---------- text page ---------- */
.doc-head{grid-column:1/9;padding-bottom:8px}
.doc-body{grid-column:1/9}
.doc-body h2{margin-top:44px;margin-bottom:14px}
.doc-body h2:first-child{margin-top:0}
.doc-meta{grid-column:9/13;align-self:end;padding-bottom:8px}

/* ---------- contact / email ---------- */
.mail{font-family:var(--serif);font-size:21px}

/* ---------- footer ---------- */
.site-foot{background:var(--bg-dark);color:var(--tx-inv);padding:56px 0 44px;margin-top:0}
.foot-top{grid-column:1/13;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:baseline}
.foot-name{font-family:var(--serif);font-size:26px;font-weight:700}
.foot-mail{font-size:17px}
.site-foot a{color:#d8b768}
.foot-rule{grid-column:1/13;height:1px;background:rgba(245,240,223,.28);margin:24px 0 22px}
.foot-links{grid-column:1/9;display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none}
.foot-links a{color:#e6dfc7;font-size:15px;text-decoration:none;border-bottom:1px solid rgba(216,183,104,.55);padding-bottom:2px}
.foot-links a:hover{color:#fff}
.foot-about{grid-column:1/9;margin-top:20px;font-size:13px;line-height:1.7;color:#c4bda4}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-title{grid-column:1/9}
  .hero-intro{grid-column:1/10;padding-top:26px}
  .figure-main img{grid-column:3/13}
  .figure-main figcaption{grid-column:1/3}
  .sec-head{grid-column:1/5}
  .sec-body{grid-column:5/13}
  .detail-figure{grid-column:1/7}
  .detail-text{grid-column:7/13}
  .about-head{grid-column:1/5}
  .about-body{grid-column:5/13}
  .doc-head,.doc-body{grid-column:1/11}
  .doc-meta{grid-column:11/13}
}

@media (max-width:760px){
  :root{--step:48px}
  body{font-size:16px}
  .wrap{grid-template-columns:repeat(4,1fr);padding-left:18px;padding-right:18px}
  .brand{grid-column:1/5}
  .site-nav{grid-column:1/5;justify-content:flex-start;gap:8px 20px;margin-top:6px}
  .hero{padding-top:34px}
  .hero-title,.hero-intro{grid-column:1/5}
  .axis{height:58px;margin-top:26px}
  .axis-drop.d2{height:48px}
  .axis-drop.d1{height:34px}
  .figure-main{grid-column:1/5;grid-template-columns:repeat(4,1fr)}
  .figure-main img{grid-column:1/5}
  .figure-main figcaption{grid-column:1/5;margin-top:12px}
  .sec-head,.sec-body{grid-column:1/5}
  .sec-body{margin-top:22px}
  .detail-grid{grid-column:1/5;grid-template-columns:repeat(4,1fr)}
  .detail-figure,.detail-text{grid-column:1/5}
  .about-grid{grid-column:1/5;grid-template-columns:repeat(4,1fr)}
  .about-head{grid-column:1/5;padding-right:0}
  .about-body{grid-column:1/5;border-left:0;padding-left:0;margin-top:24px;border-top:1px solid rgba(115,107,85,.35);padding-top:24px}
  .doc-head,.doc-body,.doc-meta{grid-column:1/5}
  .doc-meta{margin-bottom:16px;align-self:start}
  .foot-top,.foot-rule,.foot-links,.foot-about{grid-column:1/5}
  .foot-top{flex-direction:column;align-items:flex-start;gap:8px}
}

.figure-band{padding-bottom:var(--step)}