/* Central stylesheet — the "Zeta" template: a white page, a tall header with wide-spaced capitals and a solid block for
   the active page, a banner over a picture with a line-art shape and numbered dots, sections on pictures with a dark
   veil, square buttons with a passing shine, progress bars, a testimonial card.
   Colours are never written here: they come from the theme (inc/theme.php, optionally overridden by a page's or
   project's own theme.php) as custom properties: --bg --fg --muted --ink --line --accent --strong --accent-hi --on-accent
   --soft --edge --panel --hero-a --hero-b --veil --foot --font, and the pictures: --pic-hero --pic-about --pic-services
   --pic-contact (a picture under the veil, or a gradient) and --shape-hero --shape-about --shape-services --shape-menu.
   A page or project with its own style.php can include this file and add to it. */

/* the menu bar: its height and the size of the logo are set here, and the space to the left of the logo is worked out from
   them, so the logo always has the same distance above, below and to the left of it */
:root { --bar-h: 4.5rem; --logo-fs: 1.875rem; --bar-gap: calc((var(--bar-h) - var(--logo-fs)) / 2); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 1.5rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg); font: 400 .95rem/1.85 var(--font);
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3 { color: var(--ink); }
ul, ol { padding: 0; list-style: none; }
a { color: var(--strong); text-decoration: none; }
a:hover { color: var(--accent-hi); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--strong); outline-offset: 3px; }
.hero :focus-visible, .block--pic :focus-visible, .nav :focus-visible { outline-color: #FFFFFF; }
.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.main { flex: 1; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--strong); color: var(--on-accent); padding: .6rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* icons (inline SVG, drawn for this site; they take the colour of the text around them) */
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.ico--flip { transform: scaleX(-1); }

/* line-art shapes (decoration; they are pictures of their own, see PICTURES in inc/content.php) */
.shape { position: absolute; z-index: 2; pointer-events: none; background-repeat: no-repeat; background-size: contain; }
.shape--hero { top: 50%; right: 16%; width: min(25%, 15.75rem); aspect-ratio: 454 / 540; transform: translateY(-50%); background-image: var(--shape-hero); background-position: center; }
.shape--about { top: 0; left: 0; width: 9.7rem; aspect-ratio: 155 / 114; background-image: var(--shape-about); background-position: top left; }
.shape--services { top: 7.25rem; right: 0; width: 10.5rem; aspect-ratio: 168 / 315; background-image: var(--shape-services); background-position: right center; }

/* ------------------------------------------------------------ menu bar */
.bar { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.bar__in { display: flex; align-items: center; height: var(--bar-h); padding: 0 1rem 0 var(--bar-gap); }
.brand { position: relative; top: -.14em; margin-left: -.035em; color: var(--ink); font-family: Montserrat, var(--font); font-size: var(--logo-fs); font-weight: 700; letter-spacing: -.02em; line-height: 1; }   /* top / margin-left: the letters themselves (from the top of "d" to the bottom of "g", from the edge of "m") are what sits at equal distances, not the invisible box around them */   /* the name as written: lower case */
.brand:hover { color: var(--ink); text-decoration: none; }
.brand i { color: var(--accent); font-style: normal; }
.nav { height: 100%; margin-left: auto; }
.nav ul { display: flex; height: 100%; }
.nav a { display: flex; align-items: center; gap: .5rem; height: 100%; padding: 0 1.4rem; color: var(--ink); font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--strong); color: var(--on-accent); text-decoration: none; }
.nav__lang a { padding-right: 1.5rem; }
.menu-toggle, .hamburger { display: none; }

/* -------------------------------------------------------------- buttons */
.btns { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }
.btns--center { justify-content: center; margin-top: 4rem; }
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-width: 11.7rem; height: 4.125rem; padding: 0 1.75rem; border: 0; background: var(--strong); color: var(--on-accent);
  font: inherit; font-size: .6875rem; font-weight: 300; letter-spacing: .42em; text-transform: uppercase; cursor: pointer;
}
.btn:hover { color: var(--on-accent); text-decoration: none; }
.btn::after { content: ""; position: absolute; top: -50%; left: -70px; width: 60px; height: 200%; background: rgba(255, 255, 255, .1); transform: rotate(12.5deg); transition: all 400ms ease; }
.btn:hover::after { left: calc(100% + 70px); }   /* the shine that passes over the button */
.btn .ico { width: .8rem; height: .8rem; }
.btn--ghost { background: transparent; box-shadow: inset 0 0 0 2px #FFFFFF; }
.hero .btn { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.hero .btn--ghost { box-shadow: inset 0 0 0 2px #FFFFFF; }

/* -------------------------------------------------------------- banners */
.hero { position: relative; overflow: hidden; background: var(--pic-hero); background-color: var(--hero-b); color: #FFFFFF; }
.hero h1, .hero h2, .hero h3, .hero .display { color: #FFFFFF; }
.hero--page { display: flex; align-items: center; min-height: clamp(18rem, 42vh, 25rem); padding: 4rem 0; }
.kicker { position: relative; display: inline-block; margin-bottom: 1.25rem; padding-left: 3rem; color: var(--strong); font-size: .75rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }
.kicker::before { content: ""; position: absolute; left: 0; top: 50%; width: 2.2rem; height: 2px; background: currentColor; }
.hero .kicker { color: #FFFFFF; }
.display { max-width: 18ch; margin-bottom: 1.25rem; color: var(--ink); font-size: clamp(2.3rem, 6vw, 4.5rem); font-weight: 300; line-height: 1.15; }
.display em { font-style: normal; font-weight: 700; }
.hero--page .display { font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: .75rem; }
.lead { max-width: 56ch; color: var(--muted); font-size: 1rem; font-weight: 300; }
.hero .lead { color: #FFFFFF; }
.hero--page .wrap { position: relative; z-index: 3; }
.crumb { margin-bottom: 1rem; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; }
.crumb a { color: var(--muted); }
.hero .crumb a { color: #FFFFFF; }

/* the rotating banners: they lie on top of each other, one is shown; the first one is shown without a script */
.slider, .testi { position: relative; }
.slides { display: grid; }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.slide.is-active { opacity: 1; visibility: visible; }
/* the home banner: with the menu above and the numbers below it fits the window and a strip of the next section shows under it;
   the words stand in the middle of the space above the numbered dots (never pushed down by a big top padding) */
.hero .slide { display: flex; align-items: center; min-height: clamp(26rem, calc(100vh - var(--bar-h) - 7.5rem - 4rem), 44rem); padding: 3rem 0 6rem; }
.hero .slide .display { font-size: clamp(2.1rem, 4.8vw, 3.9rem); margin-bottom: 1rem; }
.hero .slide .kicker { margin-bottom: 1rem; }
.hero .slide .btns { margin-top: 2rem; }
.hero .slide .wrap > * { max-width: 38rem; }
.hero .slide .wrap { position: relative; z-index: 3; }
.slider__ui { display: contents; }
.slider__nav { position: absolute; bottom: 0; z-index: 12; display: grid; place-items: center; width: 4rem; height: 4.625rem; padding: 0; border: 0; background: transparent; color: #FFFFFF; cursor: pointer; }
.slider__nav--prev { right: 4rem; }
.slider__nav--next { right: 0; }
.slider__nav:hover { color: var(--accent); }
.slider__nav .ico { width: 1.4rem; height: 1.4rem; }
.dotbar { position: absolute; left: 0; bottom: 0; z-index: 11; width: 100%; height: 4.625rem; }
.dotbar .wrap { height: 100%; }
.dots { display: flex; height: 100%; }
.dot { height: 100%; padding: 0 .8rem; border: 0; background: transparent; color: #FFFFFF; font: 300 .875rem/1 var(--font); cursor: pointer; }
.dot[aria-current="true"], .dot:hover { background: var(--strong); }

.hero__foot { position: relative; z-index: 3; border-top: 1px solid rgba(255, 255, 255, .35); }
/* the numbers: a big bold number on the left, its words on the right in two or three lines, together about as tall as the number.
   (the earlier variant, number centred above the words: .stats li { padding: 1.5rem; text-align: center; } with the number as display: block, weight 300) */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1rem 2rem; }   /* auto-fill, not auto-fit: a number left over on its own row (an odd count) keeps the same column width as the rest, instead of stretching to fill the whole row. The gap is a real grid gap (not just one side's padding), so neighbouring columns never touch, at any window width. */
.stats li { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 0; }
.stats b { flex: none; color: #FFFFFF; font-size: clamp(3rem, 6vw, 4.4rem); font-weight: 700; line-height: 1; }
.stats span { color: #FFFFFF; font-size: .78rem; letter-spacing: .16em; line-height: 1.75; text-transform: uppercase; }

.tocbar { border-bottom: 1px solid var(--line); }
.toc { display: flex; flex-wrap: wrap; gap: .6rem; padding: 1.1rem 0; }
.toc a { padding: .45rem 1.1rem; border: 1px solid var(--line); color: var(--ink); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.toc a:hover { border-color: var(--strong); background: var(--strong); color: var(--on-accent); text-decoration: none; }

/* ------------------------------------------------------------ sections */
.block { position: relative; padding: clamp(4rem, 9vw, 7.5rem) 0; }
.block--pic { color: #FFFFFF; background-color: var(--hero-b); background-position: center; background-attachment: fixed; }
.block--pic h1, .block--pic h2, .block--pic h3 { color: #FFFFFF; }
.block--pic .wrap { position: relative; z-index: 3; }
.block--about { background: var(--pic-about) var(--hero-b); background-attachment: fixed; padding: clamp(5rem, 13vw, 12rem) 0 clamp(4.5rem, 12vw, 11rem); }
.block--services { background: var(--pic-services) var(--hero-b); background-attachment: fixed; padding: clamp(5rem, 11vw, 9.5rem) 0 clamp(4rem, 8vw, 7.5rem); }
.block--contact { background: var(--pic-contact) var(--hero-b); background-attachment: fixed; padding: clamp(5rem, 12vw, 12rem) 0 clamp(4rem, 8vw, 7.5rem); }
.block--final .final { display: grid; justify-items: center; gap: 1.5rem; text-align: center; }
.block--final .lead { max-width: 46ch; margin-inline: auto; color: #FFFFFF; }
.block--final .section_title { margin-bottom: 2rem; }
@media (max-width: 62rem), (hover: none) { .block--pic { background-attachment: scroll; } }   /* the picture stays put while the text scrolls; phones do this badly */

.section_title { position: relative; z-index: 0; margin-bottom: clamp(3rem, 8vw, 6rem); text-align: center; }
.section_title h2 { position: relative; display: inline-block; padding-top: 4rem; font-size: 1.5rem; font-weight: 600; letter-spacing: .2em; line-height: 1.35; text-transform: uppercase; }
.section_title h2::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 2.8rem; margin-left: -1px; background: var(--strong); }
.section_title h2 span { position: absolute; top: 55%; left: 50%; z-index: -1; transform: translate(-50%, -50%); color: #FF0000; font-size: 4.5rem; font-weight: 900; letter-spacing: 0; opacity: .32; }   /* the big pale letter behind the title */
.section_title--pic h2 { color: #FFFFFF; }
.section_title--pic h2::before { background: #FFFFFF; }

.prose { max-width: 62ch; }
.prose p + p { margin-top: 1.1em; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.two--about { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(2rem, 6vw, 5rem); }
.about_text p { color: #FFFFFF; }
.about_text p + p { margin-top: 1.1em; }

/* the "features": an icon, a spaced-capitals title, a text */
.features { display: grid; gap: 3rem 4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.feature__ico, .service_item__ico { width: 2.6rem; height: 2.6rem; margin-bottom: 2rem; color: var(--accent); }

/* both edges straight (justified, no automatic word-hyphenation), like the three cards of the home page — everywhere
   there is running body text: the home/about feature cards, the services on their picture, prose blocks (the free
   "extra" sections, on every page), the about-page story and timeline, and FAQ answers (About, Services). Single-line
   texts are unaffected. */
.feature p, .service_item p, .prose p, .about_text p, .timeline li p, .acc__body p, .card--project p { text-align: justify; }
.feature h3 { margin-bottom: 1.4rem; font-size: .9rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.feature__link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.feature__link .ico { width: 1em; height: 1em; }

/* services */
.services { display: grid; gap: 2.5rem 3.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.service_item h3 { margin-bottom: 1.4rem; font-size: .9rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.ticks { display: grid; gap: .3rem; margin-top: .9rem; }
.ticks li { display: flex; gap: .55rem; align-items: flex-start; }
.ticks .ico { width: 1.05em; height: 1.05em; margin-top: .4em; color: var(--accent); }

/* progress bars (<progress>, no script) */
.bar_item { margin-bottom: 1.6rem; }
.bar_item h3 { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; font-size: .8rem; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; }
.bar_item h3 span { font-size: .7rem; }
progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 3px; border: 0; background: rgba(255, 255, 255, .3); color: var(--accent); }
progress::-webkit-progress-bar { background: rgba(255, 255, 255, .3); }
progress::-webkit-progress-value { background: var(--accent); }
progress::-moz-progress-bar { background: var(--accent); }

/* testimonials: a white card with paler cards fanned out behind it */
.testi { isolation: isolate; max-width: 46rem; margin: 2.5rem auto 0; }
.testi__box { position: relative; background: #FFFFFF; box-shadow: 0 22px 35px rgba(0, 0, 0, .28); }
.testi__box::before, .testi__box::after { content: ""; position: absolute; z-index: -1; }
.testi__box::before { top: 2.2rem; left: -2.2rem; width: calc(100% + 4.4rem); height: calc(100% - 4.4rem); background: rgba(0, 0, 51, .05); }
.testi__box::after { top: 4.4rem; left: -5.3rem; width: calc(100% + 10.6rem); height: calc(100% - 8.8rem); background: rgba(0, 0, 51, .035); }
.testi .slide { position: relative; padding: 5rem clamp(1.5rem, 8vw, 7.5rem) 3rem; text-align: center; }
.testi__pic { position: absolute; top: -1.75rem; left: 50%; display: grid; place-items: center; width: 5.9rem; height: 5.9rem; transform: translateX(-50%); border-radius: 50%; background: var(--accent); color: #FFFFFF; font-size: 2.4rem; font-weight: 300; }
.test_name { display: block; color: var(--ink); font-size: 1rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.test_title { display: block; color: var(--strong); }
.test_quote { display: block; margin-top: .6rem; color: var(--accent); font: italic 3rem/1 Georgia, "Times New Roman", serif; }
.testi blockquote p { max-width: none; }
.testi__nav { position: absolute; top: 50%; z-index: 10; display: grid; place-items: center; width: 3rem; height: 3rem; transform: translateY(-50%); border: 0; background: transparent; color: var(--accent); cursor: pointer; }
.testi__nav:hover { background: var(--strong); color: #FFFFFF; }
.testi__nav--prev { left: -3rem; }
.testi__nav--next { right: -3rem; }
@media (max-width: 62rem) { .testi__nav--prev { left: 0; } .testi__nav--next { right: 0; } .testi__box::before, .testi__box::after { display: none; } }

/* clients */
.clients { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 4rem; }
.clients li { color: var(--ink); font-size: 1.5rem; font-weight: 300; letter-spacing: .15em; text-transform: uppercase; opacity: .3; transition: opacity .3s; cursor: default; }
.clients li:hover { opacity: 1; }

/* cards (the project list) */
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); counter-reset: card; }
.card { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 2rem 1.75rem 1.75rem; background: var(--panel); border-top: 3px solid transparent; counter-increment: card; transition: border-color .15s; }
.card::after { content: counter(card, decimal-leading-zero); position: absolute; right: 1.25rem; top: .75rem; color: rgba(0, 0, 51, .08); font-size: 3.4rem; font-weight: 300; line-height: 1; }
.card:hover, .card:focus-within { border-top-color: var(--accent); }
.card h3 { font-size: .9rem; font-weight: 600; letter-spacing: .2em; line-height: 1.5; text-transform: uppercase; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.tags li { padding: .05rem .7rem; border: 1px solid var(--line); color: var(--muted); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.hero .tags li { border-color: rgba(255, 255, 255, .6); color: #FFFFFF; }
.lead--dark { color: var(--muted); }

/* the project cards: the year in red, bold, the same size as the title (no live check behind it — these never had a
   public address). Below it, the exact same row as the sites list (.site__row / .site__addr / .site__visit): a boxed
   status with the blinking dot on the left, not coloured by a check but simply by "status" in the project's own file,
   and the one link into the project's own page, "посети", right — kept consistent with the other tiles on purpose. */
.proj__year { color: #CC0000; font-size: .9rem; font-weight: 700; letter-spacing: .02em; }

/* accordion (<details>, no script) */
.acc-list { max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
.acc summary { display: flex; align-items: center; gap: 1rem; padding: 1.2rem .25rem; color: var(--ink); font-size: .8rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc[open] summary { color: var(--strong); }
.acc__n { color: var(--accent); font-variant-numeric: tabular-nums; }
.acc__t { flex: 1; }
.acc__i { color: var(--accent); transition: transform .2s; }
.acc[open] .acc__i { transform: rotate(45deg); }
.acc__body { padding: 0 .25rem 1.5rem; }
.acc__body p + p { margin-top: .8em; }

/* timeline */
.timeline { max-width: 46rem; margin: 0 auto; border-left: 1px solid var(--line); }
.timeline li { position: relative; padding: 0 0 2.25rem 1.9rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -.36rem; top: .55rem; width: .7rem; height: .7rem; background: var(--accent); }
.timeline__y { color: var(--strong); font-size: .75rem; font-weight: 700; letter-spacing: .22em; }
.timeline h3 { font-size: .9rem; letter-spacing: .15em; text-transform: uppercase; }
.timeline p { margin-top: .3rem; }

/* facts of a project */
.facts { display: grid; padding: .5rem 1.5rem; background: var(--panel); border-top: 3px solid var(--accent); }
.facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.facts div:last-child { border-bottom: 0; }
.facts dt { color: var(--muted); }
.facts dd { color: var(--ink); font-weight: 700; text-align: right; }
.linklist { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; }
.linklist a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.linklist .ico { width: 1em; height: 1em; }

/* contacts (on white, in a quiet panel) */
.contact { display: grid; gap: .75rem; }
.contact li { display: grid; grid-template-columns: auto 6.5rem 1fr; align-items: center; gap: .75rem; padding: 1.1rem 1.4rem; background: var(--panel); border-left: 3px solid var(--accent); }
.contact__ico { width: 1.4rem; height: 1.4rem; color: var(--accent); }
.contact .label { color: var(--muted); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
.contact a { color: var(--ink); font-size: 1.1rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .25em; text-decoration-thickness: 2px; }
.contact a:hover { color: var(--accent); }
.contact li > a { justify-self: start; }   /* the link is only as wide as the text, not the whole row */
/* "show email" / "show phone": no box; it has the same font as the value that replaces it, only dotted-underlined like something to click */
.reveal { justify-self: start; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1.1rem; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: underline dotted; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .25em; cursor: pointer; }
.reveal:hover:not(:disabled) { color: var(--accent); text-decoration-style: solid; }
.reveal:disabled { opacity: .6; cursor: progress; }
.nojs { display: none; }
@media (scripting: none) { .nojs { display: inline; } .reveal { display: none; } }
.info h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .4rem; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; }
.info h3 .ico { color: var(--accent); }
.info p { margin-bottom: 1.5rem; color: var(--fg); }
.info .note { padding-left: 1rem; border-left: 3px solid var(--accent); }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }   /* robot trap in the contacts page */

/* footer */
.foot { background: var(--foot); color: #CCCCCC; font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 2rem; min-height: 3.5rem; padding-block: .5rem; }
.foot a { color: #FFFFFF; }

/* -------------------------------------------- small screens: full-screen menu */
@media (max-width: 62rem) {
  :root { --bar-h: 4rem; --logo-fs: 1.5rem; }
  .bar__in { padding-right: 1.25rem; }
  .brand { z-index: 41; }
  .menu-toggle { position: absolute; right: 1.25rem; top: 1rem; z-index: 42; display: block; width: 6rem; height: 2rem; margin: 0; opacity: 0; cursor: pointer; }
  .hamburger { position: relative; z-index: 41; display: flex; align-items: center; gap: .8rem; margin-left: auto; color: var(--ink); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
  .hamburger__close { display: none; }
  .hamburger__icon { width: 1.6rem; height: 2px; background: currentColor; box-shadow: 0 -6px currentColor, 0 6px currentColor; }
  .menu-toggle:focus-visible + .hamburger { outline: 2px solid var(--strong); outline-offset: 6px; }
  .menu-toggle:checked + .hamburger { color: #FFFFFF; }
  .menu-toggle:checked + .hamburger .hamburger__open { display: none; }
  .menu-toggle:checked + .hamburger .hamburger__close { display: inline; }
  .menu-toggle:checked + .hamburger .hamburger__icon { background: transparent; }
  .nav { position: fixed; inset: 0; z-index: 30; height: auto; margin: 0; padding: 6.5rem 2rem 2rem; background: var(--ink); visibility: hidden; opacity: 0; transition: opacity .25s, visibility .25s; overflow-y: auto; }
  .menu-toggle:checked ~ .nav { visibility: visible; opacity: 1; }
  .nav::after { content: ""; position: fixed; right: 0; bottom: 0; width: 15rem; aspect-ratio: 286 / 380; background: var(--shape-menu) no-repeat right bottom / contain; opacity: .5; pointer-events: none; }
  .nav ul { display: block; height: auto; }
  .nav a { height: auto; padding: 1rem 0; color: #FFFFFF; font-size: 1rem; }
  .nav a:hover, .nav a[aria-current="page"] { background: transparent; color: var(--accent); }
  .nav__lang a { padding-right: 0; }
  .shape--hero { right: 4%; width: 30%; opacity: .5; }
  .slider__nav { display: none; }
  .contact li { grid-template-columns: auto 1fr; }
  .contact li > :nth-child(n+3) { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print { .bar, .toc, .skip, .hp, .slider__ui, .shape { display: none; } .hero, .block--pic, .foot { background: #FFFFFF !important; color: #000000; } .hero *, .block--pic * { color: #000000 !important; } }

/* the list of maintained sites (About page): tiles like the projects', a year in the corner instead of the 01/02/03 count —
   same big, pale, background-style digits as the project count. The year floats, so a two-line name wraps around it
   instead of running under it; "card__head" is a float-containing block ("display: flow-root", the modern clearfix), its
   own top/right padding matching the year's old top/right offset so the reserved corner stays the same size. */
.card--site { --year-gap: 1.25rem; }   /* the one distance that matters: the year sits this far from the card's top edge AND its right edge — same number, not tuned separately per side */
.card--site::after { content: none; }
.card__head { display: flow-root; }   /* contains the float, so the name wraps beside/below the year instead of running under it */
.card__year { float: right; margin: calc(var(--year-gap) - 2rem - 3px) calc(var(--year-gap) - 1.75rem) .3rem .6rem; color: rgba(0, 0, 51, .08); font-size: 3.4rem; font-weight: 300; line-height: 1; }   /* 2rem / 1.75rem are .card's own top/right padding, and the extra 3px on top is .card's border-top (transparent, but still there) — pulled back so --year-gap is the true distance from the card's outer edge, top and right alike */
.site__row { display: flex; flex-wrap: nowrap; align-items: center; gap: .6rem; margin-top: auto; padding-top: .7rem; }
.site__addr, .site__visit { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border: 1px solid var(--line); color: var(--muted); font-size: .72rem; letter-spacing: .03em; }
.site__addr { flex: 1 1 auto; min-width: 0; }   /* shrinks first; its text hides behind an ellipsis, the box (and its padding) never does */
.site__addr-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.site__visit { flex: none; margin-left: auto; }   /* never shrinks, never wraps to its own line; same look as the address, not filled in */
.site__visit:hover { border-color: var(--strong); color: var(--strong); text-decoration: none; }
.site__visit .ico { width: .85em; height: .85em; }
/* an address-check link inside a note text (e.g. "[тук](…)"): looks like plain text, only coloured and underlined on hover */
.chk a, .led + a { color: inherit; text-decoration: none; }
.chk a:hover, .led + a:hover { color: var(--strong); text-decoration: underline; text-underline-offset: 3px; }
/* is the site online? green = answers (the address is a link), red = does not (plain text), orange = works but is on hold */
.led { display: inline; margin-right: .05em; font-size: 1.25em; line-height: 1; vertical-align: -.125em; font-style: normal; }   /* the dot is the text character •, set like a letter of the text: right against the words, its middle level with the middle of the lowercase letters */
.led--on { color: #00CC00; }
.led--off { color: #CC0000; }
.led--hold { color: #FF9900; }
.led--wait { color: #FF9900; }
.led[hidden] { display: none; }
/* a soft blink; people who asked their system for less motion get steady dots */
@keyframes led-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.led { animation: led-blink 1.6s ease-in-out infinite; }
.led--wait { animation-duration: .8s; }
@media (prefers-reduced-motion: reduce) { .led { animation: none; } }

/* The word next to a dot (ONLINE/OFFLINE/ON HOLD…) explains itself, but the full explanation is a tooltip on the dot —
   built with CSS, not the browser's native title="": Firefox never shows a native tooltip on an element that keeps
   animating (the blink keeps resetting its hover timer), so a real title="" silently never appears there. This one is
   pure CSS :hover, unaffected by the blink. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: 100%; z-index: 30;
  transform: translate(-50%, -.35em);
  padding: .3em .6em; border-radius: 3px;
  background: var(--ink); color: #FFFFFF;
  font-size: .7rem; font-weight: 400; font-style: normal; letter-spacing: .02em; text-transform: none; white-space: nowrap;
  opacity: 0; visibility: hidden; animation: none; transition: opacity .15s ease;
  pointer-events: none;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; }

/* "[placeholder — …]" notes left in the content: a yellow marker, so it is easy to see what still has to be filled in */
.ph { padding: 0 .3em; background: #FFFF00; color: #000000; font-style: normal; }

/* -------------------------------------------------- pictures of projects and pages */
/* Old logos, banners and screenshots, one under another, each on a quiet panel and centred at its own size (a small
   logo is never blown up; a big screenshot is scaled down to fit), so pictures of any age and shape look tidy. */
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: .5rem; }
.figure { display: flex; flex-direction: column; min-width: 0; margin: 0; background: var(--panel); border-top: 3px solid transparent; transition: border-color .15s; }
.figure:hover, .figure:focus-within { border-top-color: var(--accent); }
.figure a { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 6rem; padding: 1.25rem; cursor: zoom-in; }
.figure img { display: block; max-width: 100%; max-height: 30rem; height: auto; }
.figure figcaption { padding: .6rem 1rem .8rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.acc__body .gallery { margin-bottom: .25rem; }

/* text: bullet lists written as "- item" lines */
.bullets { margin: .8em 0; padding-left: 1.2rem; list-style: none; }
.bullets li { position: relative; padding: .1rem 0 .1rem .3rem; }
.bullets li::before { content: ""; position: absolute; left: -.9rem; top: .85em; width: .4rem; height: .4rem; background: var(--accent); }
.block--pic .bullets li::before { background: #FFFFFF; }
p + .bullets, .bullets + p { margin-top: .8em; }

/* lightbox: a picture opened larger (built by assets/js/main.php) */
.lb { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 1rem; background: rgba(0, 0, 0, .92); }
.lb[hidden] { display: none; }
.lb img { max-width: min(96vw, 80rem); max-height: 78vh; width: auto; height: auto; background: #FFFFFF; }
.lb__cap { max-width: 60rem; padding: .75rem 1rem 0; color: #FFFFFF; text-align: center; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.lb__btn { position: absolute; z-index: 2; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid rgba(255, 255, 255, .6); background: transparent; color: #FFFFFF; font-size: 1.4rem; cursor: pointer; }
.lb__btn:hover { background: var(--strong); border-color: var(--strong); }
.lb__close { top: 1rem; right: 1rem; }
.lb__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb__next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb__prev[hidden], .lb__next[hidden] { display: none; }
html.lb-open { overflow: hidden; }
.hero--page .shape--hero { top: 1.5rem; transform: none; }
@media (max-width: 62rem) { .hero--page .shape--hero { top: 1rem; } }

/* A picture row in the facts table (a map): the label on the left like any other row, a COMPACT picture on the right, so it
   does not push the text down; a click opens it large. The name sits in the (empty) top corner of the picture. The credit
   is page text, not part of the picture, so it stays readable at any size — set right under the picture, the same width. */
.facts .fact--image { align-items: center; }
.fact--image dd { flex: none; font-weight: 400; text-align: left; }
.map { position: relative; width: 10rem; max-width: 100%; margin: 0; }
.map a { display: block; cursor: zoom-in; }
.map img { display: block; width: 100%; height: auto; }
.map__badge { position: absolute; top: .3rem; left: .3rem; display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .45rem; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: .58rem; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; pointer-events: none; }
.map__badge::before { content: ""; flex: none; width: .5rem; height: .5rem; background: var(--accent); }
.map__credit { display: block; width: 10rem; max-width: 100%; margin: 1px 0 0; color: var(--muted); font-size: .6rem; font-weight: 400; letter-spacing: .04em; line-height: 1.35; }