/* Paskorenuviv — registration-marks */

:root{
  --bg:#f5f4f0;
  --bg-alt:#e2ded4;
  --bg-dark:#14456b;
  --ink:#1c1e20;
  --ink-2:#6a6d6e;
  --ink-inv:#f5f4f0;
  --acc:#c2522f;
  --acc2:#1d6b8f;
  --step:84px;
  --gap:24px;
  --serif:Georgia,'Times New Roman',serif;
  --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.8;
  overflow-x:hidden;
}

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

a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(194,82,47,.45)}
a:hover{border-bottom-color:var(--acc)}
a:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-bottom-color:transparent}

/* ---------- grid ---------- */
.wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
}
.wrap > *{min-width:0}

/* column placements */
.c1-7{grid-column:1 / span 7}
.c2-8{grid-column:2 / span 7}
.c3-9{grid-column:3 / span 7}
.c4-10{grid-column:4 / span 7}
.c1-9{grid-column:1 / span 9}
.c1-5{grid-column:1 / span 5}
.c8-12{grid-column:8 / span 4}
.c3-10{grid-column:3 / span 8}
.c1-12{grid-column:1 / span 12}
.c2-7{grid-column:2 / span 6}
.c1-6{grid-column:1 / span 6}
.c7-12{grid-column:7 / span 6}

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
h1{font-size:56px;line-height:1.08;letter-spacing:-.01em}
h2{font-size:27px;line-height:1.25;margin-bottom:14px}
h3{font-size:19px;line-height:1.35;margin:26px 0 8px}
p{margin:0 0 18px}
.lead{font-size:19px;line-height:1.75}
.cap{font-size:12px;line-height:1.6;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase}
.num{font-family:var(--serif);font-size:12px;letter-spacing:.18em;color:var(--acc2);display:block;margin-bottom:10px}
.sub{color:var(--ink-2)}

/* ---------- registration cross ---------- */
.cross{
  position:absolute;width:16px;height:16px;border:1px solid var(--acc2);
  border-radius:50%;pointer-events:none;
}
.cross::before,.cross::after{content:"";position:absolute;background:var(--acc2)}
.cross::before{left:-7px;top:7px;width:28px;height:1px}
.cross::after{top:-7px;left:7px;width:1px;height:28px}
.cross.tl{left:-8px;top:-8px}
.cross.tr{right:-8px;top:-8px}
.cross.bl{left:-8px;bottom:-8px}
.cross.br{right:-8px;bottom:-8px}
.cross.acc{border-color:var(--acc)}
.cross.acc::before,.cross.acc::after{background:var(--acc)}

/* ---------- separators ---------- */
.sep{grid-column:1 / span 7;margin:0 0 26px;position:relative;height:8px}
.sep::before,.sep::after{content:"";position:absolute;height:2px;left:0;right:0}
.sep::before{top:0;background:var(--acc)}
.sep::after{top:6px;left:24px;background:var(--acc2)}

/* ---------- header / nav ---------- */
.site-head{border-bottom:1px solid rgba(28,30,32,.16)}
.site-head .wrap{align-items:center;padding-top:20px;padding-bottom:20px}
.brand{grid-column:1 / span 4;font-family:var(--serif);font-size:21px;letter-spacing:.02em;color:var(--ink);border:0}
.brand:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.brand span{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-top:4px}
.site-nav{grid-column:5 / span 8;display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:flex-end}
.site-nav a{font-size:14px;letter-spacing:.03em;color:var(--ink);border-bottom:1px solid transparent;padding-bottom:2px}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-bottom-color:var(--acc);color:var(--acc)}

/* ---------- hero ---------- */
.hero{padding:var(--step) 0}
.hero .wrap{position:relative}
.hero-frame{grid-column:1 / span 12;position:relative;padding:34px 0 8px;margin-bottom:38px}
.hero-frame h1{max-width:none}
.hero-title{position:relative;display:inline-block}
.hero-title .line2{position:relative;display:inline-block}
.hero-title .line2::after{
  content:"";position:absolute;left:-4px;right:-10px;bottom:14px;height:2px;background:var(--acc);
}
.hero-lede{grid-column:1 / span 5;margin-top:6px}
.hero-list{grid-column:8 / span 5;margin-top:12px}
.hero-list ul{list-style:none;margin:10px 0 0;padding:0}
.hero-list li{position:relative;padding-left:20px;margin-bottom:9px;font-size:15px;line-height:1.6}
.hero-list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--acc)}

