/* universities.css — «Учёба · Университеты»: the catalogue (universities.html), a university's page
   (universities/_entry.html) and the fee guide (uni-fee.html). Phone first, then wider. Colours, type and the dark
   theme come from styles.css.
   The pages' one move is a question asked as a sentence — «Поступает [кто] с [каким аттестатом]» — and every price,
   verdict and date on the page answers for that person. The two choices are radio buttons; what they switch is drawn
   by :has() below, without a script (universities.js only carries the choice to the next page of the visit). */

.un { --line: rgba(var(--ink), .12); --band: #121211; --band-txt: #EDEAE3; --band-mut: #8D8A84; --band-soft: #CFCBC3; }
:root.dark .un { --band: #1F1F23; }
:where(.un) :is(h1, h2, h3, p, ul, ol, dl, dd, blockquote) { margin: 0; padding: 0; }
:where(.un) :is(ul, ol) { list-style: none; }
.un [hidden] { display: none !important; }
.un-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.un-kick { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.un-h2 { margin-top: 10px; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.08; font-weight: 500; letter-spacing: -.03em; text-wrap: balance; }
.un-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--acc); }
.un-link:hover { color: var(--acc); text-decoration: underline; text-underline-offset: 4px; }

/* ═══════════ Who is applying, with which certificate: what the two choices switch ═══════════ */
/* Every switched piece is a plain span or div with one of these classes and no display of its own. The person's
   fee door: the four documents that pay the statutory fee are «low», the rest pay the university's own price. */
.on-low, .who-eu, .who-pr, .who-euf, .who-blue, .who-ua, .who-visa, .crt-ua, .crt-ib, .crt-vwo, .crt-havo { display: none; }
.un:has(.un-who input:is([value="eu"], [value="pr"], [value="euf"], [value="blue"]):checked) .on-low { display: revert; }
.un:has(.un-who input:is([value="eu"], [value="pr"], [value="euf"], [value="blue"]):checked) .on-high { display: none; }
.un:has(.un-who input[value="eu"]:checked) .who-eu,
.un:has(.un-who input[value="pr"]:checked) .who-pr,
.un:has(.un-who input[value="euf"]:checked) .who-euf,
.un:has(.un-who input[value="blue"]:checked) .who-blue,
.un:has(.un-who input[value="ua"]:checked) .who-ua,
.un:has(.un-who input[value="visa"]:checked) .who-visa { display: revert; }
.un:has(.un-who input:not([value="kennis"]):checked) .who-kennis { display: none; }
.un:has(.un-crt input[value="ua"]:checked) .crt-ua,
.un:has(.un-crt input[value="ib"]:checked) .crt-ib,
.un:has(.un-crt input[value="vwo"]:checked) .crt-vwo,
.un:has(.un-crt input[value="havo"]:checked) .crt-havo { display: revert; }
.un:has(.un-crt input:not([value="ru"]):checked) .crt-ru { display: none; }

/* A pick: a word of the sentence that opens its list of answers. Native <details> and radios — it works without a
   script, with a keyboard and with a screen reader; the script only closes it after a choice. */
.un-pick { position: relative; display: inline-block; }
.un-pick summary { display: inline-flex; align-items: baseline; gap: .3em; list-style: none; cursor: pointer; font-weight: 500; color: var(--txt); border-bottom: .08em solid var(--acc); transition: color .2s; }
.un-pick summary::-webkit-details-marker { display: none; }
.un-pick summary:hover { color: var(--acc); }
.un-pick summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; border-radius: 4px; }
.un-pick summary .un-ic { width: .55em; height: .55em; stroke: var(--acc); stroke-width: 2.6; transform: translateY(-.05em); transition: transform .2s; }
.un-pick[open] summary .un-ic { transform: translateY(-.05em) rotate(180deg); }
.un-menu { position: absolute; z-index: 20; top: calc(100% + 10px); left: 0; width: min(340px, calc(100vw - 36px)); padding: 8px; border-radius: 18px; background: var(--s1); box-shadow: 0 18px 50px rgba(var(--ink), .18), 0 0 0 1px var(--line); font-size: 16px; line-height: 1.35; letter-spacing: 0; font-weight: 400; }
.un-menu label { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 12px; border-radius: 12px; color: var(--txt2); cursor: pointer; transition: background .15s, color .15s; }
.un-menu label:hover { background: rgba(var(--ink), .05); color: var(--txt); }
.un-menu label:has(input:checked) { background: rgba(var(--accr), .12); color: var(--txt); }
.un-menu label:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: -2px; }
.un-menu input { position: absolute; opacity: 0; pointer-events: none; }
.un-menu small { flex: none; font: 500 12px var(--mono); color: var(--mut); }
.un-menu label:has(input:checked) small { color: var(--acc); }

