/* Plasunte — stitched-margins */

:root{
  --bg:#eeece8;
  --bg-alt:#dedbd5;
  --bg-dark:#232220;
  --ink:#191817;
  --ink-2:#6b6862;
  --ink-inv:#eeece8;
  --acc:#8a6a12;
  --acc-2:#4a6470;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:24px;
  --step:80px;
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  overflow-x:hidden;
}

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

a{color:var(--acc);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

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

/* ---------- stitching ---------- */

.st,
.st-l,.st-r,.st-t,.st-b,.st-lr,.st-tb,.st-lb,.st-rt{
  background-repeat:no-repeat;
}

.st{
  background-image:
    repeating-linear-gradient(to right,var(--acc) 0 14px,transparent 14px 26px),
    repeating-linear-gradient(to right,var(--acc) 0 14px,transparent 14px 26px),
    repeating-linear-gradient(to bottom,var(--acc) 0 14px,transparent 14px 26px),
    repeating-linear-gradient(to bottom,var(--acc) 0 14px,transparent 14px 26px);
  background-size:100% 2px,100% 2px,2px 100%,2px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
}

.st-l{
  background-image:repeating-linear-gradient(to bottom,var(--acc) 0 14px,transparent 14px 26px);
  background-size:2px 100%;background-position:0 0;
}
.st-r{
  background-image:repeating-linear-gradient(to bottom,var(--acc) 0 14px,transparent 14px 26px);
  background-size:2px 100%;background-position:100% 0;
}
.st-lr{
  background-image:
    repeating-linear-gradient(to bottom,var(--acc) 0 14px,transparent 14px 26px),
    repeating-linear-gradient(to bottom,var(--acc) 0 14px,transparent 14px 26px);
  background-size:2px 100%,2px 100%;background-position:0 0,100% 0;
}
.st-b{
  background-image:repeating-linear-gradient(to right,var(--acc) 0 14px,transparent 14px 26px);
  background-size:100% 2px;background-position:0 100%;
}
.st-t{
  background-image:repeating-linear-gradient(to right,var(--acc) 0 14px,transparent 14px 26px);
  background-size:100% 2px;background-position:0 0;
}
.st-lb{
  background-image:
    repeating-linear-gradient(to bottom,var(--acc) 0 14px,transparent 14px 26px),
    repeating-linear-gradient(to right,var(--acc) 0 14px,transparent 14px 26px);
  background-size:2px 100%,100% 2px;background-position:0 0,0 100%;
}
.st-rt{
  background-image:
    repeating-linear-gradient(to bottom,var(--acc) 0 14px,transparent 14px 26px),
    repeating-linear-gradient(to right,var(--acc) 0 14px,transparent 14px 26px);
  background-size:2px 100%,100% 2px;background-position:100% 0,0 0;
}

.pad-l{padding-left:22px}
.pad-r{padding-right:22px}
.pad-tb{padding-top:22px;padding-bottom:22px}

/* ---------- layout ---------- */

.shell{max-width:1180px;margin:0 auto;padding:0 24px}

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

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

.masthead{padding:22px 0 18px}
.masthead .inner{
  display:flex;flex-wrap:wrap;gap:16px 32px;
  align-items:baseline;justify-content:space-between;
}

.wordmark{
  font-family:var(--serif);
  font-size:24px;
  letter-spacing:.01em;
  color:var(--ink);
  text-decoration:none;
}
.wordmark span{
  display:block;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--acc-2);
  margin-top:2px;
}
.wordmark:hover{text-decoration:none}

.nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 22px;
}
.nav a{
  font-size:14px;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:3px;
  background-image:repeating-linear-gradient(to right,var(--acc) 0 6px,transparent 6px 11px);
  background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--acc)}

/* ---------- rules ---------- */

