/* Krubovo — registration-marks */
:root{
  --bg:#eeece6;
  --bg-alt:#dedbd2;
  --bg-dark:#1b2430;
  --ink:#1a1a18;
  --ink-2:#6d6a62;
  --ink-inv:#eeece6;
  --blue:#2a4f78;
  --ochre:#9a6a1c;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --step:84px;
  --gap:24px;
  --pad:40px;
}
*,*::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:18px;line-height:1.9;
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
p{margin:0 0 1.35em}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.3;margin:0}
h2{font-size:clamp(1.55rem,2.4vw,2rem);margin-bottom:.9em}
h3{font-size:1.2rem;margin:1.8em 0 .6em}
ul,ol{margin:0 0 1.5em;padding-left:1.2em}
li{margin-bottom:.45em}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ink-inv);padding:8px 14px;z-index:10}
.skip:focus{left:16px;top:12px}

.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}

/* registration cross */
.reg{
  position:absolute;width:26px;height:26px;color:var(--ink);pointer-events:none;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
}
.reg::after{content:"";position:absolute;inset:6px;border:1px solid currentColor;border-radius:50%}
.reg.tl{top:-13px;left:-13px}.reg.tr{top:-13px;right:-13px}
.reg.bl{bottom:-13px;left:-13px}.reg.br{bottom:-13px;right:-13px}

/* header */
.site-head{padding:22px 0;border-bottom:1px solid rgba(26,26,24,.18)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px}
.brand{font-family:var(--serif);font-size:1.45rem;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:12px}
.brand .reg{position:relative;width:18px;height:18px}
.brand .reg::after{inset:4px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 22px;font-size:15px;line-height:1.6}
.site-nav li{margin:0}
.site-nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.site-nav a:hover,.site-nav a[aria-current="page"]{border-bottom-color:var(--blue);color:var(--blue)}

/* hero */
.hero{padding:var(--step) 0}
.hero-frame{position:relative;padding:56px 44px 52px}
.hero .kicker{grid-column:1/-1;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ochre);margin-bottom:26px}
.hero h1{grid-column:1/span 9;font-size:clamp(2rem,4.1vw,3.3rem);margin-bottom:48px}
.hero h1 .l1,.hero h1 .l2{display:block}
.hero h1 .l2 span{position:relative;display:inline}
.hero h1 .l2 span::after{
  content:"";position:absolute;left:-6px;right:-14px;top:calc(50% + 7px);
  height:2px;background:var(--blue);opacity:.85;
}
.hero .lead{grid-column:1/span 5}
.hero .topics{grid-column:8/span 5;list-style:none;padding:0;margin:0;font-size:16px;line-height:1.7}
.topics li{position:relative;padding-left:24px;margin-bottom:.55em}
.topics li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;background:var(--blue)}
.topics .t-head{font-size:14px;color:var(--ink-2);padding:0;margin-bottom:.9em}
.topics .t-head::before{display:none}

/* main figure */
.fig-main{grid-column:3/span 8;position:relative;margin:0}
.fig-main .frame{position:relative}
.fig-main figcaption,.fig-detail figcaption{font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:22px;max-width:34em}
.cap-n{color:var(--ochre);font-family:var(--serif);margin-right:8px}
.figure-row{padding:0 0 var(--step)}

