/* Skopubrenda — rail-scale */

:root{
  --paper:#fcfbf9;
  --paper-alt:#efeeea;
  --ink:#141414;
  --ink-2:#6a6a66;
  --accent:#c22a22;
  --accent-2:#3c5a4a;
  --accent-2-dark:#8ba99a;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gutter:24px;
  --step:40px;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
}

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

a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.band--dark :focus-visible{outline-color:#f0a09a}

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

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

.band{padding-block:var(--step)}
.band--alt{background:var(--paper-alt)}
.band--dark{background:var(--ink);color:var(--paper);padding-block:80px}

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

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}

h1{
  font-size:clamp(32px,5vw,58px);
  line-height:1.08;
  letter-spacing:-.01em;
  margin-bottom:24px;
}
h1 .line{display:block}
h1 .line + .line{color:var(--ink)}

h2{
  font-size:23px;
  line-height:1.35;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(20,20,20,.18);
}
.band--dark h2{color:var(--paper);border-bottom-color:rgba(252,251,249,.28)}

h3{font-size:17px;line-height:1.5;margin:26px 0 6px}

p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.lead{font-size:19px;line-height:1.7;max-width:56ch}
.note{font-size:13px;line-height:1.7;color:var(--ink-2)}
.band--dark .note{color:#b3b1ac}

.caption{font-size:12px;line-height:1.6;color:var(--ink-2);letter-spacing:.01em}
.band--dark .caption{color:#a9a7a2}

/* ---------- service rail ---------- */

.rail{grid-column:1/3;padding-top:4px}
.rail--sticky{position:sticky;top:24px;align-self:start}

.rail-num{
  display:block;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--accent-2);
}
.band--dark .rail-num{color:var(--accent-2-dark)}

.rail-key{
  display:block;
  font-size:11px;
  line-height:1.5;
  color:var(--ink-2);
  margin-top:2px;
  max-width:14ch;
}
.band--dark .rail-key{color:#8f8d89}

.scale{
  display:block;
  width:13px;
  height:72px;
  margin-top:12px;
  background-image:repeating-linear-gradient(to bottom,rgba(20,20,20,.45) 0 1px,transparent 1px 11px);
}
.band--dark .scale{background-image:repeating-linear-gradient(to bottom,rgba(252,251,249,.45) 0 1px,transparent 1px 11px)}

/* short vertical strokes used as a horizontal separator */
.ticks{
  height:24px;
  margin:26px 0;
  background-image:repeating-linear-gradient(to right,var(--accent-2) 0 1px,transparent 1px 11px);
  opacity:.55;
}
.ticks--narrow{max-width:220px}

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

.masthead{border-bottom:1px solid var(--ink)}
.masthead-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px 28px;
  padding-block:18px;
}
.wordmark{
  font-family:var(--serif);
  font-size:20px;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.wordmark:hover{text-decoration:underline;text-underline-offset:4px}

.nav ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0}
.nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:15px;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.nav a:hover{border-bottom-color:var(--accent)}
.nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)}

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

.hero{padding-top:56px;padding-bottom:var(--step)}
.hero-rail{grid-column:1/3}
.hero-body{grid-column:3/9}

.gauge{list-style:none;margin:0;padding:0 0 0 14px;border-left:1px solid rgba(20,20,20,.25)}
.gauge li{margin-bottom:16px}
.gauge-v{display:block;font-family:var(--serif);font-size:15px;line-height:1.3}
.gauge-k{display:block;font-size:11px;color:var(--ink-2);letter-spacing:.03em}

/* ---------- content columns ---------- */

.col-text{grid-column:3/10}
.col-wide{grid-column:3/12}

.list{list-style:none;margin:16px 0 0;padding:0}
.list li{position:relative;padding-left:18px;margin-bottom:10px;break-inside:avoid}
.list li::before{
  content:"";
  position:absolute;
  left:0;top:.72em;
  width:8px;height:1px;
  background:var(--accent);
}
.list--two{columns:2;column-gap:40px}
.list b{font-weight:600}

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

.figure-main{margin:0;padding-block:var(--step)}
.figure-main img{grid-column:4/13;grid-row:1;display:block;width:100%}
.figure-main figcaption{
  grid-column:1/4;
  grid-row:1;
  align-self:end;
  padding:0 12px 4px 0;
}

/* ---------- dark section media ---------- */

.dark-text{grid-column:3/8}
.dark-media{grid-column:9/13;margin:0}
.dark-media img{display:block;width:100%}
.dark-media figcaption{margin-top:10px}

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

.site-footer{border-top:1px solid var(--ink);margin-top:var(--step);padding-block:26px 34px}
.foot-bay{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 28px;
}
.foot-name{font-family:var(--serif);font-size:18px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0;font-size:14px}
.foot-links a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.foot-links a:hover{border-bottom-color:var(--accent)}
.foot-mail{font-size:14px}
.foot-rule{height:1px;background:rgba(20,20,20,.25);margin:18px 0 10px}

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

@media (max-width:900px){
  :root{--step:24px}
  body{font-size:16px}
  .grid{grid-template-columns:1fr;padding:0 20px}
  .hero{padding-top:32px}
  .rail,.hero-rail,.col-text,.col-wide,.dark-text,.dark-media,
  .figure-main img,.figure-main figcaption{grid-column:1/-1}
  .rail--sticky{position:static}

  /* service column collapses into an inline mark above the heading */
  .rail{display:flex;align-items:center;gap:10px;padding-top:0;margin-bottom:10px}
  .rail-key{margin-top:0;max-width:none}
  .scale{
    width:44px;height:13px;margin:0;
    background-image:repeating-linear-gradient(to right,rgba(20,20,20,.45) 0 1px,transparent 1px 11px);
  }
  .band--dark .scale{background-image:repeating-linear-gradient(to right,rgba(252,251,249,.45) 0 1px,transparent 1px 11px)}
  .band--dark{padding-block:44px}

  .gauge{display:flex;flex-wrap:wrap;gap:4px 26px;border-left:0;border-top:1px solid rgba(20,20,20,.25);padding:12px 0 0;margin-bottom:22px}
  .gauge li{margin-bottom:0}

  .figure-main figcaption{padding:10px 0 0}
  .dark-media{margin-top:26px}
  .list--two{columns:1}
  .foot-bay{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}