/* The honours band in every footer and /about's awards table (-73, 24 Oct 2026; S21, Olya ~12:25Z: «Давай награды похожие
   как в формете и может на бихансе посмотри и серьёзней надо прям топ сделать»; the coordinator's brief ~12:40Z with the
   measures of Fourmeta's footer badges and awards table). Loaded last on every page; js/honours-band.js runs both. */

/* ---------- the band: full bleed between the footer's invitation and its contacts ---------- */
html body #footer .ft-honours:not(#_h){position:relative;display:grid;margin:clamp(40px,5vw,80px) calc(-1 * var(--gutter,4vw)) clamp(48px,6vw,96px);--hb-ramp:96px}
html body #footer .ft-honours :is(.hb-band,.hb-words):not(#_h){grid-area:1/1;min-width:0}
/* P0 rule 2 (the coordinator ~12:15Z): no world under copy. Where the live world runs, the band is a lane (data-lane=pill:
   the dots clear under its whole box, js/3d/space-lanes.js); wherever the lanes do not run (the airy stills, a Safari
   without them, the moment before they start) it reads on a ground of the page's paper, feathered 24 px above and
   below, printed in 1 bit as every reading ground there is (css/space-ui.css «[data-rg]»), and gone once the lanes run */
html body #footer .ft-honours:not(#_h){isolation:isolate}
html.one-bit:not(.lanes) body #footer .ft-honours:not(#_h)::before{content:'';position:absolute;inset:-24px 0;z-index:-1;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.95) 24px,rgba(255,255,255,.95) calc(100% - 24px),rgba(255,255,255,0));filter:url(#one-bit-alpha-paper)}
html.one-bit[data-theme=dark]:not(.lanes) body #footer .ft-honours:not(#_h)::before{filter:url(#one-bit-alpha-ink)}
html body #footer .hb-words:not(#_h){position:relative;overflow:hidden;pointer-events:none;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--hb-ramp),#000 calc(100% - var(--hb-ramp)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--hb-ramp),#000 calc(100% - var(--hb-ramp)),transparent)}
html body #footer .ft-honours.has-words .hb-band .hb-text:not(#_h){visibility:hidden}
html body #footer .hb-words .hb-honour:not(#_h)::before,html body #footer .hb-words .hb-honour:not(#_h)::after{visibility:hidden}
/* the first sight: the words come in as the sprigs finish growing */
html body #footer .ft-honours.is-run .hb-words:not(#_h){transition:opacity .6s cubic-bezier(.16,1,.3,1) .35s}
html body #footer .ft-honours.is-run.is-pending .hb-words:not(#_h){opacity:0}
html body #footer .hb-band:not(#_h){position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
 -webkit-mask-image:var(--hb-mask,none);mask-image:var(--hb-mask,none);-webkit-mask-size:var(--hb-mask-size,auto);mask-size:var(--hb-mask-size,auto);
 -webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-position:0 0;mask-position:0 0}
html body #footer .hb-band::-webkit-scrollbar{display:none}
html body #footer .hb-track:not(#_h):not(#_i){display:flex;align-items:center;gap:72px;width:max-content;margin:0!important;padding:4px 20%;list-style:none}
html body #footer .ft-honours.is-run .hb-band:not(#_h){overflow:hidden;scroll-snap-type:none}
html body #footer .ft-honours.is-run .hb-track:not(#_h):not(#_i){padding-inline:0;will-change:transform}
/* a lockup: the sprigs (America.gov's footer laurel as downloaded, images/laurels/SOURCE.txt: a US government work, public
   domain; the left one mirrored) stand the height of the three tiers, 16 px from the widest line, in ink */
html body #footer .hb-honour:not(#_h):not(#_i){position:relative;flex:none;display:grid;grid-template-columns:auto auto auto;align-items:center;column-gap:16px;margin:0;padding:0;
 color:var(--ink);scroll-snap-align:center;transition:color .2s linear;list-style:none}
html body #footer .hb-honour:not(#_h)::before,html body #footer .hb-honour:not(#_h)::after{content:'';display:block;width:31.7px;height:86px;background:currentColor;
 -webkit-mask:url(../images/laurels/laurel-right.svg) center/100% 100% no-repeat;mask:url(../images/laurels/laurel-right.svg) center/100% 100% no-repeat}
