/* Brentavo — registration-marks */

:root{
  --paper:#f2f0ea;
  --paper-alt:#e5e2d9;
  --ink:#1a1c22;
  --muted:#6e6b64;
  --red:#a82c26;
  --blue:#2a4a6b;
  --step:84px;
  --gut:24px;
}

*{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
}

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

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

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

.band{padding:var(--step) 0;}
.band--alt{background:var(--paper-alt);}
.band--dark{background:var(--ink);color:var(--paper);}
.band--tight{padding:calc(var(--step) * 0.62) 0;}

/* text columns: 7 wide, each next one column further right, reset after the fourth */
.col-a{grid-column:1 / span 7;}
.col-b{grid-column:2 / span 7;}
.col-c{grid-column:3 / span 7;}
.col-d{grid-column:4 / span 7;}

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

h1,h2,h3{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  margin:0;
}

h1{
  font-size:clamp(2.5rem,6.2vw,4.3rem);
  line-height:1.06;
  letter-spacing:-0.015em;
}

h2{
  font-size:1.5rem;
  line-height:1.28;
  margin:0 0 18px;
}

h3{
  font-size:1.04rem;
  line-height:1.4;
  margin:32px 0 10px;
}

p{margin:0 0 20px;}

.lead{
  font-size:1.06rem;
  line-height:1.75;
}

.caption{
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  letter-spacing:0.02em;
  margin:12px 0 0;
}

.band--dark .caption{color:#a9a59c;}

.num{
  font-size:12px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--blue);
  display:block;
  margin-bottom:14px;
}

