/* Kroldasta — registration-marks */

:root{
  --bg:#f4f5f7;
  --panel:#ffffff;
  --dark:#23262b;
  --ink:#16181d;
  --mut:#656b75;
  --blue:#2d5bd6;
  --gold:#c9a00f;
  --step:84px;
  --mono:ui-monospace,Consolas,'Liberation Mono',monospace;
  --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(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}

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

a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
a:hover{text-decoration-thickness:2px;}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}

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

.grid{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
}

.t1{grid-column:1 / span 7;}
.t2{grid-column:2 / span 7;}
.t3{grid-column:3 / span 7;}
.t4{grid-column:4 / span 7;}

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

.mark{
  position:relative;
  display:block;
  width:22px;
  height:22px;
}
.mark::before,.mark::after{
  content:"";
  position:absolute;
  background:var(--blue);
}
.mark::before{left:50%;top:0;width:1px;height:100%;margin-left:-.5px;}
.mark::after{top:50%;left:0;height:1px;width:100%;margin-top:-.5px;}
.mark-gold::before,.mark-gold::after{background:var(--gold);}
.mark-light::before,.mark-light::after{background:#8b929c;}

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

.site-head{
  border-bottom:1px solid #d8dbe1;
  background:var(--bg);
}
.head-inner{
  max-width:1180px;
  margin:0 auto;
  padding:18px 28px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px 28px;
}
.brand{
  font-family:var(--mono);
  font-size:16px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid var(--gold);
  padding-bottom:2px;
}
.brand:hover{border-bottom-color:var(--blue);}
.site-nav{margin-left:auto;}
.site-nav ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
}
.site-nav a{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mut);
  text-decoration:none;
  padding:3px 0;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--blue);}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold);}

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

.hero{padding:calc(var(--step) - 20px) 0 var(--step);}
.hero-frame{position:relative;grid-column:1 / -1;padding:34px 0 30px;}
.hero-frame::before,.hero-frame::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:1px;
  background:#c9ccd3;
}
.hero-frame::before{top:0;}
.hero-frame::after{bottom:0;}
.hero-frame > .mark{position:absolute;}
.hero-frame > .mark:nth-of-type(1){top:-11px;left:-11px;}
.hero-frame > .mark:nth-of-type(2){top:-11px;right:-11px;}
.hero-frame > .mark:nth-of-type(3){bottom:-11px;left:-11px;}
.hero-frame > .mark:nth-of-type(4){bottom:-11px;right:-11px;}

.kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 22px;
}

.hero h1{
  font-family:var(--mono);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.045em;
  font-size:clamp(25px,3.5vw,42px);
  line-height:1.24;
  margin:0;
  max-width:none;
}
.hero-inner{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;}
.hero h1{grid-column:1 / span 9;}
.h1-row{display:block;}
.h1-row-off{position:relative;display:inline-block;}
.h1-row-off::after{
  content:"";
  position:absolute;
  left:-4px;right:-16px;
  bottom:.14em;
  height:2px;
  background:var(--blue);
}

.hero-inner > .kicker{grid-column:1 / -1;}
.hero-lede{grid-column:1 / span 5;margin:38px 0 0;color:var(--ink);}
.hero-topics{grid-column:8 / span 4;margin:38px 0 0;padding:0;list-style:none;}
.hero-topics li{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.7;
  color:var(--mut);
  padding-left:18px;
  position:relative;
}
.hero-topics li::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:7px;height:7px;
  background:var(--blue);
}

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

.band{padding:var(--step) 0;}
.band-white{background:var(--panel);}
.band-dark{background:var(--dark);color:var(--bg);}
.band-dark h2,.band-dark h3{color:var(--bg);}
.band-dark a{color:#9fb8f5;}
.band-dark .caption{color:#a4abb5;}

h2{
  font-family:var(--mono);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:clamp(18px,2vw,23px);
  line-height:1.35;
  margin:0 0 6px;
}
h3{
  font-family:var(--mono);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:14.5px;
  line-height:1.5;
  margin:34px 0 4px;
}
p{margin:16px 0;}

.num{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.2em;
  color:var(--gold);
  display:block;
  margin-bottom:10px;
}

.rule{position:relative;height:2px;margin:0 0 26px;}
.rule::before,.rule::after{content:"";position:absolute;height:2px;top:0;}
.rule::before{left:0;width:100%;background:var(--blue);}
.rule::after{left:24px;right:-24px;top:6px;background:var(--gold);}

ul.check,ol.plain{margin:18px 0;padding-left:0;list-style:none;}
ul.check li{position:relative;padding-left:22px;margin:9px 0;}
ul.check li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:8px;height:2px;background:var(--blue);
}
ol.plain{counter-reset:s;}
ol.plain li{position:relative;padding-left:34px;margin:11px 0;counter-increment:s;}
ol.plain li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:.06em;
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--gold);
}