/* sections */
.sec{padding:var(--step) 0}
.sec.alt{background:var(--bg-alt)}
.sec .col{grid-column:1/span 7}
.sec .col.s2{grid-column:2/span 7}
.sec .col.s3{grid-column:3/span 7}
.sec .col.s4{grid-column:4/span 7}
.sep{position:relative;height:10px;margin-bottom:34px}
.sep::before,.sep::after{content:"";position:absolute;height:2px;left:0;right:0}
.sep::before{top:0;background:var(--blue)}
.sep::after{top:7px;left:24px;right:-24px;background:var(--ochre)}
.num{display:block;font-family:var(--serif);color:var(--ochre);font-size:15px;letter-spacing:.1em;margin-bottom:10px}
.check{list-style:none;padding:0}
.check li{position:relative;padding-left:28px}
.check li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border:1.5px solid var(--blue)}
.sec.alt .num{color:#7c5414}

/* contrast section */
.dark{background:var(--bg-dark);color:var(--ink-inv);padding:var(--step) 0}
.dark a{color:var(--ink-inv)}
.dark :focus-visible{outline-color:var(--ink-inv)}
.dark .num{color:#c79a4f}
.fig-detail{grid-column:1/span 5;margin:0;position:relative}
.fig-detail .reg{color:var(--ink-inv)}
.fig-detail figcaption{color:var(--ink-inv);opacity:.85}
.dark .text{grid-column:7/span 6;align-self:center}
.dark .check li::before{border-color:var(--ink-inv)}
.dark .sep::before{background:#6f93bb}

/* page (about / legal) */
.page-head{padding:var(--step) 0 0}
.page-head h1{grid-column:3/span 7;font-size:clamp(1.9rem,3.6vw,2.9rem)}
.page-head .lead{grid-column:3/span 7;margin-top:28px;color:var(--ink)}
.page-body{padding:48px 0 var(--step)}
.psec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-top:40px}
.psec .mark{grid-column:1/span 2;position:relative;height:26px;margin-top:10px}
.psec .mark .reg{position:absolute;left:0;top:0}
.psec .mark .reg.shift{left:6px;top:4px;color:var(--blue);opacity:.7}
.psec .body{grid-column:3/span 7}
.psec .body h2{margin-bottom:.7em}
.note{font-size:14px;color:var(--ink-2)}

/* footer */
.site-foot{background:var(--bg-dark);color:var(--ink-inv);padding:60px 0 40px;font-size:16px;line-height:1.8}
.site-foot a{color:var(--ink-inv)}
.site-foot :focus-visible{outline-color:var(--ink-inv)}
.foot-lines{grid-column:1/span 7;position:relative;height:10px;margin-bottom:44px}
.foot-lines::before,.foot-lines::after{content:"";position:absolute;height:2px;left:0;right:0}
.foot-lines::before{top:0;background:#6f93bb}
.foot-lines::after{top:7px;left:24px;right:-24px;background:#c79a4f}
.foot-a{grid-column:1/span 7;padding-right:40px}
.foot-a .fname{font-family:var(--serif);font-size:1.6rem;margin-bottom:10px}
.foot-b{grid-column:8/span 5}
.foot-b ul{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}
.foot-b li{margin:0}
.foot-copy{grid-column:1/-1;margin-top:40px;padding-top:18px;border-top:1px solid rgba(238,236,230,.2);font-size:14px}

/* tablet */
@media (max-width:1040px){
  :root{--pad:32px}
  .hero h1{grid-column:1/-1}
  .hero .lead{grid-column:1/span 7}
  .hero .topics{grid-column:8/span 5}
  .fig-main{grid-column:2/span 10}
  .sec .col,.sec .col.s3{grid-column:1/span 10}
  .sec .col.s2,.sec .col.s4{grid-column:3/span 10}
  .fig-detail{grid-column:1/span 5}
  .dark .text{grid-column:7/span 6}
  .page-head h1,.page-head .lead,.psec .body{grid-column:2/span 10}
  .psec .mark{grid-column:1/span 1}
}

/* mobile */
@media (max-width:760px){
  :root{--step:50px;--pad:20px;--gap:0px}
  body{font-size:17px}
  .grid > *,.psec > *{grid-column:1/-1 !important}
  .hero-frame{padding:40px 22px 36px}
  .hero h1{margin-bottom:30px}
  .hero .topics{margin-top:12px}
  .fig-main .reg,.fig-detail .reg{width:20px;height:20px}
  .fig-main .reg.tl,.fig-detail .reg.tl{top:-10px;left:-10px}
  .fig-main .reg.tr,.fig-detail .reg.tr{top:-10px;right:-10px}
  .fig-main .reg.bl,.fig-detail .reg.bl{bottom:-10px;left:-10px}
  .fig-main .reg.br,.fig-detail .reg.br{bottom:-10px;right:-10px}
  .sep::after,.foot-lines::after{right:0}
  .fig-detail{margin-bottom:40px;max-width:420px}
  .psec{padding-top:28px}
  .psec .mark{margin:0 0 14px}
  .foot-a{padding-right:0;margin-bottom:28px}
}
@media (max-width:380px){
  .foot-b ul{grid-template-columns:1fr}
}