/* ═══════════ The catalogue ═══════════ */
.unl-hero { padding-top: 36px; }
.unl-top { display: grid; gap: 18px; }
.unl-top h1 { margin-top: 12px; font-size: clamp(46px, 9vw, 104px); line-height: .96; font-weight: 500; letter-spacing: -.045em; }
.unl-lead { max-width: 52ch; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.5; color: var(--txt2); text-wrap: pretty; }
.unl-phrase { margin-top: 28px; padding-top: 22px; border-top: 2px solid var(--txt); font-size: clamp(26px, 4.1vw, 50px); line-height: 1.36; font-weight: 300; letter-spacing: -.025em; color: var(--txt2); }
.unl-phrase .un-fixed { font-weight: 500; color: var(--txt); }

/* The answer: this person's fee, then every residence status and what it pays. */
.unl-answer { display: grid; gap: 28px; padding-block: 28px 40px; border-bottom: 1px solid var(--line); }
.unl-fee { display: block; margin-top: 10px; font-size: clamp(42px, 7vw, 76px); line-height: 1; font-weight: 500; letter-spacing: -.045em; }
.unl-fee small { font-size: .42em; font-weight: 400; letter-spacing: -.02em; color: var(--mut); }
.unl-why { max-width: 54ch; margin-top: 16px !important; font-size: 17px; line-height: 1.55; color: var(--txt2); }
.unl-why b { font-weight: 500; color: var(--txt); }
.unl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px !important; padding-top: 18px; border-top: 1px solid var(--line); }
.unl-stats div { font-size: 14px; line-height: 1.4; color: var(--txt2); }
.unl-stats b { display: block; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; font-weight: 500; letter-spacing: -.03em; color: var(--txt); }
.unl-who { border-top: 1px solid var(--line); }
.unl-who label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 12px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.35; color: var(--txt2); cursor: pointer; transition: background .15s; }
.unl-who label:hover { background: rgba(var(--ink), .03); }
.unl-who label b { font-weight: 500; color: var(--txt); white-space: nowrap; }
.unl-who label.is-low b { font: 500 14px var(--mono); }
.unl-who label:has(input:checked) { border-radius: 12px; border-bottom-color: transparent; background: rgba(var(--accr), .1); color: var(--txt); }
.unl-who label:has(input:checked) b { color: var(--acc); }
.unl-who label:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: -2px; }
.unl-who input { position: absolute; opacity: 0; pointer-events: none; }
.unl-who-foot { margin-top: 12px !important; font-size: 14px; line-height: 1.5; color: var(--mut); }
.unl-who-foot a { color: var(--acc); }