.rule{
  border:0;margin:0;height:7px;
  background-image:
    linear-gradient(to right,var(--ink) 0 100%),
    repeating-linear-gradient(to right,var(--acc) 0 14px,transparent 14px 26px);
  background-size:100% 1px,100% 2px;
  background-position:0 0,0 100%;
  background-repeat:no-repeat;
  opacity:.85;
}
.rule--thin{
  height:2px;
  background-image:repeating-linear-gradient(to right,var(--acc) 0 10px,transparent 10px 19px);
  background-size:100% 2px;background-position:0 0;
}

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

.hero{padding:34px 0 var(--step)}
.hero .frame{padding:24px}
.hero .grid{row-gap:44px}

h1{
  grid-column:1 / span 8;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(31px,4.6vw,54px);
  line-height:1.16;
  letter-spacing:-.005em;
  margin:0;
}

.hero-lede{
  grid-column:9 / span 4;
  padding-left:22px;
  align-self:end;
}
.hero-lede p{margin:0 0 14px}
.hero-lede p:last-child{margin-bottom:0}

.hero-meta{grid-column:1 / span 5;align-self:end}
.hero-fig{grid-column:7 / span 6}

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

figure{margin:0}
.fig-inner{padding:12px}
.fig-inner img{width:100%}
figcaption{
  font-size:13px;
  line-height:1.5;
  color:var(--ink-2);
  margin-top:12px;
  max-width:44ch;
}

/* ---------- sections ---------- */

.band{background:var(--bg-alt)}

section{padding:var(--step) 0}
section > .shell > .grid{row-gap:32px}

.col-left-7{grid-column:1 / span 7}
.col-right-5{grid-column:8 / span 5;text-align:left}
.col-left-5{grid-column:1 / span 5}
.col-right-7{grid-column:6 / span 7}
.col-8{grid-column:1 / span 8}
.col-right-8{grid-column:5 / span 8}
.col-12{grid-column:1 / span 12}

h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(24px,2.7vw,33px);
  line-height:1.24;
  margin:0 0 18px;
}
h2 .num{
  display:block;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--acc-2);
  margin-bottom:9px;
}

h3{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:21px;
  line-height:1.35;
  margin:30px 0 10px;
}

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

.aside-note{
  font-size:15.5px;
  color:var(--ink-2);
}
.aside-note p{margin-bottom:14px}

ul.checklist,ol.steps{
  margin:18px 0 0;
  padding:0 0 0 2px;
  list-style:none;
  counter-reset:step;
}
ul.checklist li,ol.steps li{
  position:relative;
  padding-left:30px;
  margin-bottom:12px;
}
ul.checklist li::before{
  content:"";
  position:absolute;left:2px;top:11px;
  width:11px;height:2px;background:var(--acc);
}
ol.steps li{counter-increment:step;padding-left:38px}
ol.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  color:var(--acc-2);
  line-height:1.9;
}

.list-title{
  font-family:var(--sans);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc-2);
  margin:26px 0 0;
}

/* ---------- dark section ---------- */