/* ---------- sections ---------- */
.band{padding:var(--step) 0}
.band.alt{background:var(--bg-alt)}
.band.dark{background:var(--bg-dark);color:var(--ink-inv)}
.band.dark h2,.band.dark h3{color:var(--ink-inv)}
.band.dark .cap,.band.dark .sub{color:#c8d6e2}
.band.dark .num{color:#8fc0d9}
.band.dark a{color:#f0b49b;border-bottom-color:rgba(240,180,155,.5)}
.band.dark .cross{border-color:#8fc0d9}
.band.dark .cross::before,.band.dark .cross::after{background:#8fc0d9}

.block{margin-bottom:var(--step)}
.block:last-child{margin-bottom:0}

/* ---------- lists ---------- */
.checks{list-style:none;margin:14px 0 20px;padding:0}
.checks li{position:relative;padding-left:22px;margin-bottom:10px}
.checks li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:2px;background:var(--acc)}
ol.steps{margin:14px 0 20px;padding-left:22px}
ol.steps li{margin-bottom:10px;padding-left:4px}
ol.steps li::marker{color:var(--acc2);font-family:var(--serif)}

.deflist{margin:14px 0 0}
.deflist dt{font-family:var(--serif);font-size:18px;margin-top:16px}
.deflist dd{margin:4px 0 0;color:var(--ink)}

/* ---------- figures ---------- */
.fig-main{grid-column:3 / span 8;position:relative;margin:0}
.fig-main img{width:100%}
.fig-main figcaption{margin-top:12px;max-width:70%}

.detail-fig{grid-column:2 / span 4;position:relative;margin:0}
.detail-fig img{width:100%}
.detail-fig figcaption{margin-top:12px}
.detail-text{grid-column:7 / span 6}

/* ---------- about page ---------- */
.about-body{grid-column:3 / span 7;position:relative}
.about-rail{grid-column:1 / span 1;position:relative}
.rail-mark{position:relative;height:1px;margin-top:0}
.rail-mark .cross{position:absolute;left:0;top:-8px}

/* ---------- footer ---------- */
.site-foot{background:var(--bg-dark);color:var(--ink-inv);padding:60px 0 54px;margin-top:var(--step)}
.site-foot .sep{grid-column:1 / span 12;margin-bottom:36px}
.site-foot .sep::before{background:var(--acc)}
.site-foot .sep::after{background:#8fc0d9}
.foot-a{grid-column:1 / span 7}
.foot-b{grid-column:8 / span 5}
.foot-a h2{font-size:22px;margin-bottom:10px}
.foot-a p{font-size:15px;color:#c8d6e2;margin-bottom:0;max-width:44ch}
.foot-b ul{list-style:none;margin:0 0 18px;padding:0}
.foot-b li{margin-bottom:7px}
.foot-b a{color:#f0b49b;font-size:15px;border-bottom-color:rgba(240,180,155,.4)}
.foot-b .cap{color:#8fc0d9}
.foot-mail{display:inline-block;margin-top:4px}
.foot-note{grid-column:1 / span 12;margin-top:40px;font-size:12px;color:#9db6c9;letter-spacing:.04em}

/* ---------- page head (inner pages) ---------- */
.page-head{padding:var(--step) 0 0}
.page-head .wrap{position:relative}
.page-head .frame{grid-column:1 / span 9;position:relative;padding:30px 0 10px}
.page-head h1{font-size:44px}
.page-head .kicker{grid-column:1 / span 12;margin-bottom:6px}
.page-lede{grid-column:1 / span 6;margin-top:22px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  h1{font-size:42px}
  .page-head h1{font-size:34px}
  h2{font-size:24px}
  .fig-main{grid-column:1 / span 12}
  .fig-main figcaption{max-width:100%}
  .detail-fig{grid-column:1 / span 6}
  .detail-text{grid-column:1 / span 12;margin-top:34px}
  .hero-lede{grid-column:1 / span 7}
  .hero-list{grid-column:1 / span 12;margin-top:30px}
  .c1-7,.c2-8,.c3-9,.c4-10,.c1-9,.c1-5,.c8-12,.c3-10,.c2-7,.c1-6,.c7-12{grid-column:1 / span 12}
  .about-body{grid-column:2 / span 11}
  .sep{grid-column:1 / span 12}
  .foot-a,.foot-b{grid-column:1 / span 12}
  .foot-b{margin-top:34px}
}

@media (max-width:640px){
  :root{--step:50px;--gap:16px}
  body{font-size:16px;line-height:1.75}
  h1{font-size:31px}
  .page-head h1{font-size:27px}
  h2{font-size:21px}
  h3{font-size:17px}
  .lead{font-size:17px}
  .wrap{padding:0 18px}
  .brand{grid-column:1 / span 12}
  .site-nav{grid-column:1 / span 12;justify-content:flex-start;margin-top:14px;gap:6px 18px}
  .hero-title .line2::after{bottom:6px}
  .about-body{grid-column:1 / span 12}
  .about-rail{display:none}
  .detail-fig{grid-column:1 / span 12}
  .site-foot{padding:44px 0 40px}
}