/* The list. On a phone each university is a card; from 1000px a row of a table — the sentence's answers as columns. */
.unl-cat { padding-top: 48px; scroll-margin-top: 72px; }
.unl-cat-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; }
.unl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.unl-search { display: flex; align-items: center; gap: 10px; width: min(320px, 100%); height: 44px; padding: 0 16px; border-radius: 22px; background: var(--s1); color: var(--mut); cursor: text; }
.unl-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font: 400 16px Geologica, system-ui, sans-serif; color: var(--txt); -webkit-appearance: none; appearance: none; }
.unl-search:focus-within { box-shadow: 0 0 0 3px rgba(var(--accr), .35); }
.unl-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--mut); }
.unl-sort select { height: 44px; padding: 0 14px; border: 0; border-radius: 22px; background: var(--s1); font: 500 15px Geologica, system-ui, sans-serif; color: var(--txt); cursor: pointer; }
.unl-filters { display: grid; gap: 14px; margin-top: 22px; padding: 16px 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.unl-frow { display: grid; gap: 8px; }
.unl-fchips { display: flex; gap: 6px; margin: 0 -18px; padding: 0 18px 2px; overflow-x: auto; scrollbar-width: none; }
.unl-fchips::-webkit-scrollbar { display: none; }
.unl-chip, .unl-reset { flex: none; }
.unl-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid var(--line); background: var(--s1); font-size: 15px; color: var(--txt); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.unl-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.unl-chip small { font: 500 12px var(--mono); color: var(--mut); }
.unl-chip:hover { border-color: rgba(var(--accr), .45); }
.unl-chip:has(input:checked) { background: var(--txt); border-color: var(--txt); color: var(--bg); }
.unl-chip:has(input:checked) small { color: inherit; opacity: .7; }
.unl-chip:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.unl-chip[data-gally-none] { opacity: .45; }
.unl-reset { height: 38px; padding: 0 14px; font-size: 15px; font-weight: 500; color: var(--acc); }
.unl-th { display: none; }
.unl-list { margin-top: 16px; }
.unl-row { position: relative; margin-top: 10px; border-radius: 20px; background: var(--s1); transition: box-shadow .2s; }
.unl-row:hover { box-shadow: 0 0 0 2px rgba(var(--accr), .45); }
.unl-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 14px; padding: 18px 52px 18px 18px; color: var(--txt); }
.unl-link:hover { color: var(--txt); }
.unl-name b { display: block; font-size: 19px; line-height: 1.2; font-weight: 500; letter-spacing: -.015em; }
.unl-name span { display: block; margin-top: 5px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.unl-pay { text-align: right; }
.unl-pay b { display: block; font-size: 18px; line-height: 1.15; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.unl-pay small { display: block; margin-top: 3px; font-size: 12px; color: var(--mut); }
.unl-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--txt2); }
.unl-facts b { font-weight: 500; color: var(--txt); }
.unl-cert { grid-column: 1 / -1; font-size: 14px; line-height: 1.45; color: var(--txt2); }
.unl-cert b { font-weight: 500; color: var(--txt); }
.unl-cert .is-no b { color: var(--mut); }
.unl-count, .unl-years, .unl-date { display: none; }
/* On a phone: name and price on the first line, the facts under them, the certificate's verdict last. */
.unl-name { grid-column: 1; grid-row: 1; }
.unl-pay { grid-column: 2; grid-row: 1; }
.unl-facts { grid-row: 2; }
.unl-cert { grid-row: 3; }
.unl-row .x-fav { position: absolute; top: 14px; right: 12px; }
.unl-more { margin-top: 20px !important; font-size: 15px; color: var(--mut); }
.unl-empty { padding: 28px 0; font-size: 17px; color: var(--txt2); }

/* The admission year: dark and full-bleed, eleven months from the first click to the first day. On a phone the
   months stand up and the dates run down a line; from 1000px they lie along a ruler. */
.unl-year { margin-top: 64px; padding: 40px 0 44px; background: var(--band); color: var(--band-txt); }
.unl-year .un-kick { color: var(--band-mut); }
.unl-year h2 { margin-top: 12px; font-size: clamp(30px, 4.6vw, 52px); line-height: 1.05; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; }
.unl-year-head { display: grid; gap: 14px; }
.unl-year-head > p { font-size: 16px; line-height: 1.55; color: var(--band-soft); }
.unl-months { display: none; }
.unl-marks { margin-top: 26px; border-left: 2px solid var(--band-txt); }
.unl-mark { position: relative; padding: 0 0 18px 18px; }
.unl-mark::before { content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; border-radius: 6px; background: var(--band); box-shadow: inset 0 0 0 2px var(--band-txt); }
.unl-mark.is-key::before { background: rgb(var(--accr)); box-shadow: none; }
.unl-mark b { display: block; font-size: 22px; line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
.unl-mark p { margin-top: 4px; max-width: 46ch; font-size: 15px; line-height: 1.45; color: var(--band-soft); }

/* Four kinds of university, as the schools page has four kinds of school. */
.unl-kinds { display: grid; gap: 12px; padding-top: 64px; }
.unl-kinds-head { margin-bottom: 8px; }
.unl-kind { display: flex; flex-direction: column; padding: 22px; border-radius: 22px; background: var(--s1); color: var(--txt); transition: box-shadow .2s; }
.unl-kind:hover { color: var(--txt); box-shadow: 0 0 0 2px rgba(var(--accr), .45); }
.unl-kind strong { margin-top: 10px; font-size: clamp(44px, 6vw, 64px); line-height: 1; font-weight: 500; letter-spacing: -.045em; }
.unl-kind h3 { margin-top: 12px; font-size: 21px; line-height: 1.2; font-weight: 500; letter-spacing: -.015em; }
.unl-kind p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--txt2); }
.unl-kind .un-link { margin-top: auto; padding-top: 18px; }

