/* Vororvalda — registration-marks / linen weave */

:root{
  --bg:#efeae1;
  --bg-alt:#e3dbce;
  --bg-dark:#2c3a5c;
  --ink:#2b2822;
  --ink-2:#6f6759;
  --ink-inv:#efeae1;
  --acc:#a83b2c;
  --acc-2:#6e7a47;
  --step:84px;
  --font: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(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.7;
  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;
}

/* ---------- grid shell ---------- */

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

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

/* ---------- registration marks ---------- */

.mark{
  position:relative;
  width:18px;
  height:18px;
  flex:0 0 auto;
}
.mark::before,.mark::after{
  content:"";
  position:absolute;
  background:var(--acc-2);
}
.mark::before{left:0;right:0;top:50%;height:1px}
.mark::after{top:0;bottom:0;left:50%;width:1px}
.mark.red::before,.mark.red::after{background:var(--acc)}

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

.site-head{
  border-bottom:1px solid rgba(111,103,89,.35);
  padding:20px 0;
}
.head-in{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 30px;
}
.brand{
  font-size:19px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{text-decoration:none;color:var(--acc)}
.brand span{color:var(--acc)}

.site-nav ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
}
.site-nav a{
  color:var(--ink-2);
  text-decoration:none;
  font-size:14px;
  letter-spacing:.05em;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--acc)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--acc)}

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

.hero{
  padding:calc(var(--step) * .75) 0 var(--step);
}
.hero-frame{
  position:relative;
  padding:34px 0 10px;
}
.hero-frame .mark{position:absolute}
.hero-frame .m-tl{top:0;left:-4px}
.hero-frame .m-tr{top:0;right:-4px}
.hero-frame .m-bl{bottom:0;left:-4px}
.hero-frame .m-br{bottom:0;right:-4px}
.hero-frame::before{
  content:"";
  position:absolute;top:9px;left:14px;right:14px;
  height:1px;background:rgba(111,103,89,.45);
}
.hero-frame::after{
  content:"";
  position:absolute;bottom:9px;left:14px;right:14px;
  height:1px;background:rgba(111,103,89,.45);
}

.eyebrow{
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--acc-2);
  margin:0 0 22px;
}

h1{
  grid-column:1 / span 9;
  margin:0;
  font-size:clamp(34px,5.6vw,63px);
  line-height:1.04;
  font-weight:700;
  letter-spacing:-.028em;
}
h1 .line2{
  position:relative;
  display:inline-block;
}
h1 .line2::after{
  content:"";
  position:absolute;
  left:-6px;right:-6px;
  bottom:.13em;
  height:3px;
  background:var(--acc);
}

.hero-cols{
  margin-top:46px;
  row-gap:32px;
}
.hero-lede{
  grid-column:1 / span 5;
  margin:0;
  font-size:19px;
  line-height:1.6;
}
.hero-topics{
  grid-column:9 / span 4;
  margin:0;
  padding:0;
  list-style:none;
  font-size:15px;
  color:var(--ink-2);
}
.hero-topics li{
  position:relative;
  padding-left:20px;
  margin-bottom:9px;
  line-height:1.5;
}
.hero-topics li::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:7px;height:7px;
  background:var(--acc);
}

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

.sep{
  position:relative;
  height:10px;
  max-width:640px;
  margin:0;
  border:0;
}
.sep::before,.sep::after{
  content:"";position:absolute;left:0;height:2px;width:100%;
}
.sep::before{top:0;background:var(--acc)}
.sep::after{top:6px;left:24px;background:var(--acc-2)}

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

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

.sec{max-width:none}
.sec + .sec{margin-top:var(--step)}

.txt{
  grid-column:1 / span 7;
}
.off-1{grid-column:2 / span 7}
.off-2{grid-column:3 / span 7}
.off-3{grid-column:4 / span 7}

.sec h2{
  margin:22px 0 14px;
  font-size:clamp(23px,2.7vw,31px);
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.012em;
}
.sec h3{
  margin:30px 0 8px;
  font-size:18px;
  font-weight:700;
  letter-spacing:.005em;
}
.sec p{margin:0 0 17px}

.num{
  display:block;
  font-size:13px;
  letter-spacing:.2em;
  color:var(--acc-2);
  text-transform:uppercase;
}

/* lists */

