:root{
  --bg:#efeae1;
  --bg-alt:#e3dbce;
  --bg-dark:#2c3a5c;
  --ink:#2b2822;
  --ink-soft:#6f6759;
  --ink-inv:#efeae1;
  --accent:#a83b2c;
  --accent2:#6e7a47;
  --stitch:2px dashed var(--accent);
  --stitch2:1px dashed var(--accent2);
  --gap:24px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}

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

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

h1,h2,h3{margin:0 0 .6em;line-height:1.15;}
h1{font-size:clamp(2.4rem,6.2vw,4.4rem);font-weight:700;letter-spacing:-.035em;}
h2{font-size:clamp(1.45rem,2.6vw,2.05rem);font-weight:700;letter-spacing:-.015em;}
h3{font-size:1.12rem;font-weight:700;letter-spacing:-.005em;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

.caption{
  font-size:13px;
  line-height:1.5;
  color:var(--ink-soft);
}
.num{
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent2);
  font-weight:700;
  display:block;
  margin-bottom:10px;
}

/* ---------- header / nav ---------- */
.site-head{
  padding:20px 0 0;
}
.head-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--ink-soft);
}
.brand{
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
  text-decoration:none;
}
.brand span{
  display:block;
  font-size:12px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent2);
}
.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
}
.site-nav a{
  font-size:14.5px;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:var(--stitch2);
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{
  color:var(--accent);
  border-bottom:2px dashed var(--accent);
}
.head-rule{
  border-top:1px dashed var(--accent);
  margin-top:5px;
}

/* ---------- hero ---------- */
.hero{
  margin:40px 0 0;
  padding:24px;
  border:var(--stitch);
}
.hero-top{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:0 24px;
}
.hero-title{grid-column:1/9;}
.hero-title h1{max-width:15ch;}
.hero-lede{
  grid-column:9/13;
  border-left:var(--stitch2);
  padding-left:24px;
  color:var(--ink-soft);
  font-size:16px;
}
.hero-media{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:0 24px;
  margin-top:48px;
}
.hero-side{
  grid-column:1/6;
  align-self:end;
  padding-bottom:6px;
  border-top:1px dashed var(--accent2);
  padding-top:16px;
}
.hero-fig{
  grid-column:7/13;
  margin:0;
}
.hero-fig .frame{
  padding:12px;
  border:var(--stitch);
}
.hero-fig img,
figure img{
  display:block;
  width:100%;
  height:auto;
}
.hero-fig figcaption{
  margin-top:10px;
  text-align:left;
  max-width:44ch;
}

/* ---------- sections ---------- */
main section{padding:80px 0;}
.band{background:var(--bg-alt);}
.dark{background:var(--bg-dark);color:var(--ink-inv);}
.dark h2,.dark h3{color:var(--ink-inv);}
.dark .caption{color:#c2bcae;}
.dark .num{color:#a9b585;}
.dark a{color:#e2a396;}
.dark .stitch-box{border-color:#7d8aa8;}
.dark ul.check li::before{color:#e2a396;}

.double-rule{
  border-top:1px solid var(--ink-soft);
  margin:0;
}
.double-rule::after{
  content:"";
  display:block;
  border-top:1px dashed var(--accent);
  margin-top:5px;
}
.dark .double-rule{border-top-color:#7d8aa8;}

.hr-stitch{
  border:0;
  border-top:1px dashed var(--accent2);
  margin:32px 0;
  max-width:56ch;
}

/* column logic */
.col-left7{grid-column:1/8;}
.col-right5{grid-column:8/13;text-align:left;border-left:var(--stitch2);padding-left:24px;}
.col-left5{grid-column:1/6;border-right:var(--stitch2);padding-right:24px;}
.col-right7{grid-column:6/13;padding-left:24px;}
.col-8{grid-column:1/9;}
.col-7r{grid-column:6/13;border-left:var(--stitch2);padding-left:24px;}

.stitch-box{
  border:var(--stitch2);
  padding:22px 24px;
}

/* lists */
ul.check{list-style:none;margin:0 0 1.1em;padding:0;}
ul.check li{
  position:relative;
  padding-left:26px;
  margin-bottom:.55em;
}
ul.check li::before{
  content:"—";
  position:absolute;
  left:0;
  top:0;
  color:var(--accent);
  font-weight:700;
}
ol.steps{
  margin:0 0 1.1em;
  padding-left:22px;
}
ol.steps li{margin-bottom:.6em;padding-left:6px;}
ol.steps li::marker{color:var(--accent);font-weight:700;}

dl.terms{margin:0;}
dl.terms dt{
  font-weight:700;
  margin-top:1.1em;
  border-top:1px dashed var(--accent2);
  padding-top:.7em;
}
dl.terms dd{margin:.3em 0 0;color:var(--ink);}

/* detail image in dark section */
.detail-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:0 24px;
  align-items:start;
}
.detail-fig{
  grid-column:2/6;
  margin:0;
}
.detail-fig .frame{
  padding:12px;
  border:2px dashed #a9b585;
}
.detail-fig figcaption{margin-top:10px;}
.detail-text{grid-column:7/13;}

/* about layout */
.about-block{margin-bottom:64px;}
.ab1{grid-column:1/9;border-bottom:var(--stitch2);padding-bottom:28px;}
.ab2{grid-column:6/12;border-left:var(--stitch2);border-right:var(--stitch2);padding:0 24px;}
.ab3{grid-column:2/9;border-top:var(--stitch2);border-bottom:var(--stitch2);padding:28px 0;}

/* footer */
.site-foot{
  background:var(--bg-alt);
  margin-top:0;
  padding:36px 0 44px;
}
.foot-rule{
  border-top:1px solid var(--ink-soft);
  margin-bottom:5px;
}
.foot-rule2{
  border-top:1px dashed var(--accent);
  margin-bottom:32px;
}
.foot-box{
  border:var(--stitch2);
  padding:16px;
}
.foot-inner{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:24px;
}
.foot-a{grid-column:1/7;}
.foot-b{grid-column:8/13;}
.foot-b ul{list-style:none;margin:0 0 14px;padding:0;}
.foot-b li{margin-bottom:4px;}
.foot-name{font-weight:700;font-size:1.05rem;margin-bottom:6px;}
.foot-note{font-size:14px;color:var(--ink-soft);max-width:44ch;}
.foot-legal{
  margin-top:26px;
  font-size:13px;
  color:var(--ink-soft);
  border-top:1px dashed var(--accent2);
  padding-top:14px;
}

/* legal / article pages */
.page-head{
  padding:48px 0 0;
}
.page-head .inner{
  border:var(--stitch);
  padding:24px;
}
.page-head h1{font-size:clamp(2rem,4.6vw,3.2rem);max-width:18ch;}
.page-head p{color:var(--ink-soft);max-width:60ch;margin-bottom:0;}
.prose{max-width:68ch;}
.prose h2{margin-top:2.2em;}
.prose h2:first-child{margin-top:0;}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero-title,.hero-lede{grid-column:1/13;}
  .hero-lede{
    border-left:0;
    padding-left:0;
    margin-top:20px;
    padding-top:18px;
    border-top:var(--stitch2);
  }
  .hero-media{margin-top:32px;}
  .hero-fig{grid-column:1/13;}
  .hero-side{
    grid-column:1/13;
    margin-top:28px;
    order:2;
  }
  .col-left7,.col-right5,.col-left5,.col-right7,.col-8,.col-7r,
  .ab1,.ab2,.ab3{grid-column:1/13;}
  .col-right5,.col-right7,.col-7r{border-left:0;padding-left:0;padding-top:20px;border-top:var(--stitch2);margin-top:20px;}
  .col-left5{border-right:0;padding-right:0;}
  .ab2{border-left:0;border-right:0;padding:0;border-top:var(--stitch2);border-bottom:var(--stitch2);padding-top:24px;padding-bottom:24px;}
  .detail-fig,.detail-text{grid-column:1/13;}
  .detail-text{margin-top:32px;}
  .foot-a,.foot-b{grid-column:1/13;}
  .about-block{margin-bottom:44px;}
}

@media(max-width:640px){
  body{font-size:16.5px;}
  main section{padding:48px 0;}
  .hero{margin-top:28px;padding:16px;}
  .page-head{padding:32px 0 0;}
  .page-head .inner{padding:16px;}
  .head-inner{flex-direction:column;align-items:flex-start;}
  .site-nav ul{gap:6px 14px;}
  .hero-fig .frame,.detail-fig .frame{padding:8px;}
}