/* What families learn too late: a typeset list, no cards. */
.unl-late { display: grid; gap: 22px; margin-top: 64px; padding-block: 48px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.unl-late ol { counter-reset: lt; display: grid; }
.unl-late li { position: relative; padding: 18px 0 20px 40px; border-top: 1px solid var(--line); }
.unl-late li::before { counter-increment: lt; content: "0" counter(lt); position: absolute; left: 0; top: 20px; font: 500 14px var(--mono); color: var(--acc); }
.unl-late li b { display: block; font-size: 18px; line-height: 1.3; font-weight: 500; }
.unl-late li p { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--txt2); }

.unl-next { display: grid; gap: 12px; padding-top: 48px; }
.unl-next a { display: flex; flex-direction: column; min-height: 200px; padding: 26px; border-radius: 22px; background: var(--s1); color: var(--txt); transition: box-shadow .2s; }
.unl-next a:hover { color: var(--txt); box-shadow: 0 0 0 2px rgba(var(--accr), .45); }
.unl-next b { display: block; margin-top: 12px; font-size: clamp(23px, 2.6vw, 30px); line-height: 1.15; font-weight: 500; letter-spacing: -.025em; }
.unl-next p { margin-top: 10px; max-width: 48ch; font-size: 16px; line-height: 1.55; color: var(--txt2); }
.unl-next .un-link { margin-top: auto; padding-top: 18px; }

.un-src { display: grid; gap: 20px; margin-top: 64px; padding-block: 32px 72px; border-top: 1px solid var(--line); }
.un-src > div p { margin-top: 12px; max-width: 60ch; font-size: 16px; line-height: 1.55; color: var(--txt2); }
.un-src > div p a { color: var(--acc); }
.un-src-list { display: grid; gap: 8px; align-content: start; font: 400 13px/1.5 var(--mono); color: var(--txt2); }
.un-src-list a { overflow-wrap: anywhere; color: var(--txt2); }
.un-src-list a:hover { color: var(--acc); }
.un-src-list span { color: var(--mut); }

