:root{
  --bg:#1d1815;
  --bg-alt:#251f1a;
  --bg-contrast:#f1ebdf;
  --text:#eae4d8;
  --muted:#9a8f82;
  --text-dark:#1d1815;
  --accent:#c08a45;
  --accent-2:#728a63;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
}

.wrap{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
}

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

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

h1,h2,h3{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.05;
  margin:0;
  letter-spacing:-0.01em;
}

h1{font-size:clamp(38px,7.2vw,84px)}
h2{font-size:clamp(27px,3.4vw,40px);margin-bottom:24px}
h3{font-size:clamp(20px,2.1vw,24px);line-height:1.2;margin:36px 0 12px}

p{margin:0 0 22px}

a{color:var(--accent)}
a:hover{text-decoration-thickness:2px}

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

.caption{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin:0;
}

.eyebrow{
  font-size:13px;
  line-height:1.6;
  color:var(--accent-2);
  margin:0 0 18px;
}

.lead{font-size:20px;line-height:1.7}

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

.site-head{
  padding:26px 0 22px;
  border-bottom:1px solid #322a24;
}
.head-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 28px;
}
.brand{
  font-family:var(--serif);
  font-size:24px;
  line-height:1;
  color:var(--text);
  text-decoration:none;
}
.brand:hover{color:var(--accent)}