html body #footer .hb-honour:not(#_h)::before{-webkit-mask-image:url(../images/laurels/laurel-left.svg);mask-image:url(../images/laurels/laurel-left.svg)}
html body #footer .hb-lockup:not(#_h):not(#_i):not(#_j){display:block;margin:0;padding:0;min-height:0;border:0;background:none;color:inherit;text-decoration:none;cursor:pointer}
/* three tiers, as Fourmeta's badges stand: who gave it, what it was for (up to two lines), the honour and its year; one
   face (the text face), the middle tier in ink at 20/24, the outer two at the floor (14/18) in the second tone */
html body #footer .hb-text:not(#_h):not(#_i){display:grid;justify-items:center;row-gap:6px;max-width:232px;text-align:center;font-family:var(--t-text);font-weight:400;font-style:normal}
html body #footer .hb-text>span:not(#_h):not(#_i){display:block;max-width:100%;margin:0;text-wrap:balance}
html body #footer .hb-from:not(#_h):not(#_i),html body #footer .hb-how:not(#_h):not(#_i){font-size:14px;line-height:18px;letter-spacing:0;color:var(--muted)}
html body #footer .hb-what:not(#_h):not(#_i){font-size:20px;line-height:24px;letter-spacing:-.01em;color:inherit}
html body #footer .hb-what:not(#_h):not(#_i):not(#_j){max-width:none;white-space:nowrap}
html body #footer .hb-text .nw:not(#_h){white-space:nowrap}
html body #footer .ft-honours.has-on .hb-honour:not(.is-on):not(#_h):not(#_i){color:var(--muted)}
/* «Pause» / «Play» (WCAG 2.2.2) for the keyboard only (Olya ~11:25Z: «убирай на всех движениях паузу это лишнее») */
html body #footer .hb-pause:not(#_h){position:absolute;right:var(--gutter,4vw);top:100%;display:block;width:max-content;margin:0;padding:8px 0;background:none;border:0;border-radius:0;
 font-family:var(--t-text);font-size:15px;line-height:20px;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em;cursor:pointer}