/* ═══════════ A university's page ═══════════ */
.uv-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 20px; }
.uv-crumbs { display: flex; flex-wrap: wrap; gap: 8px; }
/* A college's parent university joins the trail: the list and its item add no boxes of their own. */
.uv-trail { display: contents; }
.uv-crumbs a { color: var(--mut); }
.uv-crumbs a:hover { color: var(--acc); }
.uv-hero { display: grid; gap: 24px; padding: 24px 0 40px; border-bottom: 1px solid var(--line); }
.uv-hero h1 { margin-top: 12px; font-size: clamp(38px, 6.4vw, 80px); line-height: 1; font-weight: 500; letter-spacing: -.04em; text-wrap: balance; }
.uv-sub { max-width: 40ch; margin-top: 16px !important; font-size: clamp(18px, 2vw, 24px); line-height: 1.38; font-weight: 300; color: var(--txt2); text-wrap: pretty; }
.uv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.uv-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 16px; background: var(--s1); font-size: 14px; color: var(--txt2); }
.uv-chip b { font-weight: 500; color: var(--txt); }
.uv-fee { padding: 22px; border-radius: 22px; background: var(--s1); }
.uv-fee .un-pick { margin-top: 12px; font-size: 16px; }
.uv-fee .un-pick summary { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 19px; }
.uv-fee .un-pick summary .un-ic { width: 14px; height: 14px; }
.uv-sum { display: block; margin-top: 16px; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.05; font-weight: 500; letter-spacing: -.04em; white-space: nowrap; }
.uv-fee > p { margin-top: 12px !important; font-size: 15px; line-height: 1.5; color: var(--txt2); }
.uv-fee > p b { font-weight: 500; color: var(--txt); }
.uv-row { display: flex; gap: 8px; margin-top: 18px; }
.uv-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 24px; background: var(--txt); color: var(--bg); font-size: 15px; font-weight: 500; transition: background .2s, color .2s; }
.uv-btn:hover { background: var(--acc); color: #FFFFFF; }
.uv-row .x-fav { flex: none; }

/* The price list: every English bachelor under its faculty's price. A group's name is two lines — the price and
   the faculty — and the first line is set large. */
.uv-price { padding-top: 56px; }
.uv-price-head { display: grid; gap: 14px; }
.uv-price-head > p { max-width: 52ch; font-size: 16px; line-height: 1.55; color: var(--txt2); }
.uv-lownote { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(var(--accr), .1); font-size: 15px; line-height: 1.5; color: var(--txt); }
.uv-price-list { margin-top: 28px; border-top: 2px solid var(--txt); }
.uv-band { --fee: clamp(32px, 4vw, 46px); --pad: 22px; position: relative; display: grid; gap: 10px; padding: var(--pad) 0 24px; border-bottom: 1px solid var(--line); }
.uv-cost { font-size: var(--fee); line-height: 1.15; font-weight: 500; letter-spacing: -.04em; white-space: nowrap; }
.un:has(.un-who input:is([value="eu"], [value="pr"], [value="euf"], [value="blue"]):checked) .uv-cost { color: var(--mut); }
/* A group's name rides on each of its programmes (a group's head holds one value: the price); only the first
   says it — on a phone above the list, from 700px under the price, in the price's column. */
.uv-fac { display: none; }
.uv-progs li:first-child .uv-fac { display: block; padding: 2px 0 8px; font: 500 12px/1.45 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.uv-progs { display: grid; }
.uv-progs li { border-bottom: 1px dashed var(--line); }
.uv-progs li:last-child { border-bottom: 0; }
.uv-progs a, .uv-progs span.uv-p { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; font-size: 17px; line-height: 1.35; color: var(--txt); }
.uv-progs a:hover { color: var(--acc); }
.uv-progs em { flex: none; max-width: 48%; font: 400 12px/1.35 var(--mono); font-style: normal; color: var(--mut); text-align: right; }
.uv-progs em.is-cap { color: var(--acc); }
.uv-price-foot { margin-top: 16px !important; font-size: 14px; line-height: 1.5; color: var(--mut); }
/* A programme's city is said only where the university teaches in more than one: its own city list has a comma. */
.uv-where { display: none; }
.uv-price[data-multi*=","] .uv-where, .uv-price[data-multi*=" и "] .uv-where { display: inline; }

/* With which certificate: four verdicts, each in its own column from 700px. */
.uv-certs { padding-top: 64px; }
.uv-certs-head { display: grid; gap: 14px; }
.uv-certs-head > p { max-width: 52ch; font-size: 16px; line-height: 1.55; color: var(--txt2); }
.uv-cert { display: grid; margin-top: 26px; border-top: 2px solid var(--txt); }
.uv-cert > div { padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.uv-cert h3 { font-size: 15px; font-weight: 500; color: var(--mut); }
.uv-cert strong { display: block; margin-top: 8px; font-size: clamp(22px, 2.4vw, 27px); line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
.uv-cert strong.is-no { color: var(--mut); }
.uv-cert p { margin-top: 8px !important; font-size: 15px; line-height: 1.55; color: var(--txt2); }
.uv-cert p + h3 { margin-top: 16px; }
.uv-cert-foot { margin-top: 14px !important; font-size: 14px; color: var(--mut); }

/* The university's own dates, on a dark band. */
.uv-dates { margin-top: 64px; padding: 40px 0 44px; background: var(--band); color: var(--band-txt); }
.uv-dates .un-kick { color: var(--band-mut); }
.uv-dates h2 { margin-top: 12px; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.08; font-weight: 500; letter-spacing: -.03em; }
.uv-dates ol { margin-top: 26px; border-left: 2px solid var(--band-txt); }
.uv-dates li { position: relative; padding: 0 0 18px 18px; }
.uv-dates li::before { content: ""; position: absolute; left: -7px; top: 7px; width: 12px; height: 12px; border-radius: 6px; background: var(--band); box-shadow: inset 0 0 0 2px var(--band-txt); }
.uv-dates li.is-key-да::before { background: rgb(var(--accr)); box-shadow: none; }
.uv-dates li b { display: block; font-size: 22px; line-height: 1.15; font-weight: 500; letter-spacing: -.02em; }
.uv-dates li p { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--band-soft); }

/* A college inside the university: its own ground — campus, selection, price. */
.uv-college { margin-top: 56px; }
.uv-col { display: grid; gap: 22px; padding: 26px; border-radius: 24px; background: var(--s1); color: var(--txt); transition: box-shadow .2s; }
.uv-col:hover { color: var(--txt); box-shadow: 0 0 0 2px rgba(var(--accr), .45); }
.uv-col h2 { margin-top: 10px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.08; font-weight: 500; letter-spacing: -.03em; }
.uv-col p { margin-top: 12px !important; font-size: 16px; line-height: 1.55; color: var(--txt2); }
.uv-col dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px 16px; align-content: center; font-size: 15px; line-height: 1.45; }
.uv-col dt { color: var(--mut); }
.uv-col dd b { font-weight: 500; }

/* For adults, and what to know: typeset lists. */
.uv-notes { display: grid; gap: 18px; padding-top: 56px; }
.uv-notes ul { display: grid; }
.uv-notes li { padding: 18px 0 20px; border-top: 1px solid var(--line); }
.uv-notes li b { display: block; font-size: 18px; line-height: 1.3; font-weight: 500; }
.uv-notes li p { margin-top: 6px !important; font-size: 16px; line-height: 1.55; color: var(--txt2); }
.uv-notes.is-know { margin-top: 56px; padding-bottom: 48px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Other universities, in the catalogue's card. */
.uv-near { padding-top: 56px; }
.uv-near-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 32px; }
.uv-near-row { display: flex; gap: 10px; margin: 24px -18px 0; padding: 0 18px 4px; overflow-x: auto; scrollbar-width: none; }
.uv-near-row::-webkit-scrollbar { display: none; }
.uv-card { flex: none; display: flex; flex-direction: column; width: 250px; min-height: 210px; padding: 20px; border-radius: 20px; background: var(--s1); color: var(--txt); transition: box-shadow .2s; }
.uv-card:hover { color: var(--txt); box-shadow: 0 0 0 2px rgba(var(--accr), .45); }
.uv-card .un-kick { font-size: 10px; }
.uv-card b { display: block; margin-top: 10px; font-size: 19px; line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.uv-card strong { margin-top: auto; padding-top: 16px; font-size: 20px; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.uv-card em { display: block; margin-top: 4px; font-style: normal; font-size: 14px; color: var(--txt2); }

/* ═══════════ The fee guide ═══════════ */
.uf-hero { display: grid; gap: 18px; padding: 28px 0 0; }
.uf-hero h1 { margin-top: 12px; font-size: clamp(40px, 7vw, 84px); line-height: 1; font-weight: 500; letter-spacing: -.045em; text-wrap: balance; }
.uf-hero h1 span { font-weight: 300; color: var(--mut); }
.uf-lead { max-width: 56ch; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: var(--txt2); }
.uf-doors { display: grid; gap: 12px; margin-top: 32px; }
.uf-door { padding: 26px 22px 18px; border-radius: 24px; }
.uf-door.is-low { background: var(--s1); }
.uf-door.is-high { background: var(--band); color: var(--band-txt); }
.uf-door.is-high .un-kick { color: var(--band-mut); }
.uf-sum { display: block; margin-top: 12px; font-size: clamp(54px, 8vw, 92px); line-height: .95; font-weight: 500; letter-spacing: -.05em; }
.uf-sum small { font-size: .4em; font-weight: 400; letter-spacing: -.02em; opacity: .6; }
.uf-door > p { margin-top: 12px !important; font-size: 16px; line-height: 1.5; opacity: .82; }
.uf-door ul { margin-top: 20px; }
.uf-door li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.35; }
.uf-door.is-high li { border-top-color: rgba(237, 234, 227, .16); }
.uf-door li b { font-weight: 500; }
.uf-door li small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; opacity: .68; }
.uf-door li em { font: 400 12px var(--mono); font-style: normal; opacity: .6; text-align: right; }
.uf-door li.is-mark { margin: 0 -12px; padding: 14px 12px; border-radius: 14px; border-top-color: transparent; background: rgba(var(--accr), .14); }
.uf-door.is-high li.is-mark { background: rgba(var(--accr), .36); }
.uf-door li.is-mark + li { border-top-color: transparent; }
.uf-foot { margin-top: 16px !important; max-width: 80ch; font-size: 15px; line-height: 1.55; color: var(--mut); }
.uf-turns { display: grid; gap: 22px; margin-top: 64px; padding: 48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uf-turns ol { counter-reset: tn; display: grid; }
.uf-turns li { position: relative; padding: 18px 0 20px 40px; border-top: 1px solid var(--line); }
.uf-turns li::before { counter-increment: tn; content: "0" counter(tn); position: absolute; left: 0; top: 20px; font: 500 14px var(--mono); color: var(--acc); }
.uf-turns li b { display: block; font-size: 18px; line-height: 1.3; font-weight: 500; }
.uf-turns li p { margin-top: 6px !important; font-size: 16px; line-height: 1.55; color: var(--txt2); }
.uf-money { padding-top: 56px; }
.uf-money-head { display: grid; gap: 14px; }
.uf-money-head > p { max-width: 56ch; font-size: 16px; line-height: 1.55; color: var(--txt2); }
.uf-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; border-top: 2px solid var(--txt); }
.uf-board > div { padding: 20px 12px 22px 0; border-bottom: 1px solid var(--line); }
.uf-board > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
.uf-board b { display: block; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; font-weight: 500; letter-spacing: -.035em; }
.uf-board b small { font-size: .45em; font-weight: 400; letter-spacing: 0; color: var(--mut); }
.uf-board h3 { margin-top: 10px; font-size: 16px; line-height: 1.3; font-weight: 500; }
.uf-board p { margin-top: 6px !important; font-size: 14px; line-height: 1.5; color: var(--txt2); }
.uf-who-gets { display: grid; gap: 10px; margin-top: 22px; }
.uf-who-gets div { padding: 20px; border-radius: 18px; background: var(--s1); }
.uf-who-gets b { display: block; font-size: 18px; line-height: 1.3; font-weight: 500; }
.uf-who-gets p { margin-top: 6px !important; font-size: 15px; line-height: 1.5; color: var(--txt2); }
.uf-law { margin-top: 64px; padding: 40px 0 44px; background: var(--band); color: var(--band-txt); }
.uf-law .un-kick { color: var(--band-mut); }
.uf-law-in { display: grid; gap: 24px; }
.uf-law blockquote { margin-top: 14px; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.24; font-weight: 400; letter-spacing: -.025em; text-wrap: balance; }
.uf-law li { padding: 14px 0; border-top: 1px solid rgba(237, 234, 227, .16); font-size: 15px; line-height: 1.5; color: var(--band-soft); }
.uf-law li b { display: block; font-weight: 500; color: var(--band-txt); }

/* ═══════════ Wider ═══════════ */
@media (min-width: 700px) {
  .unl-stats { gap: 32px; }
  .unl-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unl-kinds-head { grid-column: 1 / -1; }
  .unl-late ol, .uv-notes ul, .uf-turns ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .unl-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uv-band { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
  .uv-progs li:first-child .uv-fac { position: absolute; left: 0; top: calc(var(--pad) + var(--fee) * 1.15 + 6px); width: 220px; padding: 0; }
  .uv-cert { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .uv-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 36px; }
  .uf-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .uf-door { padding: 32px 30px 22px; }
  .uf-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .uf-board > div { padding-left: 20px; padding-right: 16px; border-left: 1px solid var(--line); }
  .uf-board > div:first-child { padding-left: 0; border-left: 0; }
  .uf-who-gets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .un-src { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
}
@media (min-width: 1000px) {
  .unl-hero { padding-top: 48px; }
  .unl-top { grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: end; }
  .unl-phrase { margin-top: 48px; padding-top: 36px; }
  .unl-answer { grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; padding: 36px 0 56px; }
  .unl-cat { padding-top: 64px; }
  .unl-frow { grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: center; }
  .unl-fchips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .unl-th, .unl-link { display: grid; grid-template-columns: minmax(0, 1.5fr) 110px 64px minmax(0, 1.3fr) 150px 210px; gap: 22px; align-items: baseline; }
  .unl-th { margin-top: 28px; padding: 0 44px 12px 0; border-bottom: 2px solid var(--txt); }
  .unl-th span { font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
  .unl-th span:last-child { text-align: right; }
  .unl-list { margin-top: 0; }
  .unl-row { margin: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: none; }
  .unl-row:hover { box-shadow: none; background: linear-gradient(90deg, transparent, rgba(var(--accr), .05) 15%, rgba(var(--accr), .05) 85%, transparent); }
  .unl-link { padding: 24px 44px 24px 0; }
  .unl-row:hover .unl-name b { color: var(--acc); }
  .unl-name b { font-size: 22px; transition: color .2s; }
  .unl-count, .unl-years, .unl-date { display: block; }
  .unl-count { font-size: 32px; line-height: 1; font-weight: 500; letter-spacing: -.03em; }
  .unl-count small { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--mut); }
  .unl-years { font: 500 16px var(--mono); color: var(--txt2); }
  .unl-date b { display: block; font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
  .unl-date small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--mut); }
  .unl-facts { display: none; }
  .unl-name, .unl-count, .unl-years, .unl-cert, .unl-date, .unl-pay { grid-row: 1; }
  .unl-name { grid-column: 1; } .unl-count { grid-column: 2; } .unl-years { grid-column: 3; }
  .unl-cert { grid-column: 4; font-size: 15px; } .unl-date { grid-column: 5; } .unl-pay { grid-column: 6; }
  .unl-cert b { display: block; font-size: 16px; }
  .unl-pay b { font-size: 24px; }
  .unl-row .x-fav { top: 22px; right: 0; }
  .unl-year { margin-top: 88px; padding: 60px 0 68px; }
  .unl-year-head { grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: end; }
  .unl-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 48px; border-bottom: 2px solid var(--band-txt); }
  .unl-months span { padding: 0 0 12px 8px; border-left: 1px solid rgba(237, 234, 227, .25); font: 500 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--band-mut); }
  .unl-marks { position: relative; height: 320px; margin-top: 0; border-left: 0; }
  .unl-mark { position: absolute; top: 0; left: var(--x); width: min(220px, 16vw); padding: 20px 0 0 14px; border-left: 2px solid var(--band-txt); }
  .unl-mark::before { display: none; }
  .unl-mark.is-key { border-left-color: rgb(var(--accr)); }
  .unl-mark.is-low { top: 150px; }
  .unl-mark b { font-size: 28px; line-height: 1; letter-spacing: -.03em; }
  .unl-mark p { margin-top: 10px; }
  .unl-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 88px; }
  .unl-kind { min-height: 300px; padding: 26px; }
  .unl-late { grid-template-columns: 340px minmax(0, 1fr); gap: 56px; margin-top: 88px; padding: 64px 0; }
  .uv-top { padding-top: 28px; }
  .uv-hero { grid-template-columns: minmax(0, 1fr) 430px; gap: 56px; align-items: end; padding: 36px 0 56px; }
  .uv-fee { padding: 28px; }
  .uv-price { padding-top: 80px; }
  .uv-price-head { grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; align-items: end; }
  .uv-band { --pad: 30px; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; padding: var(--pad) 0 32px; }
  .uv-progs li:first-child .uv-fac { width: 260px; }
  .uv-progs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .uv-progs li:last-child { border-bottom: 1px dashed var(--line); }
  .uv-certs { padding-top: 88px; }
  .uv-certs-head { grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; align-items: end; }
  .uv-cert { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; margin-top: 36px; }
  .uv-cert > div { padding: 26px 26px 10px 0; border-bottom: 0; }
  .uv-cert > div + div { padding-left: 26px; border-left: 1px solid var(--line); }
  .uv-dates { margin-top: 88px; padding: 56px 0 60px; }
  .uv-dates ol { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin-top: 40px; border-left: 0; border-top: 2px solid var(--band-txt); }
  .uv-dates li { padding: 20px 20px 0 0; }
  .uv-dates li + li { padding-left: 18px; border-left: 1px solid rgba(237, 234, 227, .2); }
  .uv-dates li::before { display: none; }
  .uv-dates li.is-key-да { box-shadow: inset 0 2px 0 rgb(var(--accr)); }
  .uv-dates li b { font-size: 26px; }
  .uv-college { margin-top: 88px; }
  .uv-col { grid-template-columns: minmax(0, 1fr) 480px; gap: 56px; padding: 44px; }
  .uv-notes { grid-template-columns: 340px minmax(0, 1fr); gap: 56px; padding-top: 88px; }
  .uv-notes.is-know { margin-top: 80px; padding: 64px 0; }
  .uv-near { padding-top: 80px; }
  .uv-near-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; overflow: visible; }
  .uv-card { width: auto; }
  .uf-hero { grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; align-items: end; padding-top: 40px; }
  .uf-turns { grid-template-columns: 340px minmax(0, 1fr); gap: 56px; margin-top: 88px; padding: 64px 0; }
  .uf-money { padding-top: 80px; }
  .uf-money-head { grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; align-items: end; }
  .uf-law { margin-top: 88px; padding: 56px 0 64px; }
  .uf-law-in { grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; }
  .un-src { margin-top: 88px; padding: 40px 0 96px; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .un *, .un *::before { transition: none !important; }
}