/* Grunavelisto — registration-marks */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: #1e1a20;
  color: #e9e6e1;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.72;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.005em;
}

h1 { font-size: 2.55rem; line-height: 1.18; margin: 0; }
h2 { font-size: 1.72rem; line-height: 1.24; margin: 0 0 1.1rem; }
h3 { font-size: 1.24rem; font-style: italic; line-height: 1.3; margin: 2rem 0 0.7rem; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

a { color: #c9a24b; text-decoration: none; border-bottom: 1px solid rgba(201,162,75,0.45); }
a:hover { border-bottom-color: #c9a24b; }
a:focus-visible {
  outline: 2px solid #c9a24b;
  outline-offset: 3px;
  border-bottom-color: transparent;
}

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

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

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

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

.col-7 { 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; }

/* ---------- service labels ---------- */

.label {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #a9b2bd;
  line-height: 1.5;
}

.num {
  display: block;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: #a9b2bd;
  margin-bottom: 0.65rem;
}

.caption {
  font-size: 13px;
  line-height: 1.55;
  color: #9c949c;
  margin-top: 12px;
}

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

.rm {
  position: absolute;
  width: 22px;
  height: 22px;
  background:
    linear-gradient(#a9b2bd, #a9b2bd) center / 1px 100% no-repeat,
    linear-gradient(#a9b2bd, #a9b2bd) center / 100% 1px no-repeat;
  opacity: 0.75;
}
.rm-tl { top: -11px; left: -11px; }
.rm-tr { top: -11px; right: -11px; }
.rm-bl { bottom: -11px; left: -11px; }
.rm-br { bottom: -11px; right: -11px; }

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

.rule {
  border: 0;
  margin: 0 0 26px;
  height: 10px;
  position: relative;
  max-width: 420px;
}
.rule::before, .rule::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  left: 0;
}
.rule::before { top: 0; background: #c9a24b; }
.rule::after { top: 8px; left: 24px; background: #a9b2bd; }

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

.site-header {
  padding: 26px 0 22px;
  border-bottom: 1px solid #35303a;
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px 32px;
  justify-content: space-between;
}
.brand {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.24rem;
  color: #e9e6e1;
  border-bottom: 0;
  letter-spacing: 0.04em;
}
.brand:focus-visible { outline: 2px solid #c9a24b; outline-offset: 4px; }

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
}
.site-nav a {
  font-size: 13px;
  letter-spacing: 0.09em;
  color: #9c949c;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.site-nav a:hover, .site-nav a[aria-current="page"] {
  color: #e9e6e1;
  border-bottom-color: #c9a24b;
}

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

.hero { padding: 84px 0 0; }

.hero-frame {
  position: relative;
  border-top: 1px solid #35303a;
  border-bottom: 1px solid #35303a;
  padding: 46px 0 40px;
}

.hero-title { grid-column: 1 / span 9; position: relative; }
.hero-title .strike {
  position: relative;
  display: inline-block;
}
.hero-title .strike::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -14px;
  bottom: 0.24em;
  height: 2px;
  background: #c9a24b;
}

.hero-lead { grid-column: 1 / span 5; margin-top: 40px; }
.hero-lead p { color: #e9e6e1; }

.hero-topics { grid-column: 8 / span 4; margin-top: 46px; }
.hero-topics ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: 15px;
  color: #9c949c;
}
.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: 0.55em;
  width: 7px;
  height: 7px;
  background: #c9a24b;
}

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

.figure-main {
  margin: 84px 0 0;
}
.figure-main .frame {
  grid-column: 3 / span 8;
  position: relative;
}
.figure-detail .frame { position: relative; }

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

.band { padding: 84px 0; }
.band-alt { background: #272229; }

.band + .band { padding-top: 84px; }

.section-body ul, .section-body ol {
  margin: 0 0 1.15rem;
  padding-left: 0;
  list-style: none;
}
.section-body ol { counter-reset: step; }
.section-body ul li, .section-body ol li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}
.section-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: #c9a24b;
}
.section-body ol li {
  counter-increment: step;
  padding-left: 30px;
}
.section-body ol li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #a9b2bd;
  line-height: 2.2;
}

/* ---------- contrast band ---------- */

.band-contrast {
  background: #e9e6e1;
  color: #1e1a20;
  padding: 84px 0;
}
.band-contrast h2, .band-contrast h3 { color: #1e1a20; }
.band-contrast .num, .band-contrast .label { color: #6d6a72; }
.band-contrast .caption { color: #5f5a63; }
.band-contrast a { color: #7a5c12; border-bottom-color: rgba(122,92,18,0.45); }
.band-contrast .rule::before { background: #7a5c12; }
.band-contrast .rule::after { background: #6d7885; }
.band-contrast .rm {
  background:
    linear-gradient(#6d7885, #6d7885) center / 1px 100% no-repeat,
    linear-gradient(#6d7885, #6d7885) center / 100% 1px no-repeat;
}
.band-contrast .section-body ul li::before { background: #7a5c12; }
.band-contrast .section-body ol li::before { color: #6d7885; }

.contrast-layout { align-items: start; }
.contrast-figure { grid-column: 2 / span 4; }
.contrast-text { grid-column: 7 / span 6; }

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

.about-body { grid-column: 3 / span 7; }
.about-marks {
  grid-column: 1 / span 1;
  position: relative;
  padding-top: 10px;
}
.about-marks .mark {
  width: 22px;
  height: 22px;
  margin-bottom: 96px;
  background:
    linear-gradient(#a9b2bd, #a9b2bd) center / 1px 100% no-repeat,
    linear-gradient(#a9b2bd, #a9b2bd) center / 100% 1px no-repeat;
  opacity: 0.7;
}

/* ---------- legal / plain page ---------- */

.page-head { padding: 74px 0 0; }
.page-head h1 { grid-column: 1 / span 9; }
.page-head .page-lead { grid-column: 1 / span 7; margin-top: 26px; color: #9c949c; }

.doc-body { grid-column: 2 / span 7; }
.doc-body h2 { margin-top: 3rem; }
.doc-body h2:first-of-type { margin-top: 0; }

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

.site-footer {
  background: #e9e6e1;
  color: #1e1a20;
  padding: 56px 0 60px;
  margin-top: 84px;
}
.site-footer .rule { margin-bottom: 34px; }
.site-footer .rule::before { background: #7a5c12; }
.site-footer .rule::after { background: #6d7885; }
.footer-main { grid-column: 1 / span 7; }
.footer-side { grid-column: 8 / span 5; }
.footer-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  margin: 0 0 0.6rem;
}
.footer-main p { color: #4c4750; font-size: 15px; max-width: 46ch; }
.site-footer a { color: #7a5c12; border-bottom-color: rgba(122,92,18,0.4); }
.site-footer .label { color: #6d6a72; }
.footer-side ul {
  list-style: none;
  margin: 12px 0 22px;
  padding: 0;
  font-size: 15px;
}
.footer-side li { margin-bottom: 7px; }
.footer-mail { font-size: 15px; }
.footer-note {
  grid-column: 1 / span 12;
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid #cfcac3;
  font-size: 13px;
  color: #5f5a63;
}

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

@media (max-width: 900px) {
  .hero-title, .hero-lead, .hero-topics,
  .col-7, .off-1, .off-2, .off-3,
  .figure-main .frame,
  .contrast-figure, .contrast-text,
  .about-body, .doc-body,
  .page-head h1, .page-head .page-lead,
  .footer-main, .footer-side {
    grid-column: 1 / -1;
  }
  .about-marks { display: none; }
  .contrast-figure { max-width: 420px; margin-bottom: 34px; }
  .hero-topics { margin-top: 34px; }
  .footer-side { margin-top: 30px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.42rem; }
  h3 { font-size: 1.14rem; }
  .wrap { padding: 0 20px; }
  .hero { padding-top: 50px; }
  .hero-frame { padding: 34px 0 30px; }
  .band, .band-contrast { padding: 50px 0; }
  .figure-main { margin-top: 50px; }
  .site-footer { margin-top: 50px; padding: 44px 0 48px; }
  .rule { margin-bottom: 22px; }
  .site-header .wrap { flex-direction: column; align-items: flex-start; }
  .site-nav ul { gap: 6px 18px; }
}