.band--dark .num{color:#7ea0c4;}

a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(168,44,38,.45);}
a:hover{border-bottom-color:var(--red);}
.band--dark a{color:#e8b0ac;border-bottom-color:rgba(232,176,172,.5);}

a:focus-visible,:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
}
.band--dark a:focus-visible{outline-color:#e8b0ac;}

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

.mark{
  position:absolute;
  width:16px;
  height:16px;
  pointer-events:none;
}
.mark::before,.mark::after{
  content:"";
  position:absolute;
  background:var(--blue);
}
.mark::before{left:0;right:0;top:50%;height:1px;}
.mark::after{top:0;bottom:0;left:50%;width:1px;}
.mark span{
  position:absolute;
  inset:3px;
  border:1px solid var(--red);
  border-radius:50%;
  display:block;
}

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

.sep{margin:0 0 34px;}
.sep i{display:block;height:2px;background:var(--red);width:100%;max-width:340px;}
.sep i + i{background:var(--blue);margin-top:5px;margin-left:24px;}
.band--dark .sep i{background:#c4534c;}
.band--dark .sep i + i{background:#5c86b3;}

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

.topbar{
  border-bottom:1px solid rgba(26,28,34,.18);
  background:var(--paper);
}
.topbar .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 28px;
  padding-top:20px;
  padding-bottom:18px;
}
.brand{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.32rem;
  letter-spacing:0.04em;
  color:var(--ink);
  border-bottom:none;
}
.brand:focus-visible{outline-offset:4px;}
.mainnav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  margin:0;
  padding:0;
}
.mainnav a{
  font-size:14px;
  letter-spacing:0.05em;
  color:var(--ink);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
.mainnav a:hover{border-bottom-color:var(--red);}
.mainnav a[aria-current="page"]{border-bottom-color:var(--red);color:var(--red);}

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

.hero{padding:78px 0 var(--step);}
.hero .frame{
  position:relative;
  padding:44px 0 10px;
}
.hero .frame::before,
.hero .frame::after{
  content:"";
  position:absolute;
  left:-14px;
  right:-14px;
  height:1px;
  background:rgba(26,28,34,.22);
}
.hero .frame::before{top:0;}
.hero .frame::after{bottom:0;}
.m-tl{top:-8px;left:-22px;}
.m-tr{top:-8px;right:-22px;}
.m-bl{bottom:-8px;left:-22px;}
.m-br{bottom:-8px;right:-22px;}

.hero h1{grid-column:1 / span 9;}
.hero h1 .off{position:relative;display:inline-block;}
.hero h1 .off::after{
  content:"";
  position:absolute;
  left:-2px;
  right:-6px;
  bottom:0.12em;
  height:2px;
  background:var(--red);
}

.hero-intro{grid-column:1 / span 5;margin-top:44px;}
.hero-list{grid-column:8 / span 4;margin-top:50px;}
.hero-list ul{list-style:none;margin:0;padding:0;}
.hero-list li{
  position:relative;
  padding-left:20px;
  font-size:15px;
  line-height:1.65;
  margin-bottom:12px;
  color:var(--muted);
}
.hero-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  background:var(--red);
}
.hero-list p.caption{margin-bottom:16px;}

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

.figure-main{
  grid-column:3 / span 8;
  position:relative;
  padding:10px;
}
.figure-main img{width:100%;height:auto;display:block;}
.figure-main .caption{max-width:60ch;}
.figure-main .mark::before{background:var(--muted);}
.figure-main .mark::after{background:var(--muted);}

.detail-figure{
  grid-column:1 / span 5;
  margin:0;
  position:relative;
}
.detail-figure img{width:100%;height:auto;display:block;}
.detail-text{grid-column:7 / span 6;}
.detail-text h2{margin-bottom:22px;}

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

.checklist{list-style:none;margin:0 0 20px;padding:0;}
.checklist li{
  position:relative;
  padding-left:24px;
  margin-bottom:12px;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:8px;
  height:8px;
  background:var(--red);
}
.band--dark .checklist li::before{background:#c4534c;}

ol.steps{
  margin:0 0 20px;
  padding-left:22px;
}
ol.steps li{margin-bottom:12px;padding-left:6px;}
ol.steps li::marker{color:var(--blue);font-size:13px;}

dl.terms{margin:0;}
dl.terms dt{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.02rem;
  margin-top:24px;
}
dl.terms dd{margin:6px 0 0;color:var(--ink);}

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

.about-block{position:relative;}
.about-block .mark{left:-34px;top:6px;}

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

.site-footer{background:var(--ink);color:var(--paper);padding:66px 0 54px;}
.site-footer .sep{margin-bottom:38px;}
.site-footer .sep i{background:#c4534c;max-width:260px;}
.site-footer .sep i + i{background:#5c86b3;}
.foot-a{grid-column:1 / span 7;}
.foot-b{grid-column:8 / span 5;}
.foot-a .name{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.5rem;
  display:block;
  margin-bottom:14px;
}
.foot-a p{color:#b6b2a9;font-size:15px;max-width:52ch;}
.foot-b ul{list-style:none;margin:0 0 18px;padding:0;}
.foot-b li{margin-bottom:9px;}
.foot-b a{font-size:15px;}
.foot-b .mail{font-size:15px;}
.foot-note{
  grid-column:1 / span 12;
  margin-top:44px;
  padding-top:18px;
  border-top:1px solid rgba(242,240,234,.18);
  font-size:12px;
  color:#a9a59c;
}

/* ---------- page header for inner pages ---------- */

.page-head{padding:64px 0 26px;}
.page-head h1{
  grid-column:1 / span 8;
  font-size:clamp(2.1rem,4.6vw,3.2rem);
}
.page-head .caption{grid-column:1 / span 8;}

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

@media (max-width:900px){
  .hero h1,.hero-intro,.hero-list,
  .figure-main,.detail-figure,.detail-text,
  .col-a,.col-b,.col-c,.col-d,
  .foot-a,.foot-b,.page-head h1,.page-head .caption{
    grid-column:1 / span 12;
  }
  .figure-main{padding:8px;}
  .hero-list{margin-top:32px;}
  .detail-text{margin-top:34px;}
  .foot-b{margin-top:34px;}
  .about-block .mark{left:0;top:-26px;}
}

@media (max-width:640px){
  :root{--step:50px;--gut:16px;}
  body{font-size:16px;line-height:1.75;}
  .wrap{padding:0 18px;}
  .hero{padding:44px 0 var(--step);}
  .hero .frame{padding:32px 0 8px;}
  .m-tl,.m-tr{top:-8px;}
  .m-bl,.m-br{bottom:-8px;}
  .m-tl,.m-bl{left:-10px;}
  .m-tr,.m-br{right:-10px;}
  .hero .frame::before,.hero .frame::after{left:-4px;right:-4px;}
  h2{font-size:1.3rem;}
  .topbar .wrap{gap:8px 18px;}
  .mainnav ul{gap:6px 16px;}
  .sep i{max-width:200px;}
  .sep i + i{margin-left:16px;}
}