ul.check,ol.steps{
  margin:6px 0 20px;
  padding-left:0;
  list-style:none;
}
ul.check li{
  position:relative;
  padding-left:22px;
  margin-bottom:9px;
}
ul.check li::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:7px;height:7px;background:var(--acc);
}
ol.steps{counter-reset:s}
ol.steps li{
  position:relative;
  padding-left:34px;
  margin-bottom:11px;
  counter-increment:s;
}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:.06em;
  font-size:13px;
  letter-spacing:.08em;
  color:var(--acc-2);
  font-weight:700;
}

dl.gloss{margin:6px 0 20px}
dl.gloss dt{font-weight:700;margin-top:14px}
dl.gloss dd{margin:2px 0 0;color:var(--ink-2)}

/* ---------- figures ---------- */

figure{margin:0}

.fig-main{
  grid-column:3 / span 8;
  position:relative;
  padding:16px;
}
.fig-main .mark{position:absolute}
.fig-main .m-tl{top:0;left:0}
.fig-main .m-tr{top:0;right:0}
.fig-main .m-bl{bottom:26px;left:0}
.fig-main .m-br{bottom:26px;right:0}

figcaption{
  font-size:13px;
  line-height:1.5;
  color:var(--ink-2);
  margin-top:12px;
  max-width:52ch;
}

/* dark band with detail image */

.band-dark{
  background:var(--bg-dark);
  color:var(--ink-inv);
  padding:var(--step) 0;
}
.band-dark h2{color:var(--ink-inv)}
.band-dark .num{color:#b9c08e}
.band-dark figcaption{color:#c2c8dd}
.band-dark a{color:#e8b3a8}
.band-dark .sep::before{background:#e8b3a8}
.band-dark .sep::after{background:#b9c08e}
.band-dark ul.check li::before{background:#e8b3a8}
.band-dark :focus-visible{outline-color:#e8b3a8}

.dark-grid{row-gap:38px;align-items:start}
.fig-detail{grid-column:2 / span 4}
.dark-text{grid-column:7 / span 6}

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

.about-body{
  grid-column:3 / span 7;
}
.about-rail{
  grid-column:1 / span 1;
  display:flex;
  flex-direction:column;
  gap:120px;
  padding-top:16px;
}

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

.contact-box{
  border-top:2px solid var(--acc);
  padding-top:18px;
  margin-top:8px;
}
.contact-box p{margin:0 0 6px}

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

.site-foot{
  background:var(--bg-dark);
  color:var(--ink-inv);
  padding:56px 0 46px;
}
.foot-rule{
  position:relative;
  height:10px;
  margin-bottom:34px;
}
.foot-rule::before,.foot-rule::after{
  content:"";position:absolute;left:0;height:2px;width:100%;
}
.foot-rule::before{top:0;background:#e8b3a8}
.foot-rule::after{top:6px;left:24px;background:#b9c08e;width:calc(100% - 24px)}

.foot-grid{row-gap:34px}
.foot-a{grid-column:1 / span 7}
.foot-b{grid-column:8 / span 5}

.foot-name{
  font-size:18px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 12px;
}
.foot-a p{margin:0;color:#c2c8dd;font-size:15px;max-width:52ch}
.foot-b h2{
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#b9c08e;
  margin:0 0 12px;
  font-weight:700;
}
.foot-b ul{list-style:none;margin:0 0 16px;padding:0}
.foot-b li{margin-bottom:7px}
.foot-b a{color:var(--ink-inv);text-decoration:none;border-bottom:1px solid rgba(239,234,225,.35);font-size:15px}
.foot-b a:hover{border-bottom-color:#e8b3a8;color:#e8b3a8}
.foot-mail a{color:#e8b3a8;border-bottom-color:rgba(232,179,168,.5)}
.foot-note{
  margin-top:34px;
  font-size:13px;
  color:#a9b1c8;
}

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

@media (max-width:900px){
  :root{--step:60px}
  .fig-main{grid-column:1 / span 12}
  .fig-detail{grid-column:1 / span 7}
  .dark-text{grid-column:1 / span 12}
  h1{grid-column:1 / span 12}
  .hero-lede{grid-column:1 / span 12}
  .hero-topics{grid-column:1 / span 12}
  .txt,.off-1,.off-2,.off-3{grid-column:1 / span 12}
  .about-body{grid-column:1 / span 12}
  .about-rail{display:none}
  .foot-a,.foot-b{grid-column:1 / span 12}
}

@media (max-width:600px){
  :root{--step:50px}
  body{font-size:16px}
  .wrap{padding:0 18px}
  .fig-detail{grid-column:1 / span 12}
  .hero{padding:40px 0 50px}
  .site-nav ul{gap:6px 16px}
  .fig-main{padding:14px 12px}
  .sep{max-width:100%}
}