@font-face {
font-family: 'Jost';
font-style: normal;
font-weight: 300 600;
font-display: swap;
src: url(/fonts/jost-300-600-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Jost';
font-style: normal;
font-weight: 300 600;
font-display: swap;
src: url(/fonts/jost-300-600-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Долгота дня. Идея: сутки — это полоса от полуночи до полуночи, день — её светлая часть.
Ночь — тёмно-синий, свет — солнечно-жёлтый, всё остальное — бумага и текст цвета ночи. Jost: геометрия круга, как у солнечного диска. */
:root{
--paper:#fcfbf7; --night:#1b2433; --night-2:#2a3549; --sun:#f2b33d; --sun-deep:#8a5300;
--muted:#596170; --line:#e2e0d7; --tint:#f4f1e6;
--wrap:1200px; --pad:clamp(16px,4vw,48px);
--font:"Jost",-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--night);font:400 18px/1.6 var(--font);font-variant-numeric:tabular-nums}
a{color:var(--night);text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{text-decoration-color:var(--night)}
:focus-visible{outline:3px solid var(--night);outline-offset:2px;box-shadow:0 0 0 6px var(--sun)}
.skip{position:absolute;left:-9999px;top:12px;background:var(--night);color:var(--paper);padding:8px 12px;z-index:9}.skip:focus{left:8px}
/* Полоска над шапкой: сегодняшние сутки города */
.strip{position:relative;height:6px;background:var(--night);overflow:hidden}
.strip i,.bar i,.rb-track i{position:absolute;top:0;bottom:0;background:var(--sun)}
.head,main,.foot{width:min(100% - 2 * var(--pad),var(--wrap));margin-left:auto;margin-right:auto}
.head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px;padding:20px 0}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:21px;letter-spacing:-.01em;text-decoration:none;color:var(--night)}
.sun{width:22px;height:22px;border-radius:50%;background:linear-gradient(var(--sun) 50%,var(--night) 50%)}
.nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.nav a{font-size:16px;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--line)}
.nav a[aria-current]{border-color:var(--sun)}
main{padding-bottom:16px}
main:focus{outline:0}
.crumbs{font-size:14.5px;color:var(--muted);padding-top:8px}
.crumbs a{color:var(--muted);text-decoration-color:var(--line)}
h1{font-weight:500;font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-.025em;margin:.35em 0 .45em;max-width:20em;text-wrap:balance}
h2{font-weight:500;font-size:clamp(25px,3vw,32px);line-height:1.15;letter-spacing:-.015em;margin:2em 0 .5em;text-wrap:balance}
p{margin:0 0 1em;max-width:38em;text-wrap:pretty}
.intro{font-size:19px;max-width:36em}
.note{font-size:15px;color:var(--muted)}
/* Герой: длительность дня и полоса суток */
.hero{margin:0 0 2.2em}
.hero-lead{font-size:17px;color:var(--muted);margin:0 0 .2em}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:16px 48px;align-items:end;margin-bottom:22px}
.hero-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px}
.facts{margin:0;display:grid;gap:10px;padding:0 0 6px 20px;border-left:2px solid var(--sun)}
.facts dt{font-size:14px;color:var(--muted);line-height:1.3}
.facts dd{margin:0;font-size:17px;font-weight:500;line-height:1.35}
@media(max-width:820px){.hero-grid{grid-template-columns:minmax(0,1fr)}.facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));padding:0 0 0 14px}}
.dur{font-weight:300;font-size:clamp(68px,12vw,156px);line-height:.95;letter-spacing:-.045em;white-space:nowrap}
.dur small{font-size:.3em;font-weight:400;letter-spacing:0;color:var(--muted);margin:0 .12em 0 .06em}
.dur-word{font-size:clamp(48px,8vw,104px);letter-spacing:-.035em;white-space:normal}
.delta{font-size:18px;font-weight:500;white-space:nowrap;padding-left:22px;position:relative}
.delta::before{content:"";position:absolute;left:0;top:50%;margin-top:-7px;border:7px solid transparent}
.delta-up{color:var(--sun-deep)}.delta-up::before{border-bottom:10px solid var(--sun);border-top:0;margin-top:-6px}
.delta-down::before{border-top:10px solid var(--night);border-bottom:0;margin-top:-4px}
.ribbon{position:relative;margin:0 0 6px}
.ribbon{padding-top:24px}
.rb-track{position:relative;height:clamp(64px,9vw,96px);background:var(--night);border-radius:3px}
.rb-noon{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(27,36,51,.35)}
.rb-now{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--paper);box-shadow:0 0 0 1px var(--night)}
.rb-now::after{content:"сейчас";position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:12px;line-height:1;color:var(--paper);background:var(--night);padding:3px 5px;border-radius:2px}
.rb-label{position:absolute;z-index:2;top:50%;transform:translate(calc(-100% - 12px),-50%);font-size:17px;font-weight:500;color:var(--paper);white-space:nowrap}
.rb-label small{display:block;font-size:12.5px;font-weight:400;opacity:.8;line-height:1.1}
.rb-down{transform:translate(12px,-50%)}
.rb-up.rb-in{transform:translate(12px,-50%);color:var(--night)}
.rb-down.rb-in{transform:translate(calc(-100% - 12px),-50%);color:var(--night);text-align:right}
.rb-scale{position:relative;height:24px;font-size:12.5px;color:var(--muted)}
.rb-scale span{position:absolute;top:6px;transform:translateX(-50%)}
.rb-scale span:first-child{transform:none}.rb-scale span:last-child{transform:translateX(-100%)}
/* Таблицы */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4em}
table{border-collapse:collapse;width:100%;font-size:16.5px}
thead th{font-size:13.5px;font-weight:500;color:var(--muted);text-align:left;padding:8px 14px 8px 0;border-bottom:2px solid var(--night);white-space:nowrap}
td,tbody th{padding:9px 14px 9px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
tbody th{font-weight:500}
tbody th a{text-decoration-color:transparent}
tbody tr:hover th a{text-decoration-color:var(--sun)}
.num{text-align:right}
td.num,th.num{padding-left:18px}
th.num{text-align:right}
td.num,th.num{padding-left:18px}
td.num:last-child,th.num:last-child{padding-right:0}
.plus{color:var(--sun-deep);font-weight:500}
.zero{color:var(--muted)}
tbody tr:hover td,tbody tr:hover th{background:var(--tint)}
tr.now th,tr.now td{background:var(--tint)}
tr.now th{font-weight:600}
tr.month-start th,tr.month-start td{border-top:1px solid var(--night)}
.light{width:40%;min-width:150px}
.cities{max-width:980px}
.days .times{display:none}
.chg-m{display:none}
.bar{position:relative;display:block;height:10px;background:var(--night);border-radius:2px;overflow:hidden}
.times{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.months .light{width:38%}
.finder{display:flex;align-items:center;gap:12px;margin:1.6em 0 .6em;max-width:460px}
.finder label{font-weight:500;white-space:nowrap}
.finder input{flex:1;min-width:0;font:inherit;font-size:17px;padding:10px 12px;min-height:48px;border:1.5px solid var(--night);border-radius:3px;background:#fff;color:var(--night)}
.finder input::placeholder{color:#8a909b}
.finder input:focus-visible{outline:0;box-shadow:0 0 0 4px var(--sun)}
.empty{padding:14px 16px;background:var(--tint);border-left:4px solid var(--sun)}
.months-nav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 1.4em}
.months-nav a,.months-nav span{display:inline-block;min-width:52px;text-align:center;padding:7px 10px;border:1.5px solid var(--line);border-radius:3px;text-decoration:none;font-size:15.5px}
.months-nav a:hover{border-color:var(--night)}
.months-nav span{background:var(--night);border-color:var(--night);color:var(--paper)}
/* Свет за год */
.yp-wrap{margin:1em 0 1.6em;overflow-x:auto}
.yp{display:block;width:100%;height:auto}
.yp-night{fill:var(--night)}
.yp-day{stroke:var(--sun);stroke-width:2.6;fill:none}
.yp-grid{stroke:var(--paper);stroke-opacity:.22;stroke-width:1}
.yp-tick{fill:var(--muted);font:400 11px var(--font)}
.yp-now{stroke:var(--paper);stroke-width:1.5}
ul{padding-left:1.2em;max-width:38em}
.foot{margin-top:64px;padding:26px 0 40px;border-top:2px solid var(--night);font-size:15px;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 24px;margin-bottom:10px}
.foot nav a{color:var(--muted);text-decoration-color:var(--line)}
.foot p{margin:0}
.cookie{position:fixed;left:12px;right:12px;bottom:12px;max-width:560px;display:flex;gap:14px;align-items:center;background:var(--night);color:var(--paper);padding:12px 14px 12px 18px;font-size:14.5px;border-radius:3px;z-index:5;border-top:4px solid var(--sun)}
.cookie[hidden]{display:none}
.cookie p{margin:0}.cookie a{color:inherit}
.cookie button{flex:none;font:500 15px/1 var(--font);min-height:40px;padding:0 16px;border:0;border-radius:3px;background:var(--sun);color:var(--night);cursor:pointer}
@media(max-width:700px){
body{font-size:17px}
.head{padding:14px 0 0;display:block}
.nav{flex-wrap:nowrap;overflow-x:auto;gap:18px;margin:10px calc(var(--pad) * -1) 0;padding:0 var(--pad) 2px;scrollbar-width:none;border-bottom:1px solid var(--line)}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;padding:10px 0;font-size:15.5px}
.intro{font-size:17.5px}
.rb-label{font-size:15px}.rb-label small{font-size:11.5px}
.rb-scale .rb-minor{display:none}
table{font-size:15px}
td,tbody th{padding-right:10px}
.light{min-width:96px}
.cities tbody th{white-space:normal;min-width:88px}
thead th{white-space:normal;vertical-align:bottom;line-height:1.25}
.c-chg,.m-hide{display:none}
.month-t .light{min-width:64px;width:26%}
.chg-m{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.cities td.num,.cities th.num{padding-left:8px}
.days .light,.months .light{min-width:84px}
.days .t-ud{display:none}
.days .times{display:block}
.yp-tick{font-size:20px}
.yp-wrap{overflow:visible}
.finder{display:block}.finder label{display:block;margin-bottom:6px}
}
@media(prefers-reduced-motion:no-preference){
.rb-track i{animation:dawn .9s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes dawn{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}