.site-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:12px 26px;
  list-style:none;
  margin:0;
  padding:0;
}
.site-nav a{
  font-size:15px;
  color:var(--text);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{
  color:var(--accent);
  border-bottom-color:var(--accent);
}

/* ---------- section rhythm ---------- */

.pad-l{padding:120px 0}
.pad-s{padding:56px 0}
.alt{background:var(--bg-alt)}

.contrast{
  background:var(--bg-contrast);
  color:var(--text-dark);
  padding:104px 0;
}
.contrast .caption{color:#5d5247}
.contrast .eyebrow{color:#4d6141}
.contrast a{color:#8a5d1f}

/* ---------- separators ---------- */

.rule{
  height:3px;
  background:var(--accent);
  border:0;
  margin:0;
  grid-column:1 / span 4;
}
.rule--center{grid-column:5 / span 4}
.rule--right{grid-column:9 / span 4}
.rule--green{background:var(--accent-2)}

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

.hero{padding:96px 0 0}

.hero-head{
  grid-column:1 / span 11;
  border-left:3px solid var(--accent);
  padding-left:28px;
}
.hero-head .l2{margin-left:8.33%}
.hero-head .l3{margin-left:16.66%}
.hero-head span{display:block}

.hero-intro{
  grid-column:2 / span 5;
  margin-top:44px;
}

.topic-line{
  grid-column:2 / span 9;
  margin:6px 0 0;
  font-size:14px;
  color:var(--muted);
}
.topic-line span{white-space:nowrap}
.topic-line span::after{
  content:"/";
  color:var(--accent);
  margin:0 10px;
}
.topic-line span:last-child::after{content:""}

/* ---------- main image ---------- */

.figure-main{
  grid-column:5 / span 8;
  margin:76px 0 0;
  display:grid;
  grid-template-columns:34px 1fr;
  column-gap:16px;
  align-items:end;
}
.figure-main img{
  grid-column:2;
  width:100%;
  height:auto;
  display:block;
}
.figure-main figcaption{
  grid-column:1;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  margin:0;
  max-height:420px;
}

/* ---------- text blocks ---------- */

.col-5{grid-column:1 / span 5}
.col-6{grid-column:1 / span 6}
.col-7{grid-column:1 / span 7}
.col-9{grid-column:1 / span 9}
.col-7-right{grid-column:6 / span 7}
.col-6-right{grid-column:7 / span 6}
.col-5-right{grid-column:8 / span 5}

.section-no{
  grid-column:1 / span 12;
  font-size:13px;
  color:var(--accent-2);
  margin:0 0 14px;
}

.side-note{
  grid-column:9 / span 4;
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  border-top:1px solid #3a312a;
  padding-top:16px;
  margin-top:8px;
}

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

ol.steps{
  list-style:none;
  counter-reset:step;
  margin:8px 0 0;
  padding:0;
}
ol.steps li{
  counter-increment:step;
  position:relative;
  padding:18px 0 18px 74px;
  border-top:1px solid #3a312a;
}
ol.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:14px;
  font-family:var(--serif);
  font-size:32px;
  line-height:1;
  color:var(--accent);
}
.contrast ol.steps li{border-top-color:#d8cfbc}

ul.marks{
  list-style:none;
  margin:8px 0 22px;
  padding:0;
}
ul.marks li{
  position:relative;
  padding:0 0 12px 26px;
}
ul.marks li::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  width:12px;
  height:3px;
  background:var(--accent);
}
ul.marks.green li::before{background:var(--accent-2)}

/* ---------- contrast section with detail image ---------- */

.figure-detail{
  grid-column:1 / span 5;
  margin:0;
}
.figure-detail img{
  width:100%;
  height:auto;
  display:block;
}
.figure-detail figcaption{
  font-size:13px;
  line-height:1.6;
  color:#5d5247;
  margin-top:12px;
}
.detail-text{grid-column:7 / span 6}

/* ---------- contact ---------- */

.contact-block{grid-column:1 / span 7}
.contact-block a{font-size:20px}

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

.site-foot{
  border-top:3px solid var(--accent);
  padding:56px 0 72px;
  background:var(--bg);
}
.foot-name{
  font-family:var(--serif);
  font-size:clamp(40px,8vw,96px);
  line-height:1;
  margin:0 0 40px;
  color:var(--text);
}
.foot-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.foot-grid ul{
  list-style:none;
  margin:0;
  padding:0;
}
.foot-grid li{margin-bottom:10px}
.foot-grid a{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid #3a312a;
}
.foot-grid a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.foot-meta{font-size:15px;color:var(--muted)}
.foot-meta a{color:var(--accent);border-bottom:0;text-decoration:underline}

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

.page-head{padding:84px 0 0}
.page-head h1{
  grid-column:1 / span 10;
  border-left:3px solid var(--accent);
  padding-left:28px;
  font-size:clamp(34px,5.4vw,62px);
}
.page-lead{
  grid-column:2 / span 9;
  font-size:22px;
  line-height:1.6;
  margin-top:36px;
}
.legal-body{grid-column:1 / span 7}
.about-body{grid-column:1 / span 6}
.about-head{
  grid-column:1 / span 12;
}
.about-head h2{margin-bottom:18px}

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

@media (min-width:1340px){
  .figure-main{margin-right:-28px}
}

@media (max-width:900px){
  .pad-l{padding:64px 0}
  .pad-s{padding:40px 0}
  .contrast{padding:64px 0}
  .hero{padding:56px 0 0}
  .page-head{padding:48px 0 0}

  .grid{grid-template-columns:repeat(6,1fr);column-gap:18px}

  .hero-head,
  .hero-intro,
  .topic-line,
  .figure-main,
  .col-5,.col-6,.col-7,.col-9,
  .col-7-right,.col-6-right,.col-5-right,
  .figure-detail,.detail-text,
  .contact-block,
  .page-head h1,.page-lead,
  .legal-body,.about-body,.about-head,
  .section-no,.side-note{
    grid-column:1 / -1;
  }

  .rule{grid-column:1 / span 3}
  .rule--center,.rule--right{grid-column:1 / span 3}

  .side-note{margin-top:24px}

  .figure-main{
    grid-template-columns:1fr;
    margin:44px 0 0;
  }
  .figure-main img{grid-column:1}
  .figure-main figcaption{
    grid-column:1;
    writing-mode:horizontal-tb;
    transform:none;
    max-height:none;
    margin-top:12px;
  }

  .figure-detail{margin-bottom:32px}

  .foot-grid{grid-template-columns:1fr}
  .site-foot{padding:40px 0 56px}
}

@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .hero-head{padding-left:18px}
  .hero-head .l2{margin-left:6%}
  .hero-head .l3{margin-left:12%}
  .page-head h1{padding-left:18px}
  .lead,.page-lead{font-size:19px}
  ol.steps li{padding-left:56px}
  ol.steps li::before{font-size:26px;top:16px}
}