.dark{
  background:var(--bg-dark);
  color:var(--ink-inv);
}
.dark h2,.dark h3{color:var(--ink-inv)}
.dark .label,.dark h2 .num,.dark .list-title,.dark ol.steps li::before{color:#9fb3bd}
.dark figcaption{color:#a8a49c}
.dark a{color:#d3ae4a}
.dark a:focus-visible,.dark :focus-visible{outline-color:#d3ae4a}
.dark .st,.dark .st-l,.dark .st-r,.dark .st-lr,.dark .st-b,.dark .st-t,.dark .st-lb,.dark .st-rt{
  background-image:none;
}
.dark .st-lb{
  background-image:
    repeating-linear-gradient(to bottom,#d3ae4a 0 14px,transparent 14px 26px),
    repeating-linear-gradient(to right,#d3ae4a 0 14px,transparent 14px 26px);
  background-size:2px 100%,100% 2px;background-position:0 0,0 100%;
}
.dark .st-l{
  background-image:repeating-linear-gradient(to bottom,#d3ae4a 0 14px,transparent 14px 26px);
  background-size:2px 100%;background-position:0 0;
}
.dark .fig-inner{
  background-image:
    repeating-linear-gradient(to right,#d3ae4a 0 14px,transparent 14px 26px),
    repeating-linear-gradient(to right,#d3ae4a 0 14px,transparent 14px 26px),
    repeating-linear-gradient(to bottom,#d3ae4a 0 14px,transparent 14px 26px),
    repeating-linear-gradient(to bottom,#d3ae4a 0 14px,transparent 14px 26px);
  background-size:100% 2px,100% 2px,2px 100%,2px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
}
.dark ul.checklist li::before{background:#d3ae4a}
.dark .rule--thin{
  background-image:repeating-linear-gradient(to right,#d3ae4a 0 10px,transparent 10px 19px);
}

.dark-fig{grid-column:1 / span 5}
.dark-text{grid-column:7 / span 6;padding-left:22px}

/* ---------- about page ---------- */

.about-block{margin-bottom:64px}
.about-block:last-child{margin-bottom:0}
.ab-8{grid-column:1 / span 8}
.ab-6{grid-column:7 / span 6}
.ab-7{grid-column:3 / span 7}

/* ---------- legal pages ---------- */

.doc{grid-column:1 / span 8}
.doc-side{grid-column:10 / span 3;padding-left:22px}
.doc h2{margin-top:44px}
.doc h2:first-of-type{margin-top:0}

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

.contact-line{
  font-family:var(--serif);
  font-size:22px;
  margin-top:6px;
}

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

footer.site{
  background:var(--bg-alt);
  padding:0 0 56px;
}
footer.site .top{padding-top:34px}
footer.site .frame{padding:16px;margin-top:34px}
footer.site .cols{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:32px;
  padding:26px 22px;
}
.f-name{font-family:var(--serif);font-size:22px;margin:0 0 10px}
.f-about{font-size:15px;color:var(--ink-2);margin:0;max-width:46ch}
.f-nav ul{list-style:none;margin:0 0 16px;padding:0}
.f-nav li{margin-bottom:7px}
.f-nav a{font-size:15px;color:var(--ink);text-decoration:none;
  background-image:repeating-linear-gradient(to right,var(--acc) 0 6px,transparent 6px 11px);
  background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:2px}
.f-nav a:hover{color:var(--acc)}
.f-mail{font-size:15px;margin:0}
.f-legal{
  font-size:13px;color:var(--ink-2);margin:22px 0 0;
}

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

@media (max-width:1000px){
  h1{grid-column:1 / span 12}
  .hero-lede{grid-column:1 / span 12;padding-left:0;padding-top:20px;
    background-image:repeating-linear-gradient(to right,var(--acc) 0 14px,transparent 14px 26px);
    background-size:100% 2px;background-position:0 0;background-repeat:no-repeat;}
  .hero-meta{grid-column:1 / span 12}
  .hero-fig{grid-column:1 / span 12}
  .col-left-7,.col-right-5,.col-left-5,.col-right-7,.col-8,.col-right-8,.col-12{grid-column:1 / span 12}
  .dark-fig{grid-column:1 / span 12}
  .dark-text{grid-column:1 / span 12;padding-left:0;padding-top:20px}
  .ab-8,.ab-6,.ab-7{grid-column:1 / span 12}
  .doc,.doc-side{grid-column:1 / span 12}
  .doc-side{padding-left:0;padding-top:22px;margin-top:8px}
  .hero-fig .fig-inner{max-width:640px}
  .dark-fig .fig-inner{max-width:420px}
}

@media (max-width:680px){
  :root{--step:48px;--gap:18px}
  body{font-size:16.5px}
  .shell{padding:0 18px}
  .hero .frame{padding:16px}
  .hero{padding:24px 0 var(--step)}
  .masthead .inner{display:block}
  .nav{margin-top:16px}
  .nav ul{gap:6px 18px}
  footer.site .cols{grid-template-columns:1fr;gap:26px;padding:22px 16px}
  .about-block{margin-bottom:44px}
  .pad-l{padding-left:16px}
  .pad-r{padding-right:16px}
}