.caption{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--mut);
  line-height:1.6;
  margin:12px 0 0;
  text-transform:uppercase;
}

/* ---------- main figure ---------- */

.figure-band{padding:var(--step) 0;}
.figure-main{
  grid-column:3 / span 8;
  margin:0;
  position:relative;
}
.figure-main .frame{position:relative;}
.figure-main .mark{position:absolute;}
.figure-main .mark:nth-of-type(1){top:-11px;left:-11px;}
.figure-main .mark:nth-of-type(2){top:-11px;right:-11px;}
.figure-main .mark:nth-of-type(3){bottom:-11px;left:-11px;}
.figure-main .mark:nth-of-type(4){bottom:-11px;right:-11px;}
.figure-main img{width:100%;}
.figure-main figcaption{max-width:42ch;}

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

.detail-figure{grid-column:1 / span 4;margin:0;}
.detail-figure img{width:100%;}
.detail-text{grid-column:7 / span 6;}

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

.about-block{grid-column:3 / span 7;}
.about-marks{
  grid-column:1 / span 1;
  display:flex;
  flex-direction:column;
  gap:96px;
  padding-top:8px;
}

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

.contact-line{
  font-family:var(--mono);
  letter-spacing:.06em;
  font-size:15px;
}

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

.site-foot{background:var(--dark);color:var(--bg);padding:56px 0 48px;margin-top:0;}
.foot-rule{grid-column:1 / -1;position:relative;height:2px;margin-bottom:38px;}
.foot-rule::before,.foot-rule::after{content:"";position:absolute;height:2px;top:0;}
.foot-rule::before{left:0;right:0;background:var(--blue);}
.foot-rule::after{left:24px;right:-24px;top:6px;background:var(--gold);}
.foot-a{grid-column:1 / span 7;}
.foot-b{grid-column:8 / span 5;}
.foot-name{
  font-family:var(--mono);
  font-size:15px;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 12px;
}
.site-foot p{color:#c3c8d0;font-size:15.5px;}
.site-foot a{color:#9fb8f5;}
.foot-nav ul{list-style:none;margin:0 0 18px;padding:0;}
.foot-nav li{margin:6px 0;}
.foot-nav a{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#e2e5ea;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.foot-nav a:hover{border-bottom-color:var(--gold);}
.foot-mail{font-family:var(--mono);font-size:13px;letter-spacing:.06em;}
.foot-note{
  grid-column:1 / -1;
  margin-top:36px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8f96a1;
}

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

.page-head{padding:calc(var(--step) - 24px) 0 40px;}
.page-head h1{
  grid-column:1 / span 8;
  font-family:var(--mono);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:clamp(23px,3vw,34px);
  line-height:1.3;
  margin:0;
}
.page-head .kicker{grid-column:1 / -1;}
.page-lede{grid-column:1 / span 7;color:var(--mut);}

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

@media (max-width:1000px){
  .hero-lede{grid-column:1 / span 7;}
  .hero-topics{grid-column:9 / span 4;}
  .figure-main{grid-column:2 / span 10;}
  .detail-figure{grid-column:1 / span 5;}
  .detail-text{grid-column:7 / span 6;}
  .about-block{grid-column:3 / span 9;}
}

@media (max-width:820px){
  :root{--step:50px;}
  body{font-size:16.5px;}
  .grid{padding:0 20px;column-gap:0;}
  .hero-inner{grid-template-columns:1fr;}
  .t1,.t2,.t3,.t4,
  .hero h1,.hero-lede,.hero-topics,
  .figure-main,.detail-figure,.detail-text,
  .about-block,.page-head h1,.page-lede,
  .foot-a,.foot-b,.foot-rule,.foot-note{grid-column:1 / -1;}
  .about-marks{display:none;}
  .hero-topics{margin-top:26px;}
  .detail-text{margin-top:30px;}
  .head-inner{padding:16px 20px;}
  .site-nav{margin-left:0;width:100%;}
  .site-nav ul{gap:8px 18px;}
  .rule::after{right:0;left:24px;}
  .foot-rule::after{right:0;}
  .h1-row-off::after{right:-6px;}
}

@media (max-width:420px){
  .grid{padding:0 16px;}
  .head-inner{padding:14px 16px;}
}