html body #footer .hb-pause:not(#_h):not(:focus-visible){width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
html body #footer .hb-pause[hidden]:not(#_h){display:none}
html body #footer .hb-pause:not(#_h):focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* what a screen reader reads in the band's place */
html body .hb-sr:not(#_h){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;list-style:none}
/* a phone: one lockup held in the middle clears both 32 px ramps (31.7 + 12 + 232 + 12 + 31.7 px) */
@media (max-width:700px){html body #footer .ft-honours:not(#_h){--hb-ramp:32px;margin-top:32px;margin-bottom:56px}
 html body #footer .hb-track:not(#_h):not(#_i){gap:40px}
 html body #footer .hb-honour:not(#_h):not(#_i){column-gap:12px}
 html body #footer .hb-what:not(#_h):not(#_i){font-size:18px;line-height:22px}}
/* the first sight: each sprig grows from its stem to its tip (600 ms, 60 ms apart, in screen order) */
@keyframes hb-grow-l{from{clip-path:circle(0 at 100% 100%)}to{clip-path:circle(150% at 100% 100%)}}
@keyframes hb-grow-r{from{clip-path:circle(0 at 0 100%)}to{clip-path:circle(150% at 0 100%)}}
html body #footer .ft-honours.is-pending .hb-honour:not(#_h)::before{clip-path:circle(0 at 100% 100%)}
html body #footer .ft-honours.is-pending .hb-honour:not(#_h)::after{clip-path:circle(0 at 0 100%)}
html body #footer .ft-honours.is-in:not(.is-grown) .hb-honour:not(#_h)::before{animation:hb-grow-l .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--hb-k,0) * 120ms)}
html body #footer .ft-honours.is-in:not(.is-grown) .hb-honour:not(#_h)::after{animation:hb-grow-r .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--hb-k,0) * 120ms + 60ms)}

/* ---------- /about's table: Year / Award / From / Project, as Fourmeta's awards table, in «And the rest.»'s rules ---------- */
html body[data-page=about] .aw-table:not(#_h){margin:0;padding:0;font-family:var(--t-text)}
html body[data-page=about] :is(.aw-head,.aw-row):not(#_h){position:relative;display:grid;grid-template-columns:minmax(56px,1fr) minmax(0,5fr) minmax(0,3fr) minmax(0,3fr);column-gap:2vw;align-items:baseline}
html body[data-page=about] .aw-head:not(#_h){padding:0 0 12px;font-size:14px;line-height:18px;color:var(--muted)}
html body[data-page=about] .aw-head>span:last-child:not(#_h),html body[data-page=about] .aw-project:not(#_h){justify-self:stretch;text-align:right}
html body[data-page=about] .aw-row:not(#_h){min-height:62px;padding:19px 0;box-sizing:border-box;color:var(--ink);transition:color .25s linear}
/* the table's ground where the lanes do not run (P0 rule 2): the band's device, feathered on all four sides since the table
   stands in the page's column; nine layers that do not overlap build the feather (a solid middle, four edges, four
   corners), so the 1-bit print thins it to the world's dots with no blur; the sides keep inside the page's gutter */
html body[data-page=about] .aw-table:not(#_h){position:relative;isolation:isolate}
html.one-bit:not(.lanes) body[data-page=about] .aw-table:not(#_h)::before{content:'';position:absolute;z-index:-1;pointer-events:none;
 --fx:min(24px,var(--gutter,22px));--fy:24px;--g:rgba(255,255,255,.95);--z:rgba(255,255,255,0);inset:calc(-1 * var(--fy)) calc(-1 * var(--fx));
 background:linear-gradient(var(--g),var(--g)) var(--fx) var(--fy)/calc(100% - 2 * var(--fx)) calc(100% - 2 * var(--fy)) no-repeat,
  linear-gradient(0deg,var(--g),var(--z)) var(--fx) 0/calc(100% - 2 * var(--fx)) var(--fy) no-repeat,
  linear-gradient(180deg,var(--g),var(--z)) var(--fx) 100%/calc(100% - 2 * var(--fx)) var(--fy) no-repeat,
  linear-gradient(90deg,var(--z),var(--g)) 0 var(--fy)/var(--fx) calc(100% - 2 * var(--fy)) no-repeat,
  linear-gradient(270deg,var(--z),var(--g)) 100% var(--fy)/var(--fx) calc(100% - 2 * var(--fy)) no-repeat,
  radial-gradient(farthest-side at 100% 100%,var(--g),var(--z)) 0 0/var(--fx) var(--fy) no-repeat,
  radial-gradient(farthest-side at 0 100%,var(--g),var(--z)) 100% 0/var(--fx) var(--fy) no-repeat,
  radial-gradient(farthest-side at 100% 0,var(--g),var(--z)) 0 100%/var(--fx) var(--fy) no-repeat,
  radial-gradient(farthest-side at 0 0,var(--g),var(--z)) 100% 100%/var(--fx) var(--fy) no-repeat;
 filter:url(#one-bit-alpha-paper)}
html.one-bit[data-theme=dark]:not(.lanes) body[data-page=about] .aw-table:not(#_h)::before{filter:url(#one-bit-alpha-ink)}
html body[data-page=about] .aw-row:not(#_h)::before,html body[data-page=about] .aw-row:last-child:not(#_h)::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%}
html body[data-page=about] .aw-row:last-child:not(#_h)::after{top:auto;bottom:0}
html body[data-page=about] .aw-award:not(#_h){font-size:20px;line-height:24px;letter-spacing:-.01em;color:inherit}
html body[data-page=about] :is(.aw-year,.aw-from):not(#_h){font-size:14px;line-height:18px;color:var(--muted);font-variant-numeric:tabular-nums}
html body[data-page=about] .aw-row.is-cont .aw-year:not(#_h){color:transparent}
html body[data-page=about] .aw-project:not(#_h){font-size:16px;line-height:20px;color:var(--muted)}
html body[data-page=about] .aw-project>a:not(#_h):not(#_i){color:var(--ink);text-decoration:none;background:none}
html body[data-page=about] .aw-project>a:not(#_h):hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em}
html body[data-page=about] .aw-project>a:not(#_h):focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* a fine pointer: the row under it stays, the others go to the second tone (the rest index's hover) */
@media (hover:hover) and (pointer:fine){html body[data-page=about] .aw-table:has(.aw-row:hover) .aw-row:not(:hover):not(#_h),
 html body[data-page=about] .aw-table:has(.aw-row:hover) .aw-row:not(:hover) .aw-project>a:not(#_h):not(#_i){color:var(--muted)}}
/* the rows a band's lockup sends the reader to, lit for 1.2 s */
html body[data-page=about] .aw-table.hb-lit .aw-row:not(.hb-row):not(#_h),html body[data-page=about] .aw-table.hb-lit .aw-row:not(.hb-row) .aw-project>a:not(#_h):not(#_i){color:var(--muted)}
/* the entrance: each rule draws from the left (.6 s, 40 ms apart), the row's type prints in behind it */
@keyframes aw-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes aw-type{from{visibility:hidden}to{visibility:visible}}
html body[data-page=about] .aw-table.is-out .aw-row:not(#_h)::before,html body[data-page=about] .aw-table.is-out .aw-row:last-child:not(#_h)::after{transform:scaleX(0)}
html body[data-page=about] .aw-table.is-out .aw-row>*:not(#_h){visibility:hidden}
html body[data-page=about] .aw-table.is-in .aw-row:not(#_h)::before,html body[data-page=about] .aw-table.is-in .aw-row:last-child:not(#_h)::after{animation:aw-rule .6s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 40ms) both}
html body[data-page=about] .aw-table.is-in .aw-row>*:not(#_h){animation:aw-type .3s steps(1,end) calc(var(--i,0) * 40ms + 120ms) both}
/* a phone: the award over its giver and year, the project at the right of that line (Fourmeta's table at 390) */
@media (max-width:700px){html body[data-page=about] .aw-head:not(#_h){display:none}
 html body[data-page=about] .aw-row:not(#_h){grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"award award award" "from year project";column-gap:0;row-gap:6px;min-height:0;padding:16px 0}
 html body[data-page=about] .aw-award:not(#_h){grid-area:award;font-size:18px;line-height:22px}
 html body[data-page=about] .aw-from:not(#_h){grid-area:from}
 html body[data-page=about] .aw-year:not(#_h),html body[data-page=about] .aw-row.is-cont .aw-year:not(#_h){grid-area:year;color:var(--muted)}
 html body[data-page=about] .aw-project:not(#_h){grid-area:project;padding-left:16px;font-size:15px;line-height:18px}}
@media (prefers-reduced-motion:reduce){html body[data-page=about] .aw-table .aw-row:not(#_h)::before,html body[data-page=about] .aw-table .aw-row:not(#_h)::after,
 html body[data-page=about] .aw-table .aw-row>*:not(#_h){animation:none!important;transform:none!important;visibility:visible!important}}
/* (-73b, F1; the coordinator 18:40Z) a Behance feature came with the Fourmeta team: «Behance, with the Fourmeta team» in the
   From column, at every width (the coordinator 19:09Z: the fact in its own words, no row shortened on a phone). On a
   phone the giver and its year are one line of type that wraps (.aw-fy, hidden from screen readers; the year's own
   cell kept for them), the project at the right of its first line */
html body[data-page=about] :is(.aw-team,.aw-fy):not(#_h){display:none}
@media (max-width:700px){html body[data-page=about] .aw-row:not(#_h){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"award award" "from project"}
 html body[data-page=about] .aw-fy:not(#_h){display:inline}
 html body[data-page=about] .aw-year:not(#_h),html body[data-page=about] .aw-row.is-cont .aw-year:not(#_h){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* (-73b, F3; the coordinator 18:40Z) reduced motion: the band stands still and shows whole lockups only, never one cut by
   the frame's edge: they wrap into centred rows (three and two at 1440, one a row on a phone), no sideways scroll, no
   ramp; the band's own words stand, the running twin is off */
html body #footer .ft-honours.is-still .hb-band:not(#_h){overflow:visible;scroll-snap-type:none;-webkit-mask-image:none;mask-image:none}
html body #footer .ft-honours.is-still .hb-track:not(#_h):not(#_i){flex-wrap:wrap;justify-content:center;width:auto;row-gap:40px;padding:4px var(--gutter,4vw)}
html body #footer .ft-honours.is-still .hb-words:not(#_h){display:none}
html body #footer .ft-honours.is-still .hb-band .hb-text:not(#_h){visibility:visible}
html body #footer .ft-honours.is-still .hb-honour.is-copy:not(#_h){display:none}