/* ============================================================ MEDIA HOLDING — VISUAL PHYSICS (V4, "The Navy Monolith and the Gold Seal") One stylesheet shared by every surface of this bundle: the Founder page, the Media Holding entity page and 404. Canonical source of the rules implemented here: skynet_production/docs/MEDIA_HOLDING_VISUAL_IDENTITY_FINAL.md §0–§8 (RATIFIED as the binding the identity rules,. The four laws it encodes: Gravity (weight at the base) · Orbit (the ring is the family geometry) · Field (depth behind content, never over it) · Luminosity (gold = the Holding speaks, blue = engineering runs, silver = words that must feel engraved). Serif is deliberately absent: the reference set contains no serif DNA and the canon retires Fraunces at the navy migration (§2). ============================================================ */ :root { /* ---- Foundation (§3) ---- */ --navy: #0A0D12; /* the one universe */ --navy-deep: #0A102A; /* depth layer for fields and gradients */ --panel: #121722; /* cards, data panels */ --hair: #222B39; /* 1px only: structure whispered, not drawn */ /* ---- Three lights (§3) ---- */ --gold: #D4AF37; /* the Holding's light — scarce by law */ --gold-hi: #E6C65B; --blue: #2E6BFF; /* the engineering light — the Founder layer */ --blue-hi: #57A8FF; --silver: #C9CFD6; /* the engraved voice */ /* ---- Two texts (§3) ---- */ --text: #E8ECF2; --muted: #8B97A8; --faint: #5F6B7C; --maxw: 1180px; --measure: 34rem; --gutter: clamp(24px, 5.5vw, 72px); /* §4: a self-contained system grotesque. No CDN font — the surface must be whole with no network. Inter is kept as a LOCAL preference only: it is used when the visitor already has it installed, never fetched. */ --sans: -apple-system, "Segoe UI Variable", "Segoe UI", system-ui, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--navy); color-scheme: dark; } body { margin: 0; /* The navy stays on (the canvas). body is transparent so the substrate layers below can occupy the depth planes between the foundation and the content — §3: (1) foundation, (2) Field, (3) content. */ background: transparent; color: var(--text); font-family: var(--sans); font-weight: 300; font-size: 18px; line-height: 1.7; letter-spacing: 0.004em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* `overflow-x: hidden` keeps a stray box from scrolling the page sideways — which also means anything wider than its column is silently CUT OFF rather than merely ugly. A word that cannot fit its column must break instead of disappear: Malayalam and the Germanic compounds hit this on the built pages. `break-word` breaks only when there is no other way, so it changes nothing anywhere a line already fits. */ overflow-wrap: break-word; } ::selection { background: rgba(46,107,255,0.28); } a { color: inherit; text-decoration: none; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; } /* ---------------- type: two voices, one temperature (§2) ---------------- */ /* Display = engraved grotesque capitals. Weight 300–400, never bold-shouting. */ h1, h2, h3 { margin: 0; font-weight: 300; } .display { font-weight: 300; text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.02; color: var(--silver); margin: 0; } .label { font-size: 0.7rem; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); } .statement { font-weight: 300; font-size: clamp(1.5rem, 3.1vw, 2.35rem); line-height: 1.34; letter-spacing: -0.008em; color: var(--text); max-width: 40rem; margin: 0; } .statement .q { color: var(--muted); } p { margin: 0; color: var(--muted); max-width: var(--measure); } .tabular { font-variant-numeric: tabular-nums; } /* ---------------- rhythm: space is the monument (§5) ---------------- */ .band { padding: clamp(104px, 19vh, 208px) 0; } .band + .band { border-top: 1px solid var(--hair); } .sec-label { display: block; margin-bottom: clamp(40px, 6vh, 72px); } .stack > * + * { margin-top: 1.6rem; } /* ---------------- nav ---------------- */ header.nav { position: sticky; top: 0; z-index: 40; /* §5 glass/scrim, at the canon value: rgba(10,13,18,.72) + blur(6px), controls only. The 14px saturate-fog of V4 read as atmosphere; §2 forbids fog, and a control is the one place a scrim is sanctioned. */ background: rgba(10,13,18,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid transparent; transition: border-color .3s; } header.nav.scrolled { border-bottom-color: var(--hair); } .nav-in { display: flex; align-items: center; justify-content: space-between; height: 76px; } .mark { display: inline-flex; align-items: center; gap: 14px; } .mark .wordmark { font-size: 0.78rem; font-weight: 400; letter-spacing: 0.26em; text-transform: uppercase; color: var(--silver); white-space: nowrap; } /* On narrow screens the ring mark carries the identity alone */ @media (max-width: 560px) { .mark .wordmark { display: none; } } /* PF-ring — the Founder avatar mark. OPTION 1–7 is retired (§1): one geometry for the whole family, no competing personal symbol. */ .pf-ring { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(201,207,214,0.55); display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; letter-spacing: 0.1em; color: var(--silver); font-weight: 400; flex: none; } /* The Seal in a header — used only where the Holding itself speaks, and then never also in that surface's footer (§1 usage law). The wrapper exists for one reason: a supplied raster cannot carry the field itself, so the field rides a sibling layer masked with the mark's own alpha (V5 §5). */ .seal-mark { width: 34px; height: 34px; border-radius: 50%; flex: none; display: block; overflow: hidden; } .seal-mark img { width: 100%; height: 100%; display: block; } .nav-right { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 28px); } .nav-connect { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); transition: color .3s; } .nav-connect:hover { color: var(--text); } @media (max-width: 960px) { .nav-right { gap: 12px; } } /* GlobalLanguageSwitcher — pre-JS trigger styling; the component injects the full menu styles on init (deploy/js/global-language-switcher.js). */ .mh-lang { position: relative; display: inline-flex; align-items: center; } .mhls-trigger { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; padding: 6px 4px; margin: 0; font-family: var(--sans); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); line-height: 1; transition: color .3s; min-height: 32px; } .mhls-trigger:hover { color: var(--text); } .mhls-trigger:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .mhls-globe { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.4; flex: none; } .mhls-caret { width: 8px; height: 8px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: none; opacity: .7; } .mh-lang noscript a { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 4px 3px; } /* The switcher component ships a light palette on `.mhls,.mhls-menu`. These selectors are deliberately more specific so the navy palette wins without !important, and the component file stays untouched and reusable. CORRECTED 2026-08-24 (Founder finding: the menu read too dark, too transparent, its text too dim). Two causes, both in this block and the component's rules, both measured rather than guessed: · the menu painted no material at all and let a ::before feathered to ZERO alpha on all four sides act as its ground. Over the page's own uniform ground that reads as the surface yielding — the correct law for blocks standing IN the page, which is why it was applied. But this panel FLOATS over the hero photograph, and there the same treatment lets the picture through the words. The reference's material scale answers it: a filled raised surface is what carries a functional surface whose readability may not depend on what is behind it, and the reference names the assistant panel as exactly that class. The values below are its §5 raised surface — panel fill, its top light, one hairline, 3px, rim and cast — transcribed, not invented; · `--mhls-muted` was the reference's `--faint`, whose stated job is "labels, metadata, Powered by". Here it carried SIX registers — the title, the group headings, the English gloss, the ISO code, the badge, the disclosure line and the search placeholder — at 3.31:1 on the panel, below the 4.5:1 floor this ecosystem holds. The three ranks below are the reference's own `--text` / `--silver` / `--muted`: 15.12, 11.42 and 6.05 to one on the panel. Rank is carried the way this ecosystem carries it — by scale and tracking as much as by ink. THE ACCENT STAYS BLUE. The reference's register rule (§1) is one page, one accent register: product and holding surfaces are gold, Founder and engineering surfaces are blue. This is the Founder's own surface, so blue is what belongs here; turning it gold would be copying the reference's screen instead of adapting its law. */ #mh-lang.mhls, .mhls-menu.mhls-menu { --mhls-ground: #0A0D12; /* the page's own ground */ --mhls-panel: #121722; /* §5 raised surface — the floating menu's material */ --mhls-panel-top: linear-gradient(180deg, rgba(216,230,248,.04), transparent 62%); --mhls-radius: 3px; /* near-sharp monolith */ --mhls-rim: inset 0 1px 0 rgba(216,230,248,.14); --mhls-cast: 0 14px 38px -26px rgba(0,0,0,.5); --mhls-ink: #E8ECF2; /* primary — the active row 15.12:1 */ --mhls-ink-2: #C9CFD6; /* the rows you read, structural voice 11.42:1 */ --mhls-muted: #8B97A8; /* secondary and chrome 6.05:1 */ --mhls-line: #222B39; --mhls-hair: rgba(232,236,242,0.08); --mhls-accent: #57A8FF; /* the engineering register — this surface's own */ } /* THE PANEL'S TEXT IS FLAT INK ON THE PANEL — not material in the page's light. The bare `p` in the §4 carrier list caught the menu's disclosure line, which is a

, and made it clipped material: its fill went transparent and its colour came from the travelling gradient. One line inside the panel then behaved unlike every other line beside it, and its legibility moved with a light that the opaque panel exists precisely to make irrelevant — a surface you read against its own material, not against what passes behind it. Stated here as a role, not worked around by renaming the element: this is a floating component with its own palette and its own material; the page's registers stop at its edge. §4's law is untouched for every register that IS the page. */ .mhls-menu p, .mhls-menu .mhls-total { background-image: none; -webkit-text-fill-color: currentColor; animation: none; } /* ---------------- the Field (§3: one per surface, behind, static) --------- */ .hero { position: relative; padding: clamp(76px, 13vh, 150px) 0 clamp(84px, 14vh, 176px); overflow: hidden; } .hero .wrap { z-index: 1; } /* On the Founder page the Field is the portrait's own field — the same starfield and light waves, taken from the photograph's background strip and carried across the full width of the band, so the picture does not sit on a background: its background becomes the background. */ .field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%); mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%); } .field-img { position: absolute; inset: -6% -4%; background-image: url('/assets/founder-navy.jpg'); background-repeat: no-repeat; background-size: 420% 128%; background-position: 3% 44%; filter: blur(15px) saturate(1.0); opacity: .9; } .field-img.mirror { transform: scaleX(-1); background-position: 2% 56%; background-size: 460% 120%; opacity: .42; } /* Scrim: weight low and left, engraved capitals keep their contrast. */ .field .scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,13,18,0.94) 0%, rgba(10,13,18,0.80) 32%, rgba(10,13,18,0.25) 58%, rgba(10,13,18,0) 78%), radial-gradient(70% 60% at 8% 88%, rgba(10,13,18,0.85) 0%, rgba(10,13,18,0) 70%); } /* The constellation lattice — the quiet "connected points, one system" field used where there is no photograph. */ .lattice { position: absolute; inset: 0; opacity: .13; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%); mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%); } /* ---------------- hero ---------------- */ .hero-grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(40px, 5vw, 64px); align-items: center; } /* Default hero (Media Holding entity page): the name IS the monument. */ .hero .kick { margin-bottom: 30px; } .hero .name { font-weight: 300; text-transform: uppercase; line-height: 1.02; font-size: clamp(2.05rem, 5.6vw, 4.5rem); letter-spacing: 0.12em; color: var(--gold); margin-bottom: 30px; } .hero .cover { font-size: clamp(1.02rem, 1.7vw, 1.18rem); line-height: 1.62; font-weight: 300; color: var(--text); max-width: 30rem; } .hero .cover .soft { color: var(--muted); } /* Founder hero: the hierarchy is inverted on purpose — the person names himself quietly, the thing he builds carries the surface. */ .hero--founder .who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin-bottom: 30px; } .hero--founder .name { font-size: 0.78rem; letter-spacing: 0.26em; color: var(--silver); margin-bottom: 0; text-transform: uppercase; line-height: 1.4; } .hero--founder .who .sep { color: #4A5566; font-size: 0.7rem; } .hero--founder .kick { margin-bottom: 0; line-height: 1.4; } .hero--founder .holding { font-size: clamp(2.05rem, 5.6vw, 4.5rem); letter-spacing: 0.12em; color: var(--gold); margin-bottom: 24px; } .hero--founder .thesis { font-size: clamp(0.82rem, 1.5vw, 1.12rem); letter-spacing: 0.26em; color: var(--silver); margin-bottom: 32px; line-height: 1.6; /* the Cyrillic and Estonian lines wrap — capitals must breathe */ /* and where they wrap, they wrap between the thoughts. The descriptor is three short sentences; left to fill-and-spill it broke inside one of them and hung a single word on the line above. `balance` evens the lines, so the break lands where the sentence already ends — in whichever language. */ text-wrap: balance; } .hero--founder .cover { max-width: 27rem; } /* Live-product count. The number is never written by hand: the language-page builder counts the products marked Live on this very page and bakes the sentence, and test-i18n fails if the line and the list disagree. */ .hero--founder .livecount { color: var(--silver); margin: 26px 0 0; } /* Portrait — navy silk on navy. No frame: only the outer edge is feathered, the subject is never cut into. */ .portrait { position: relative; } .portrait img { width: 100%; display: block; position: relative; z-index: 1; /* V6: the portrait is now the identity's MARK, centred on the axis, so it dissolves into the navy on every side rather than only along a column edge — §5 photo treatment: no frame, the person exists IN the space. */ -webkit-mask-image: radial-gradient(72% 72% at 50% 44%, #000 52%, transparent 92%); mask-image: radial-gradient(72% 72% at 50% 44%, #000 52%, transparent 92%); } /* Placeholder shown only if the photograph fails to load */ .ph { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px; color: var(--muted); } .ph .mono { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--silver); color: var(--silver); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; } .ph .t { font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--silver); } .ph small { font-size: 0.74rem; max-width: 14rem; line-height: 1.5; } /* ---------------- the formula band ---------------- */ /* Each line is one thought, so each is set as one line — while it fits. `white-space: nowrap` made that unconditional: at 320–390px the longer languages ran past the column and were CUT OFF by the surface's overflow guard — measured on 43 of the built pages (et, fi, hz, sg, su, tl, bg, mk, mn, nn, sr, xh and others). Wrapping is the honest failure mode, and on every width where the line already fitted nothing moves. */ .formula p { max-width: none; text-wrap: balance; } .formula .f1 { font-size: clamp(1.02rem, 3.1vw, 2.5rem); letter-spacing: 0.15em; } .formula .f2 { font-size: clamp(1.02rem, 3.1vw, 2.5rem); letter-spacing: 0.15em; color: #6E7A8B; margin-top: 0.4em; } /* ---------------- the system spine (rings = the family geometry) --------- */ .spine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: clamp(44px, 6vh, 68px); } .node { background: var(--navy); padding: clamp(28px, 4vw, 46px) clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; } .node .ring { width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 0.58rem; letter-spacing: 0.1em; flex: none; } .node .ring .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: block; } .node.n-pf { color: var(--silver); } .node.n-mh { color: var(--gold); background: linear-gradient(180deg, #0C1220 0%, var(--navy) 70%); } .node.n-pr { color: var(--blue-hi); } .node h3 { font-size: 0.72rem; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--silver); } .node p { font-size: 0.95rem; max-width: none; } @media (max-width: 860px) { .spine { grid-template-columns: 1fr; } } /* ---------------- products ---------------- */ .products { border-top: 1px solid var(--hair); max-width: 48rem; } .prod { display: grid; grid-template-columns: 1fr auto; gap: 14px 32px; align-items: baseline; padding: 36px 0; border-bottom: 1px solid var(--hair); } .prod .pn { font-size: 1.16rem; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver); display: inline-flex; align-items: center; gap: 12px; } .prod a.pn:hover { color: var(--blue-hi); } .prod .gi-ring, .prod .mhd-mark { width: 18px; height: 18px; flex: none; } .prod .ps { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .prod .ps.live { color: var(--blue-hi); } .prod .pd { grid-column: 1 / -1; font-size: 1rem; max-width: 34rem; } .prod .pa { grid-column: 1 / -1; margin-top: 2px; } .prod .pline { grid-column: 1 / -1; margin-top: -4px; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); } /* ---------------- principles ---------------- */ .principle { padding: clamp(30px, 4vh, 46px) 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 3.5rem 1fr; gap: clamp(18px, 3vw, 40px); align-items: baseline; } .principle .pnum { font-size: 0.86rem; letter-spacing: 0.18em; color: var(--blue-hi); font-weight: 400; font-variant-numeric: tabular-nums; } .principle .pt { font-size: clamp(1.2rem, 2.5vw, 1.62rem); line-height: 1.3; color: var(--text); font-weight: 300; letter-spacing: -0.004em; } .principle .pp { margin-top: 11px; font-size: 1rem; max-width: 32rem; } /* ---------------- writing flow ---------------- */ .flow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 6px; } .flow .f { font-size: clamp(0.78rem, 1.6vw, 0.92rem); letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver); } .flow .arw { color: var(--blue); font-size: 0.9rem; } /* ---------------- links ---------------- */ .ul { display: inline-flex; align-items: center; gap: 9px; color: var(--blue-hi); font-size: 0.86rem; letter-spacing: 0.06em; border-bottom: 1px solid rgba(46,107,255,0.35); padding-bottom: 3px; transition: gap .3s, border-color .3s; } .ul:hover { gap: 14px; border-color: var(--blue-hi); } .cta-row, .insights-cta { margin-top: 46px; } .prod .pa .ul { font-size: 0.84rem; } a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .legal-note { font-size: 0.95rem; color: var(--muted); max-width: 40rem; } /* ---------------- connect chips (§4: the sanctioned exception) ----------- */ .connect-icons { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); margin-top: clamp(44px, 6vh, 64px); width: 100%; align-items: center; } .c-icon { display: flex; justify-content: center; color: #fff; } .c-icon-btn { width: clamp(46px, 5.2vw, 56px); height: clamp(46px, 5.2vw, 56px); border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.06); transition: transform .3s ease, filter .3s ease; } .c-icon-btn svg { width: clamp(19px, 2.1vw, 22px); height: clamp(19px, 2.1vw, 22px); display: block; } .c-icon-btn svg.stroke-icon { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .c-icon-btn svg.fill-icon { fill: currentColor; } .c-icon:hover .c-icon-btn, .c-icon:focus-visible .c-icon-btn { transform: translateY(-3px); filter: brightness(1.08); } .c-icon:focus-visible { outline: none; } .c-icon:focus-visible .c-icon-btn { outline: 2px solid var(--blue); outline-offset: 3px; } .c-icon--linkedin .c-icon-btn { background: #0a66c2; } .c-icon--facebook .c-icon-btn { background: #1877f2; } .c-icon--gold .c-icon-btn { background: linear-gradient(145deg, #D4AF37 0%, #9C7C22 100%); color: #0A0D12; } .c-icon--telegram .c-icon-btn { background: linear-gradient(145deg, #2aabee 0%, #229ed9 100%); } .c-icon--insights .c-icon-btn { background: var(--panel); color: var(--silver); border-color: var(--hair); } .c-icon--goldfb .c-icon-btn { background: linear-gradient(145deg, #3b7ddd 0%, #166fe5 100%); } .c-icon--email .c-icon-btn { background: var(--panel); color: var(--silver); border-color: var(--hair); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (max-width: 900px) { .connect-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 520px) { .connect-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } } /* ---------------- footer ---------------- */ footer { padding: 64px 0 72px; border-top: 1px solid var(--hair); } .foot { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; } .foot p { margin: 0; font-size: 0.76rem; color: var(--faint); max-width: none; } .foot a:hover { color: var(--text); } /* The Seal — small, precise, once per surface (§1). */ .seal-link { display: inline-flex; align-items: center; gap: 20px; } .seal { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; flex: none; } .seal img { width: 100%; height: 100%; object-fit: cover; display: block; } .seal-text .st1 { display: block; font-size: 0.76rem; color: var(--muted); transition: color .3s; } .seal-link:hover .st1 { color: var(--text); } .seal-text .st2 { display: block; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); opacity: .72; margin-top: 7px; } @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 56px; } .portrait { max-width: 380px; } .foot { flex-direction: column; align-items: flex-start; } } /* ---------------- motion: confirmation, never spectacle (§6) ------------- */ /* CONTENT NEVER WAITS FOR THE LIGHT. The law is Gold's (its physics §4, the perceptual-closure decision of 2026-08-18) and it is inherited whole, because nothing about this surface names a reason to differ: the light REVEALS material, it does not grant permission to read the interface. Until 2026-08-29 this file broke that law — `.reveal` hid its element with no condition at all, and the only thing that could ever raise it again was a script at the very end of the body. A script that is blocked, stripped, throttled, or merely killed by an unrelated throw beside it took reading away PERMANENTLY, and measurement found exactly that: an element inside the first viewport still at opacity 0 twenty seconds after load. Two belts now hold it, and neither is a light — this surface still has exactly one field at exactly one period (I-7), and nothing here animates. · `html.fw-js` — the hidden state belongs to the ENTRANCE, not to the document. It exists only once the head has declared a script alive, so a page with no JavaScript at all is simply readable. · `html.fw-lit` — the failsafe, set by a plain timer in the HEAD, which is the earliest and least killable place on the page. It cannot be cancelled by anything that happens later in the body, which is precisely the failure that was measured. */ .reveal { opacity: 1; transform: none; } .fw-js .reveal { opacity: 0; transform: translateY(9px); transition: opacity .18s ease-out, transform .18s ease-out; } .fw-js .reveal.in, .fw-lit .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal, .fw-js .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ V5 — THE ONE LIGHT (an approved decision, "PAVELFJODOROV.COM VISUAL TRANSFORMATION"; basis: GOLD-VISUAL-REFERENCE = COMPLETED, — the accepted state of Gold Intelligence is the Reference Implementation for visual / UI/UX / product presentation.) WHAT IS INHERITED IS THE LAW, NOT THE SCREEN (Ecosystem Product Charter §3, "Adapt the laws. Do not copy the screens.") Six laws are carried over from the accepted reference; every number below is this surface's own, derived by scripts/derive-light.mjs: 1. ONE FIELD, ONE TIMELINE. The whole visible surface obeys one light. There is no second light source, no glow, no halo, no local pulse. 2. THE MATERIAL ANSWERS BY ITS ROLE. Polished gold, engraved silver, a struck seal, a quiet marker and reading copy are one material scale, not five effects. Role is not exemption: nothing is excluded from the light, and nothing answers louder than its rank. 3. THE FIELD IS PERIODIC. The layer repeats-x with period P and the keyframes translate it by EXACTLY one period per cycle, so the wrap is the identity: there is no cycle boundary to feel. 4. NO CARRIER MAY DEPEND ON `background-attachment: fixed` — a browser renders an animated fixed layer per element, which puts a response seconds away from the field that caused it. Text carriers ride the same travel expressed in ELEMENT coordinates; `--dxc` returns a non-viewport-centred box to true viewport coordinates. 5. `animation` IS ONE PROPERTY. A later rule naming only its own keyframe silently replaces the field. Every carrier that also breathes must COMPOSE, never re-declare. 6. READABILITY NEVER DEPENDS ON THE LIGHT. Every carrier keeps its V4 floor colour as the darkest stop of its own profile, so the light can only ever add. The contrast gate (section H of scripts/test-i18n.mjs, the standing condition of therefore measures exactly what is painted, and V5 cannot quietly weaken it. WHAT THIS SURFACE DECIDED FOR ITSELF (Charter §3 "adaptable"): the tempo and the expressiveness. This is a personal reading surface whose owner is the Founder, so its light is ULTRA-SLOW (the identity rules) and demonstrably calmer than the product surface it inherits from — 1.35 vw/s against the reference's 1.81 vw/s — and the group's Seal, which is a SECONDARY identity here, answers below the Founder's own engraved register (the identity rules). ONE OPEN FOUNDER SURFACE, NAMED, NOT DECIDED HERE: the accepted reference runs its light across the whole surface and permanently. Read literally, MEDIA_HOLDING_VISUAL_PHYSICS.md §2 ("exactly one element per page may carry the perpetual glint") and MEDIA_HOLDING_VISUAL_IDENTITY_FINAL.md §6 ("nothing loops") describe the pre-Gold state of that law. This file implements the ACCEPTED state, because that is what the GO transfers; it does NOT rewrite either canon — the ratification of the wording is a a recorded decision and is raised as one in the task report. ============================================================ */ /* ---- 1 · The field, in element coordinates ----------------------------- Derivation (scripts/derive-light.mjs): band centre C sweeps exactly one period P per cycle. For any element, background-position `calc(50% + L)` over a P-wide tile puts the band centre at viewport x = elementCentre + L (the 50% term contributes .5*(boxW - P), the element width cancels). With elementCentre = 50vw + dxc: L = C - 50vw - dxc. C runs -65vw -> +65vw (one period, P = 130vw), so L runs -115vw -> +15vw. Length offsets INCREASE left to right; a percentage form would flip the sign through its negative (area - image) factor. */ @keyframes pflight { from { background-position: calc(50% - 115vw - var(--dxc, 0px)) 0, 50% 50%; } to { background-position: calc(50% + 15vw - var(--dxc, 0px)) 0, 50% 50%; } } @keyframes pflight1 { /* single-layer carriers (the substrate, the Seal) */ from { background-position: calc(50% - 115vw - var(--dxc, 0px)) 0; } to { background-position: calc(50% + 15vw - var(--dxc, 0px)) 0; } } :root { --pf-tile: 130vw; /* P — see scripts/derive-light.mjs */ --pf-period: 96s; /* ultra-slow: 1.354 vw/s */ /* The material transfers, printed by scripts/derive-light.mjs. Regenerating that script must reproduce this block byte for byte — asserted by the test suite, so a hand-tuned stop cannot survive. */ /* peak 0.100 = 0.1*E^0.66 */ --pf-field: linear-gradient(100deg, transparent 0.00%, rgba(242, 249, 255, 0.001) 33.08%, rgba(242, 249, 255, 0.003) 34.62%, rgba(242, 249, 255, 0.005) 36.15%, rgba(242, 249, 255, 0.010) 37.69%, rgba(242, 249, 255, 0.017) 39.23%, rgba(242, 249, 255, 0.027) 40.77%, rgba(242, 249, 255, 0.040) 42.31%, rgba(242, 249, 255, 0.056) 43.85%, rgba(242, 249, 255, 0.072) 45.38%, rgba(242, 249, 255, 0.086) 46.92%, rgba(242, 249, 255, 0.096) 48.46%, rgba(242, 249, 255, 0.100) 50.00%, rgba(242, 249, 255, 0.096) 51.54%, rgba(242, 249, 255, 0.086) 53.08%, rgba(242, 249, 255, 0.072) 54.62%, rgba(242, 249, 255, 0.056) 56.15%, rgba(242, 249, 255, 0.040) 57.69%, rgba(242, 249, 255, 0.027) 59.23%, rgba(242, 249, 255, 0.017) 60.77%, rgba(242, 249, 255, 0.010) 62.31%, rgba(242, 249, 255, 0.005) 63.85%, rgba(242, 249, 255, 0.003) 65.38%, rgba(242, 249, 255, 0.001) 66.92%, transparent 100.00%); /* peak 0.470 = 0.42*E^1.35 + 0.05*E^0.66 */ --pf-silver: linear-gradient(100deg, transparent 0.00%, rgba(242, 249, 255, 0.002) 34.62%, rgba(242, 249, 255, 0.004) 36.15%, rgba(242, 249, 255, 0.008) 37.69%, rgba(242, 249, 255, 0.019) 39.23%, rgba(242, 249, 255, 0.042) 40.77%, rgba(242, 249, 255, 0.084) 42.31%, rgba(242, 249, 255, 0.154) 43.85%, rgba(242, 249, 255, 0.250) 45.38%, rgba(242, 249, 255, 0.354) 46.92%, rgba(242, 249, 255, 0.438) 48.46%, rgba(242, 249, 255, 0.470) 50.00%, rgba(242, 249, 255, 0.438) 51.54%, rgba(242, 249, 255, 0.354) 53.08%, rgba(242, 249, 255, 0.250) 54.62%, rgba(242, 249, 255, 0.154) 56.15%, rgba(242, 249, 255, 0.084) 57.69%, rgba(242, 249, 255, 0.042) 59.23%, rgba(242, 249, 255, 0.019) 60.77%, rgba(242, 249, 255, 0.008) 62.31%, rgba(242, 249, 255, 0.004) 63.85%, rgba(242, 249, 255, 0.002) 65.38%, transparent 100.00%); /* peak 0.720 = 0.62*E^1.55 + 0.1*E^0.66 */ --pf-gold: linear-gradient(100deg, transparent 0.00%, rgba(242, 249, 255, 0.001) 33.08%, rgba(242, 249, 255, 0.003) 34.62%, rgba(242, 249, 255, 0.006) 36.15%, rgba(242, 249, 255, 0.012) 37.69%, rgba(242, 249, 255, 0.026) 39.23%, rgba(242, 249, 255, 0.055) 40.77%, rgba(242, 249, 255, 0.112) 42.31%, rgba(242, 249, 255, 0.212) 43.85%, rgba(242, 249, 255, 0.358) 45.38%, rgba(242, 249, 255, 0.526) 46.92%, rgba(242, 249, 255, 0.665) 48.46%, rgba(242, 249, 255, 0.720) 50.00%, rgba(242, 249, 255, 0.665) 51.54%, rgba(242, 249, 255, 0.526) 53.08%, rgba(242, 249, 255, 0.358) 54.62%, rgba(242, 249, 255, 0.212) 56.15%, rgba(242, 249, 255, 0.112) 57.69%, rgba(242, 249, 255, 0.055) 59.23%, rgba(242, 249, 255, 0.026) 60.77%, rgba(242, 249, 255, 0.012) 62.31%, rgba(242, 249, 255, 0.006) 63.85%, rgba(242, 249, 255, 0.003) 65.38%, rgba(242, 249, 255, 0.001) 66.92%, transparent 100.00%); /* peak 0.350 = 0.3*E^1.5 + 0.05*E^0.66 */ --pf-seal: linear-gradient(100deg, transparent 0.00%, rgba(242, 249, 255, 0.001) 34.62%, rgba(242, 249, 255, 0.003) 36.15%, rgba(242, 249, 255, 0.006) 37.69%, rgba(242, 249, 255, 0.013) 39.23%, rgba(242, 249, 255, 0.028) 40.77%, rgba(242, 249, 255, 0.057) 42.31%, rgba(242, 249, 255, 0.107) 43.85%, rgba(242, 249, 255, 0.178) 45.38%, rgba(242, 249, 255, 0.258) 46.92%, rgba(242, 249, 255, 0.324) 48.46%, rgba(242, 249, 255, 0.350) 50.00%, rgba(242, 249, 255, 0.324) 51.54%, rgba(242, 249, 255, 0.258) 53.08%, rgba(242, 249, 255, 0.178) 54.62%, rgba(242, 249, 255, 0.107) 56.15%, rgba(242, 249, 255, 0.057) 57.69%, rgba(242, 249, 255, 0.028) 59.23%, rgba(242, 249, 255, 0.013) 60.77%, rgba(242, 249, 255, 0.006) 62.31%, rgba(242, 249, 255, 0.003) 63.85%, rgba(242, 249, 255, 0.001) 65.38%, transparent 100.00%); /* peak 0.340 = 0.3*E^1.5 + 0.04*E^0.66 */ --pf-mark: linear-gradient(100deg, transparent 0.00%, rgba(242, 249, 255, 0.001) 34.62%, rgba(242, 249, 255, 0.002) 36.15%, rgba(242, 249, 255, 0.005) 37.69%, rgba(242, 249, 255, 0.012) 39.23%, rgba(242, 249, 255, 0.026) 40.77%, rgba(242, 249, 255, 0.053) 42.31%, rgba(242, 249, 255, 0.101) 43.85%, rgba(242, 249, 255, 0.170) 45.38%, rgba(242, 249, 255, 0.250) 46.92%, rgba(242, 249, 255, 0.315) 48.46%, rgba(242, 249, 255, 0.340) 50.00%, rgba(242, 249, 255, 0.315) 51.54%, rgba(242, 249, 255, 0.250) 53.08%, rgba(242, 249, 255, 0.170) 54.62%, rgba(242, 249, 255, 0.101) 56.15%, rgba(242, 249, 255, 0.053) 57.69%, rgba(242, 249, 255, 0.026) 59.23%, rgba(242, 249, 255, 0.012) 60.77%, rgba(242, 249, 255, 0.005) 62.31%, rgba(242, 249, 255, 0.002) 63.85%, rgba(242, 249, 255, 0.001) 65.38%, transparent 100.00%); /* peak 0.270 = 0.24*E^1.6 + 0.03*E^0.66 */ --pf-quiet: linear-gradient(100deg, transparent 0.00%, rgba(212, 228, 250, 0.002) 36.15%, rgba(212, 228, 250, 0.004) 37.69%, rgba(212, 228, 250, 0.008) 39.23%, rgba(212, 228, 250, 0.018) 40.77%, rgba(212, 228, 250, 0.038) 42.31%, rgba(212, 228, 250, 0.075) 43.85%, rgba(212, 228, 250, 0.129) 45.38%, rgba(212, 228, 250, 0.194) 46.92%, rgba(212, 228, 250, 0.249) 48.46%, rgba(212, 228, 250, 0.270) 50.00%, rgba(212, 228, 250, 0.249) 51.54%, rgba(212, 228, 250, 0.194) 53.08%, rgba(212, 228, 250, 0.129) 54.62%, rgba(212, 228, 250, 0.075) 56.15%, rgba(212, 228, 250, 0.038) 57.69%, rgba(212, 228, 250, 0.018) 59.23%, rgba(212, 228, 250, 0.008) 60.77%, rgba(212, 228, 250, 0.004) 62.31%, rgba(212, 228, 250, 0.002) 63.85%, transparent 100.00%); /* peak 0.230 = 0.2*E^1.75 + 0.03*E^0.66 */ --pf-read: linear-gradient(100deg, transparent 0.00%, rgba(212, 228, 250, 0.002) 36.15%, rgba(212, 228, 250, 0.003) 37.69%, rgba(212, 228, 250, 0.007) 39.23%, rgba(212, 228, 250, 0.014) 40.77%, rgba(212, 228, 250, 0.030) 42.31%, rgba(212, 228, 250, 0.059) 43.85%, rgba(212, 228, 250, 0.105) 45.38%, rgba(212, 228, 250, 0.161) 46.92%, rgba(212, 228, 250, 0.210) 48.46%, rgba(212, 228, 250, 0.230) 50.00%, rgba(212, 228, 250, 0.210) 51.54%, rgba(212, 228, 250, 0.161) 53.08%, rgba(212, 228, 250, 0.105) 54.62%, rgba(212, 228, 250, 0.059) 56.15%, rgba(212, 228, 250, 0.030) 57.69%, rgba(212, 228, 250, 0.014) 59.23%, rgba(212, 228, 250, 0.007) 60.77%, rgba(212, 228, 250, 0.003) 62.31%, rgba(212, 228, 250, 0.002) 63.85%, transparent 100.00%); /* ---- 2 · Static vertical metal profiles (§4) ---- Two layers make engraved type: a static vertical metal profile plus one moving cold glint. Letters never move; only light passes. THE DARKEST STOP OF EACH PROFILE IS THE V4 COLOUR IT REPLACES, so no glyph's floor is ever darkened and the contrast gate keeps its meaning. */ --profile-silver: linear-gradient(180deg, #E7EBF0 0%, #DEE3EA 26%, #D4DAE1 58%, #C9CFD6 100%); --profile-gold: linear-gradient(180deg, #F0D98A 0%, #E6C65B 24%, #DCBB4A 56%, #D4AF37 100%); /* Default profile: the element's OWN colour, so a carrier never has to be told what it is made of and a nested tone (.statement .q, .cover .soft) keeps its own voice. */ --pf-profile: linear-gradient(currentColor, currentColor); } /* ---- 3 · The substrate (§5) -------------------------------------------- Four ordered planes, GPU-only, ~1.5KB, no image: depth radials -> the 56px engineering grid, radially faded -> the sky glow -> the one moving band. The grid cell does not scale (§2, "material does not scale"). Static: only the band moves, and it is the one light of law 1. */ body::before, body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; } body::before { background-image: radial-gradient(1200px 560px at 50% -14%, rgba(206,222,242,0.075), transparent 70%), linear-gradient(to right, rgba(210,224,242,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(210,224,242,0.05) 1px, transparent 1px), radial-gradient(900px 700px at 12% 8%, #0A102A, transparent 68%), radial-gradient(900px 700px at 88% 92%, #10182E, transparent 68%); background-size: 100% 100%, 56px 56px, 56px 56px, 100% 100%, 100% 100%; -webkit-mask-image: radial-gradient(75% 62% at 50% 34%, #000 42%, transparent 100%); mask-image: radial-gradient(75% 62% at 50% 34%, #000 42%, transparent 100%); } body::after { background-image: var(--pf-field); background-size: var(--pf-tile) 100%; background-repeat: repeat-x; background-position: calc(50% - 115vw) 0; animation: pflight1 var(--pf-period) linear infinite; } /* ---- 4 · The material scale -------------------------------------------- Every rule below is one line of the same statement: THIS material, at THIS rank, answering THAT one field. The @supports guard is the failsafe: where the browser cannot clip a background to text, the surface simply keeps its V4 colours and stays complete. CONTENT NEVER WAITS. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .pf-lit, .display, .mark .wordmark, .ph .t, .hero--founder .name, .prod .pn, .node h3, .flow .f, .principle .pt, .n, .label, .sec-label, .prod .ps, .prod .pline, .principle .pnum, .seal-text .st1, p, .statement, .statement .q, .cover, .cover .soft, .pd, .pp, .node p, .legal-note, .foot p, .hero--founder .livecount, /* the group surface's own registers (mediaholding.tech). This file is ONE implementation delivered to every surface of the ecosystem, and the law it carries — every text register is material in the one light, no exceptions (the accepted-state law) — reached the group's headings last: they stood flat while reading copy answered. Selectors inert on surfaces that do not use them cost nothing; a law that covers only some registers is not the law. */ .route-title, .news-head h1, .news-item-title, .article-title, .article-body h2, .article-body h3, .mark .wordmark-desc { background-image: var(--pf-glint, var(--pf-read)), var(--pf-profile); background-size: var(--pf-tile) 100%, 100% 100%; background-repeat: repeat-x, no-repeat; background-position: calc(50% - 115vw - var(--dxc, 0px)) 0, 50% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: pflight var(--pf-period) linear infinite; } /* rank 1 — the one place the Holding itself speaks on this surface. The hierarchy inversion of is preserved exactly: the person names himself quietly, MEDIA HOLDING carries the surface. */ .hero--founder .holding, .hero:not(.hero--founder) .name { --pf-glint: var(--pf-gold); --pf-profile: var(--profile-gold); } /* rank 2 — the Founder surface's own engraved voice */ .display, .mark .wordmark, .ph .t, .hero--founder .name { --pf-glint: var(--pf-silver); --pf-profile: var(--profile-silver); } .formula .f2 { --pf-profile: linear-gradient(#7C8899, #6E7A8B); } /* rank 3 — structural silver: what is shipped, what the system is made of. The group surface's headings belong here: route and article titles are the same structural voice its product rows speak with. */ .prod .pn, .node h3, .flow .f, .principle .pt, .n, .route-title, .news-head h1, .news-item-title, .article-title, .article-body h2, .article-body h3 { --pf-glint: var(--pf-mark); } /* rank 4 — the quiet marker voice */ .label, .sec-label, .prod .ps, .prod .pline, .principle .pnum, .seal-text .st1, .foot p, .hero--founder .livecount, .mark .wordmark-desc { --pf-glint: var(--pf-quiet); } /* rank 5 — reading copy. Letters are material in the same scene: each one answers as the field reaches its own x, over its OWN floor colour. */ p, .statement, .statement .q, .cover, .cover .soft, .pd, .pp, .node p, .legal-note { --pf-glint: var(--pf-read); } /* A link is a control, not reading matter: it keeps its blue engineering voice and its underline, and does not become clipped material. */ .ul, .ul *, .nav-connect, .mhls-trigger, .c-icon, .c-icon * { background-image: none; -webkit-text-fill-color: currentColor; animation: none; } /* A product name IS material; hovering it is an interaction, and an interaction answers in the blue engineering voice, not in metal. */ a.pn:hover { background-image: none; -webkit-text-fill-color: currentColor; } } /* ---- 5 · The Seal — a supplied raster, lit as the physical object it is -- the identity rules: "MATERIAL RESPONSE IS THE SCENE'S, NEVER THE OBJECT'S OWN. Where a supplied raster cannot be clipped the way letters are, the same passing field may be carried by a layer masked with the asset's own alpha." The mark itself is untouched: the mask is a mechanically derived alpha cut of it (scripts/derive-seal-mask.py — background removal only, never a redraw), so the light reaches the metal that already exists and nothing else. Quiet register: on the Founder's own surface the group's identity is secondary and never gains priority. */ .seal, .seal-mark { position: relative; } .seal::after, .seal-mark::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--pf-seal); background-size: var(--pf-tile) 100%; background-repeat: repeat-x; background-position: calc(50% - 115vw - var(--dxc, 0px)) 0; -webkit-mask-image: url('/assets/mh-seal-alpha.png'); mask-image: url('/assets/mh-seal-alpha.png'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; animation: pflight1 var(--pf-period) linear infinite; } .seal::after { border-radius: 50%; } /* ---- 6 · Reduced motion (§2) ------------------------------------------- EVERY carrier is listed. A carrier absent from this rule is precisely the one that would keep moving where movement is switched off — so the test suite counts the running animations after the preference is set, and the count must be zero. The field is parked where it reads as a designed highlight, not mid-pass: the static material must read complete. */ @media (prefers-reduced-motion: reduce) { body::after, .pf-lit, .display, .mark .wordmark, .ph .t, .hero--founder .name, .prod .pn, .node h3, .flow .f, .principle .pt, .n, .label, .sec-label, .prod .ps, .prod .pline, .principle .pnum, .seal-text .st1, p, .statement, .statement .q, .cover, .cover .soft, .pd, .pp, .node p, .legal-note, .foot p, .hero--founder .livecount, .seal::after, .seal-mark::after { animation: none !important; background-position: calc(50% - 15vw - var(--dxc, 0px)) 0, 50% 50%; } body::after, .seal::after, .seal-mark::after { background-position: calc(50% - 15vw - var(--dxc, 0px)) 0; } } /* ============================================================ V6 — THE PRESENTATION LAWS (Founder review 2026-08-21: V5 NOT ACCEPTED) WHAT V5 GOT WRONG, NAMED AT ITS CAUSE ------------------------------------- `GOLD-VISUAL-REFERENCE = COMPLETED` was declared for **visual / UI/UX / product presentation**. V5 transferred the physics of light and stopped there, because it classified composition, typographic hierarchy, spatial rhythm and identity presentation as "content and identity, to be preserved". That was a narrowing, not an instruction: CONTENT is the copy, the purpose and who the surface is about — COMPOSITION is the visual layer the GO asked to transform. The two were conflated, so the surface kept the editorial poster grammar of V3 under a new light and read as unchanged. The gap, measured on both live surfaces at 1440 before this file was written — not recalled: accepted reference this surface (V5) root font 17px 16px largest element 29.8px 72px (2.4x) reading register 20.7px 37.6px (1.8x) display weight 600 300 centred elements 4 0 (the identity has no axis at all) So the laws below are the ones that were missing. None of them is Gold's screen: they are the laws that screen obeys, applied to a surface whose subject is a person and whose recorded hierarchy is the Founder's own. WHAT IS DELIBERATELY UNCHANGED ------------------------------ Every line of copy · the purpose · the products · the journey · the photographic Field and its static condition · and the hierarchy inversion of — the person names himself quietly and MEDIA HOLDING carries the surface in gold. V6 changes how that hierarchy is COMPOSED, never what it ranks. ============================================================ */ /* ---- 1 · THE READING FLOOR (the accepted reference's own) --------------- */ html { font-size: 16px; } @media (min-width: 1280px) { html { font-size: 17px; } } @media (min-width: 1680px) { html { font-size: 18px; } } :root { --maxw: 1140px; /* the reference's measure */ --band: clamp(76px, 9.5vw, 140px); /* air, not a rule, separates bands */ --idlever: clamp(150px, 17vw, 248px); /* THE identity's single size lever */ } /* RESPONSIVE PHYSICS (Visual Physics §11): a narrow viewport takes its rhythm from the READING FLOW, which is width-relative, not from the viewport height. Same law, different spatial conditions — not a second design. */ @media (max-width: 720px) { :root { --band: clamp(44px, 12vw, 60px); } } /* ---- 2 · THE COMPACT SCALE -------------------------------------------- Nothing on this surface shouts. The ceiling is the identity's own line, and it sits at the top of the family register rather than above it. */ body { font-size: 1rem; line-height: 1.75; } .display { font-weight: 400; letter-spacing: 0.2em; line-height: 1.18; } .hero--founder .holding { font-size: clamp(1.5rem, 3.2vw, 2rem); /* 34px at 1440 — the loudest thing here */ letter-spacing: 0.22em; line-height: 1.24; margin: 0; } .hero--founder .thesis { font-size: 0.78rem; letter-spacing: 0.24em; line-height: 1.5; color: var(--muted); margin: 0; } .hero .name { font-size: clamp(1.35rem, 2.6vw, 1.7rem); letter-spacing: 0.18em; } /* The reading register of the accepted reference: ~20.7px at ~1.9 leading. A statement is read, not looked at. */ .statement { font-size: 1.22rem; line-height: 1.9; letter-spacing: 0; font-weight: 300; max-width: 33rem; } .principle .pt { font-size: 1.06rem; line-height: 1.55; letter-spacing: 0.01em; } .principle .pp, .prod .pd, p, .cover, .legal-note { font-size: 1rem; line-height: 1.8; } .cover { font-size: 1.06rem; line-height: 1.85; max-width: 33rem; } .formula .f1, .formula .f2 { font-size: clamp(0.95rem, 2vw, 1.18rem); letter-spacing: 0.2em; } .prod .pn { font-size: 1rem; letter-spacing: 0.12em; } .node h3 { font-size: 0.7rem; letter-spacing: 0.24em; } .label, .sec-label { font-size: 0.72rem; letter-spacing: 0.22em; } /* ---- 3 · ARRIVAL IS THE IDENTITY -------------------------------------- The surface opens with its identity, alone, centred on the axis of its own mark, with air above and below in one ratio. Every internal proportion is an `em` of `--idlever`: one lever, one object, placed — never re-assembled. AIR IS THE RATIO, not a fixed band: the reference measures ~109 above the mark against ~111 below the lockup, and the gate below asserts the balance rather than the pixel. */ .hero { padding: 0; overflow: hidden; position: relative; } .hero .wrap { z-index: 1; } .identity { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding-top: clamp(74px, 12.4vh, 132px); } .identity > * + * { margin-top: 0.44em; } .identity .portrait { width: var(--idlever); max-width: 100%; margin: 0 0 0.30em; } .identity .portrait img { width: 100%; height: auto; } /* rule — centre point — rule: the family's separating geometry (Visual Identity the project rules,. Drawn from the lever, never copied from another lockup's pixels. */ .idrule { display: flex; align-items: center; justify-content: center; gap: 0.9em; width: calc(var(--idlever) * 0.92); margin-top: 1.05em !important; } .idrule i { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--hair) 22%, var(--hair) 78%, transparent); } .idrule b { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: .78; flex: none; } /* the attribution layer — the person names himself quietly. ONE LINE PER THING SAID. This layer was a wrapping flex ROW — name · separator · attribution — and the attribution inherited the PROSE reading measure (`p { max-width: var(--measure) }`) that paragraphs use. A label is not a paragraph: the cap held the attribution's box narrower than its own line, so the text wrapped INSIDE a centred box while the name stayed beside it — a gap after the name, and an orphaned last word underneath. Measured on the built pages at 1920: the whole attribution fits one line in 0 of 184 languages, and the attribution ALONE fits one line in 184 of 184 once the prose cap is lifted. So the layer stacks — who he is, then what he is to the thing named above it — and the geometry no longer depends on how long a language happens to be. The separator's only function was to join the two on a line that does not occur in any language, so it does not draw: the point-rule directly above is the family's separating geometry. */ .identity .who { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 0.34em; width: 100%; margin-top: 1em !important; } .identity .who .name { font-size: 0.78rem; letter-spacing: 0.26em; color: var(--silver); margin: 0; line-height: 1.5; } .identity .who .sep { display: none; } .identity .who .kick { margin: 0; max-width: 100%; line-height: 1.5; text-wrap: balance; } /* the identity has finished speaking; only then does the surface speak */ .lede { margin-top: clamp(50px, 8.9vh, 104px); padding-bottom: var(--band); } .lede .livecount { margin-top: 1.6rem; display: block; } /* the entity surface: the group is primary on its own ground */ .seal--hero { display: block; width: var(--idlever); height: var(--idlever); border-radius: 50%; overflow: hidden; position: relative; } .seal--hero img { width: 100%; height: 100%; display: block; } .hero .identity .name:not(.sr-only) { color: var(--gold); } /* ---- 4 · AIR SEPARATES BANDS, NOT RULES -------------------------------- A hairline between every band draws the structure; the system whispers it. The reference separates by silence, and the negative-space law asks for at least one large empty region per surface. */ .band { padding: var(--band) 0; } .band + .band { border-top: 0; } .sec-label { display: block; margin-bottom: clamp(26px, 3.4vh, 44px); } .products { border-top: 0; max-width: 44rem; } .prod { padding: 26px 0; border-bottom: 1px solid var(--hair); } .prod:last-child { border-bottom: 0; } .principle { border-top: 0; padding: clamp(20px, 2.6vh, 30px) 0; grid-template-columns: 2.6rem 1fr; } .principle + .principle { border-top: 1px solid var(--hair); } /* the three nodes read as one system, held by air and one hairline frame */ .spine { gap: 1px; margin-top: clamp(34px, 4.4vh, 52px); } .node { padding: clamp(22px, 3vw, 34px) clamp(18px, 2.4vw, 28px); gap: 14px; } .node .ring { width: 34px; height: 34px; font-size: 0.52rem; } /* ---- 5 · CHROME CARRIES NO IDENTITY AND NO RANK ------------------------ No glass, no sticky plate, no wordmark: the mark appears once per surface and it is one screen below. What is left is wayfinding. */ header.nav { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; } header.nav.scrolled { border-bottom-color: transparent; } /* padding-top only: `.nav-in` sits on `.wrap`, and a shorthand here resets the gutter the wrap owns — which put the Russian «СВЯЗАТЬСЯ» hard against the right edge at 390px. */ .nav-in { height: auto; padding-top: 26px; justify-content: flex-end; } .nav-right { gap: clamp(16px, 2.6vw, 30px); } .nav-connect, .mhls-trigger { font-size: 0.7rem; letter-spacing: 0.22em; } /* ---- 6 · the footer closes quietly ------------------------------------- */ footer { padding: var(--band) 0 clamp(48px, 6vh, 72px); } /* scoped to the footer on purpose: an unscoped `.seal` rule sits later in this file than the hero lockup and silently shrank the group's identity to 54px — under the measured floor at which the wordmark drawn INSIDE the asset stops being readable (the identity rules: legibility is a constraint on PLACEMENT, never a licence to re-compose). */ footer .seal { width: 54px; height: 54px; } .seal-link { gap: 16px; } @media (max-width: 720px) { /* the ratio is the law, so it holds at every width — not only where a gate happened to look */ .identity { padding-top: clamp(58px, 10.2vh, 98px); } .lede { margin-top: clamp(30px, 5.4vh, 60px); } .statement { font-size: 1.12rem; line-height: 1.78; } } /* ---- 7 · THE FIELD FOLLOWS THE COMPOSITION ----------------------------- The photographic Field is unchanged in kind — it is still the portrait's own light, still behind content, still STATIC (the standing condition 2 of. What changed is that the composition it sits behind is no longer weighted left, so a scrim built to hold weight "low and left" now leaves the bright half of the photograph opposite a centred identity. The scrim is re-centred on the same axis as the identity, and the Field is quieter, because behind a centred mark the picture is the ground, not the subject. Contrast is not asserted: section H re-measures it. */ .hero--founder .field-img { opacity: .58; } .hero--founder .field-img.mirror { opacity: .26; } .hero--founder .field .scrim { background: radial-gradient(56% 58% at 50% 30%, rgba(10,13,18,0.88) 0%, rgba(10,13,18,0.62) 44%, rgba(10,13,18,0.12) 78%, rgba(10,13,18,0) 100%), linear-gradient(to bottom, rgba(10,13,18,0.62) 0%, rgba(10,13,18,0.18) 34%, rgba(10,13,18,0.55) 78%, rgba(10,13,18,0.9) 100%); } /* the mark dissolves into the navy on every side — no plate edge may show */ .identity .portrait img { -webkit-mask-image: radial-gradient(58% 60% at 50% 42%, #000 30%, transparent 76%); mask-image: radial-gradient(58% 60% at 50% 42%, #000 30%, transparent 76%); } /* ---- 8 · THE FIELD YIELDS WHERE TEXT STANDS --------------------------- Section H caught this, which is what it is for: with the glass plate gone from the chrome, the languages and the way to reach him now stand ON the Field instead of on a scrim, and on a narrow viewport the lede stands where the photograph is brightest. The answer is the one §3 prescribes — the Field is dimmed where text stands — never a weaker threshold. The exception of lives or dies by the measurement, and the measurement is the gate, not this comment. */ .hero--founder .field .scrim::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,13,18,0.94) 0px, rgba(10,13,18,0.72) 74px, rgba(10,13,18,0) 190px), linear-gradient(to top, rgba(10,13,18,0.88) 0px, rgba(10,13,18,0) 220px); } @media (max-width: 720px) { .hero--founder .field-img { opacity: .40; } .hero--founder .field-img.mirror { opacity: .16; } .hero--founder .field .scrim { background: radial-gradient(64% 46% at 50% 26%, rgba(10,13,18,0.90) 0%, rgba(10,13,18,0.74) 48%, rgba(10,13,18,0.5) 82%, rgba(10,13,18,0.42) 100%), linear-gradient(to bottom, rgba(10,13,18,0.80) 0%, rgba(10,13,18,0.55) 30%, rgba(10,13,18,0.8) 76%, rgba(10,13,18,0.94) 100%); } } /* ============================================================ V6.1 — THREE FOUNDER FINDINGS, POINTWISE (an approved decision "PAVELFJODOROV.COM TARGETED VISUAL CORRECTION", 2026-08-21.) The scope is hard: the portrait, the waves behind it, and one removed line. Composition, typography, identity presentation, the other sections, the grid and the existing Visual Physics are NOT touched. ============================================================ */ /* ---- 1 · THE PORTRAIT BELONGS TO THE SURFACE -------------------------- Finding: remove the perceived circular / localized background around the photograph; it must not read as a separate picture, a circle, a card or a medallion; and the image itself about 1.5x larger. The disc WAS the mask: a radial that reaches full transparency INSIDE the box turns the photograph's own lit background into a circle. The mask now never closes inside the box — a wide radial intersected with edge feathers, so there is no round edge, and no straight one either. Visual Physics §5: "no frames, no drop-shadow cards — the person exists IN the space". */ :root { --idlever: clamp(225px, 25.5vw, 372px); } /* x1.5 of 150 / 17vw / 248 */ .identity .portrait img { -webkit-mask-image: radial-gradient(88% 88% at 50% 44%, #000 62%, transparent 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 84%, transparent 100%); mask-image: radial-gradient(88% 88% at 50% 44%, #000 62%, transparent 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } /* ---- 2 · THE WAVES AND THE PORTRAIT ANSWER THE ONE LIGHT -------------- Finding: the blue waves behind the portrait must belong to the page surface and obey the same passing light field; when the beam crosses that area the waves take light local glints, the photograph takes a light natural response, and the eyes gain a slightly stronger but still natural sparkle — one light process of the existing surface, not a separate animation of the portrait or the waves, and not a new decorative effect. So this is NOT a new effect and NOT a second animation: it is the SAME band (`pflight1`, the same 96s timeline, the same tile) reaching two more materials. Two things keep the response natural rather than decorative: · the register is the surface's QUIETEST — the reading register for the photograph, the marker register for the waves. No new register was derived, so the physics is left exactly as it was; · the blend is `overlay`, so the response is PROPORTIONAL to what is already lit. Deep navy barely moves; the blue waves lift; the catchlights in the eyes, being the brightest pixels of the face, lift most. That is why the eyes gain sparkle without anything being drawn on them — no glow, no halo, nothing added to the scene. */ .hero--founder .field::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--pf-quiet); background-size: var(--pf-tile) 100%; background-repeat: repeat-x; background-position: calc(50% - 115vw) 0; mix-blend-mode: overlay; animation: pflight1 var(--pf-period) linear infinite; } .identity .portrait { position: relative; } .identity .portrait::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: var(--pf-read); background-size: var(--pf-tile) 100%; background-repeat: repeat-x; background-position: calc(50% - 115vw) 0; mix-blend-mode: overlay; /* the response follows the photograph's own shape, so it cannot draw an edge the picture does not have */ -webkit-mask-image: radial-gradient(88% 88% at 50% 44%, #000 62%, transparent 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 84%, transparent 100%); mask-image: radial-gradient(88% 88% at 50% 44%, #000 62%, transparent 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 10%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; animation: pflight1 var(--pf-period) linear infinite; } /* ---- 3 · reduced motion covers the two new carriers ------------------- The carrier forgotten here is exactly the one that would still be moving where movement is refused. */ @media (prefers-reduced-motion: reduce) { .hero--founder .field::after, .identity .portrait::after { animation: none !important; background-position: calc(50% - 15vw) 0; } } /* ---- 1a · THE SEAM, MEASURED AND CLOSED ------------------------------- The first cut enlarged the photograph and softened its mask, and a LOCALIZED BLOCK still read: the picture's own background is brighter than the page, so wherever the fade ends, a boundary exists — round or square makes no difference. Two things close it together, and only together: · the fade is made long instead of late — it starts near the subject and is still going at the corners, so there is no line where it ends; · the Field behind is brought up to meet the picture, because it IS the picture's own background. A seam between two different brightnesses is what the eye was finding; matched, there is nothing to find. Contrast is not assumed — section H re-measures it. */ /* ONE mask, no compositing. The previous cut combined masks with `add`, which unions them — the box came back whole, with a hard rectangular edge. A single long radial is both simpler and correct: it starts fading close to the subject and is still fading past the corners, so there is no line where it ends and nothing left to read as a card. */ .identity .portrait img, .identity .portrait::after { -webkit-mask-image: radial-gradient(74% 74% at 50% 41%, #000 18%, transparent 88%); mask-image: radial-gradient(74% 74% at 50% 41%, #000 18%, transparent 88%); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* the Field is the picture's own background, brought up to meet it */ .hero--founder .field-img { opacity: .82; } /* ---- 1b · THE PATCH WAS THE MATERIAL, NOT THE EDGE --------------------- Measured, not guessed: with the mask on, the step at the picture's corner is 1.0 luma against 8.6 with it off — so the edge was never the problem. What read as a localized block is the INTERIOR: the photograph's starfield is brighter than the page around it, and it was surrounded by a 16px blur that is a different material from the crisp waves inside the frame. So the Field stops being a haze and becomes the same material: the same strip of the photograph's own background, resolved enough to read as those waves rather than as fog behind them. Then the picture is not a patch on the surface — it is the part of the surface that happens to be in focus. */ /* the window must contain NO subject: at 370% the visible slice is the leftmost 27% of the photograph — stars and the left wave only. At 320% it reached into the shoulder and a blurred face appeared at the right edge of the band, which is a smear, not a field. */ .hero--founder .field-img { background-size: 370% 150%; background-position: 0% 50%; } /* ============================================================ V6.2 — THE PORTRAIT HAS NO FRAME, BECAUSE THE PAGE HAS ITS SKY (an approved decision "FSITE PORTRAIT SURFACE INTEGRATION CORRECTION", 2026-08-21.) The defect changed shape but not nature: a circle became a rectangle. The Founder named the real requirement — no separate background of ANY shape, and the geometry of the source image must not be findable by eye. Why no mask could ever do it, measured on the asset itself: photograph's sky (corners) L ~ 2.1 - 3.7, crisp sparse stars page ground (#0A0D12) L ~ 12.6, smooth Two different GROUNDS with two different TEXTURES meeting along a straight line is a rectangle. Alpha can soften where they meet; it cannot make them the same thing. And cutting the subject out was measured and rejected: the lit side of the shirt reads L = 8.3 against a background of L = 11.6, so a luminance matte would punch holes through the clothing — and the portrait is the Founder's identity, never redrawn. So the page is given the photograph's environment instead of the photograph being given a shape: · the hero ground is taken down to the picture's own sky level, so the darker rectangle has nothing to be darker than; · the picture's own stars are lifted out as an alpha-only sprite (scripts/derive-field-stars.py) and tiled across the whole band, so the crisp-texture boundary — the thing the eye was actually finding — no longer exists; · the waves already continue across the band from the previous GO; · the mask is then only there so nothing ends abruptly. Everything the previous GO established is preserved untouched: the size, the waves, their belonging to the light, the response of waves, face and eyes to the one beam, and the removed line. ============================================================ */ /* the hero ground = the photograph's sky, not the page's navy */ .hero--founder .field .scrim { background: radial-gradient(58% 60% at 50% 34%, rgba(6,8,16,0.62) 0%, rgba(6,8,16,0.80) 46%, rgba(6,8,16,0.92) 78%, rgba(6,8,16,0.96) 100%), linear-gradient(to bottom, rgba(6,8,16,0.88) 0%, rgba(6,8,16,0.70) 26%, rgba(6,8,16,0.86) 74%, rgba(6,8,16,0.97) 100%); } /* the band is the picture's sky, so it must also cover the page's own substrate — otherwise the grid and the ambient wash reappear around the portrait and re-draw the frame from the other side */ .hero--founder .field { background: #06080F; } /* the picture's own stars, continued across the band. Alpha-only: they add stars without lifting the ground, which is what lets the page hold the photograph's dark sky AND its texture at the same time. */ .hero--founder .field .scrim::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url('/assets/field-stars.png'); background-repeat: repeat; background-size: 328px 328px; /* the tile at its derived scale */ opacity: .82; } /* with the environment continuous, the mask's only job is that nothing ends abruptly — a long, shallow fade, no shape of its own */ .identity .portrait img, .identity .portrait::after { -webkit-mask-image: radial-gradient(96% 96% at 50% 43%, #000 40%, transparent 100%); mask-image: radial-gradient(96% 96% at 50% 43%, #000 40%, transparent 100%); } /* ---- V6.2a · the layers in the order the sky actually has -------------- The first cut buried the waves under the darkening scrim, so the page had sky and stars but no waves, while the picture had all three — which made the frame MORE findable, not less. The scrim goes back to being a reading vignette only; the sky is the `.field` background, the waves sit on it, the stars sit above, and the beam above them. Same materials on both sides of where the picture ends. */ .hero--founder .field .scrim { background: radial-gradient(70% 70% at 50% 36%, rgba(6,8,15,0) 0%, rgba(6,8,15,0.18) 62%, rgba(6,8,15,0.55) 100%), linear-gradient(to bottom, rgba(6,8,15,0.55) 0%, rgba(6,8,15,0) 22%, rgba(6,8,15,0) 62%, rgba(6,8,15,0.85) 100%); } .hero--founder .field-img { opacity: .55; } .hero--founder .field-img.mirror { opacity: .3; } /* the mask fades far enough inside the box that the picture's own sky is already the page's sky by the time it ends */ .identity .portrait img, .identity .portrait::after { -webkit-mask-image: radial-gradient(70% 70% at 50% 42%, #000 20%, transparent 84%); mask-image: radial-gradient(70% 70% at 50% 42%, #000 20%, transparent 84%); } /* ---- V6.2b · the sky keeps its waves, the reading keeps its contrast ----- Section H caught this immediately, which is what it is for: letting the waves through the scrim put them behind the identity, and `MEDIA HOLDING` fell to 1.69:1 against a threshold of 3. The standing condition of is not negotiable, and the answer is the one §5 prescribes — the scrim yields where the picture is and holds where the reading is. The environment around the portrait is untouched; only the band BELOW it, where the lines stand, returns to a reading ground. */ .hero--founder .field .scrim { background: radial-gradient(64% 46% at 50% 30%, rgba(6,8,15,0) 0%, rgba(6,8,15,0.10) 58%, rgba(6,8,15,0.42) 100%), linear-gradient(to bottom, rgba(6,8,15,0.55) 0%, rgba(6,8,15,0.05) 16%, rgba(6,8,15,0.05) 52%, rgba(6,8,15,0.72) 68%, rgba(6,8,15,0.90) 84%, rgba(6,8,15,0.96) 100%); } /* ---- V6.2c · the sky ends where the reading begins --------------------- Section H named the real offender, and it was not the waves: the worst background pixel behind MEDIA HOLDING was rgb(128,133,170) — a STAR. The gate scores the brightest pixel in a text's own box, so a single star standing behind a line is enough to break it, and it did: 1.71:1 against a threshold of 3. The stars exist to remove the picture's frame, and the frame is around the portrait — not under the lines. So the sky fades out where the reading starts, exactly as the scrim does. Same law, same place, one more carrier. */ .hero--founder .field .scrim::before { opacity: .72; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.35) 58%, transparent 68%); mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.35) 58%, transparent 68%); } /* ---- V6.2d · a narrow viewport reaches the reading sooner -------------- Same law, measured again where the geometry differs: on 390px the lines sit higher, so the wave band was still running behind the descriptor — 3.14:1 against 4.5. The sky and the waves yield earlier there. Responsive Physics §11: the law is the same, its expression follows the space. */ @media (max-width: 720px) { .hero--founder .field .scrim { background: radial-gradient(70% 40% at 50% 24%, rgba(6,8,15,0) 0%, rgba(6,8,15,0.16) 58%, rgba(6,8,15,0.5) 100%), linear-gradient(to bottom, rgba(6,8,15,0.6) 0%, rgba(6,8,15,0.1) 12%, rgba(6,8,15,0.12) 34%, rgba(6,8,15,0.8) 48%, rgba(6,8,15,0.93) 64%, rgba(6,8,15,0.97) 100%); } .hero--founder .field .scrim::before { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0,0,0,.3) 40%, transparent 50%); mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0,0,0,.3) 40%, transparent 50%); } .hero--founder .field-img { opacity: .42; } } /* ---- V6.2e · the sky is darkest where the picture's sky is darkest ----- Per-edge measurement located the last of it: left already sits at the surface's own level (1.32 against a phantom box's 1.28), bottom is the subject's own shoulders — a person ending is not a frame — and the residue was the TOP, where the photograph's sky (L~3) met a page sky of L~8. The page's sky now falls toward the picture's own value at the top of the band, so the two are the same darkness where they meet. */ .hero--founder .field { background: linear-gradient(to bottom, #04060B 0%, #05070D 26%, #06080F 52%, #06080F 100%); } /* ---- V6.2f · the last of it was the picture's own glow ------------------ Diagnosed by elimination, not by taste: the top step held at 3.39 luma with the star sky at full strength, at .45, at .30 and switched off entirely — so the sky was never its cause. It was the photograph itself: with the mask centred at 42% and a 70% radius, 37% of the picture still showed at its top edge, and what shows there is the glow above the head. The mask is tighter vertically and its centre sits lower, so the picture has already gone by the time its own top edge arrives. */ .identity .portrait img, .identity .portrait::after { -webkit-mask-image: radial-gradient(72% 60% at 50% 47%, #000 16%, transparent 80%); mask-image: radial-gradient(72% 60% at 50% 47%, #000 16%, transparent 80%); } /* ============================================================ V6.3 — THREE FOUNDER FINDINGS (V61 VISUAL CORRECTION 2), 2026-08-22 Only these three. Composition, texts, typography, identity presentation, marks, navigation, sections, the grid and the accepted Visual Physics mechanics are untouched. ============================================================ */ /* ---- 1 · NO BOUNDARY IN ANY PHASE OF THE BEAM ------------------------- Finding: the outline of the source image still appears AS THE BEAM PASSES. Cause, and it explains why it only showed during the pass: the light response was carried by a layer the size of the PHOTOGRAPH'S OWN BOX, and `overlay` is proportional to what is beneath it. The photograph and the page answer that blend differently, so the moment the beam arrived it drew the difference — which is the box. A mask cannot help: the layer's geometry IS the box. So the beam stops belonging to the picture and belongs to the band: ONE layer across the whole hero, above the portrait, treating photograph and page identically. Nothing can be revealed as a rectangle because nothing is rectangular any more. It is the same band, the same keyframe, the same 96s timeline — not a new effect. */ .hero--founder { position: relative; } .hero--founder .wrap { z-index: 3; } .hero--founder::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background-image: var(--pf-quiet); background-size: var(--pf-tile) 100%; background-repeat: repeat-x; background-position: calc(50% - 115vw) 0; mix-blend-mode: overlay; /* it fades before the reading starts, so the lines below keep their own contrast and the light never lands on type */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 62%); mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 62%); animation: pflight1 var(--pf-period) linear infinite; } /* the per-photograph light layer is gone: it was the box */ .identity .portrait::after { content: none; } /* ---- 2 · ALL THE WAVES PASS BEHIND HIM -------------------------------- Finding: some waves visually cross in front of him, and single stretches are far brighter than the rest. Cause: they are not in front of him — they are BEHIND him showing THROUGH him. The radial mask made the photograph semi-transparent exactly where his shoulders and chest are, so the page's wave strip read through his body. So the mask stops being a circle around the picture and becomes a shape that keeps HIM solid while letting the sky go: a tall, narrow ellipse over the column he occupies, intersected with a fade that only takes the top. And the strip itself is evened out — the hot stretches came from a bright slice of the source being magnified, so it is softened and quieter. */ .identity .portrait img { -webkit-mask-image: radial-gradient(46% 98% at 50% 58%, #000 66%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 15%, #000 100%); mask-image: radial-gradient(46% 98% at 50% 58%, #000 66%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 15%, #000 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .hero--founder .field-img { opacity: .46; background-size: 300% 150%; background-position: 2% 52%; } .hero--founder .field-img.mirror { opacity: .2; } /* ---- 3 · ONE CONTINUOUS SKY, UP TO THE TOP OF THE PAGE ---------------- Finding: a separate fragment of starfield is visible. Cause: the stars were a child of the Field, and the Field carries its own bottom fade — so the sky existed only inside a band and ended twice, once at the Field's own mask and once at its own. A patch, exactly as seen. The sky is now a layer of the hero itself, starting at the very top of the page and fading only once, where the reading begins. Same tile, same density, same character — the change is continuity, not appearance. */ .hero--founder .field .scrim::before { display: none; } .hero--founder::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: url('/assets/field-stars.png'); background-repeat: repeat; background-size: 328px 328px; opacity: .6; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.4) 56%, transparent 70%); mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.4) 56%, transparent 70%); } /* reduced motion: the new carrier is listed, the removed one is gone */ @media (prefers-reduced-motion: reduce) { .hero--founder::after { animation: none !important; background-position: calc(50% - 15vw) 0; } } /* ---- V6.3a · he dissolves downward, and the strip holds no subject ------ Two things the render showed that the numbers did not: · keeping the bottom of the mask fully opaque made his shoulders end on a straight horizontal line — a border by any other name. He fades downward instead; the page's waves are quiet enough now that nothing reads through him; · the 300% window reached the subject again and blurred faces appeared at both ends of the band. The window returns to the leftmost 27%, which contains stars and the left wave and nothing else. */ .identity .portrait img { -webkit-mask-image: radial-gradient(46% 98% at 50% 56%, #000 62%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 58%, rgba(0,0,0,.55) 82%, transparent 100%); mask-image: radial-gradient(46% 98% at 50% 56%, #000 62%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 58%, rgba(0,0,0,.55) 82%, transparent 100%); } .hero--founder .field-img { background-size: 370% 150%; background-position: 0% 52%; } .hero--founder .field-img.mirror { background-size: 430% 140%; background-position: 1% 60%; } /* ============================================================ V6.4 — HERO SURFACE CORRECTION (by decision) Two findings only. Hero composition, sizes, positions, typography, texts, MEDIA HOLDING, the descriptor, the Founder attribution, navigation, the other sections, the general Visual Physics and the beam's timeline are untouched. Nothing removed earlier is brought back. ============================================================ */ /* ---- 1 · ONE SURFACE: NO LIGHTER ZONE AROUND THE SILHOUETTE ------------ Finding: a separate lighter area still reads around the silhouette, and the beam makes it far worse — the photograph starts to look like a brighter object against its surroundings. Cause, in the blend itself: `overlay` is MULTIPLICATIVE about the midpoint, so it amplifies whatever is already brighter. The photograph's own sky and glow are brighter than the page, so every pass widened the difference instead of crossing it. That is why the previous fix removed the box's EDGE and still left its AREA. `soft-light` replaces it: the same one band, the same keyframe, the same 96s line — but a blend that COMPRESSES differences instead of widening them. The face and eyes still take their light response; the picture no longer gains more than the surface it lies in. */ .hero--founder::after { mix-blend-mode: soft-light; background-image: var(--pf-mark); } /* and the picture's own excess is brought down to the surface it belongs to: the bright blue waves immediately behind him are the most saturated thing in the frame, so a small, even reduction reads on them first and on his face last. No mask, no shape — the whole picture, evenly. */ /* saturation does the work, not brightness: the waves are by far the most saturated thing in the frame, so lowering it reads on them first and on his face almost not at all — and brightness stays near 1 so the picture does not become a DARKER separate area instead of a lighter one. */ .identity .portrait img { filter: saturate(.58) brightness(.96) contrast(.98); } /* the page's own wave strip comes down with it, so the two remain one system rather than one loud and one quiet */ .hero--founder .field-img { opacity: .4; } .hero--founder .field-img.mirror { opacity: .17; } /* ---- 2 · THE SKY REACHES THE TOP OF THE SURFACE ------------------------ Finding: a separate horizontal header/chrome layer exists at the top and the starfield begins below it. Cause: the sky is a layer of the HERO, and the hero begins under the header — so the header band could only ever be a different ground. The header keeps its place and its contents; what changes is that the same sky passes behind it. The tile is anchored to the VIEWPORT on both carriers, so the header's sky and the hero's sky share one phase and there is no seam where they meet. `background-attachment: fixed` is used deliberately and narrowly here: the law that forbids it (round ten, 2026-08-18) is about a carrier of the MOVING field, which a browser renders per element and therefore out of time. This sky does not move — it is static texture — so the reason behind the prohibition does not apply, and the alternative would be a visible seam at every header height. */ /* the header is isolated so its sky stays inside it: a z-index:-1 child of a non-isolated parent can fall behind the page ground entirely */ header.nav { position: relative; isolation: isolate; } header.nav::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: #0A0D16; background-image: url('/assets/field-stars.png'); background-repeat: repeat; background-size: 328px 328px; /* the fixed attachment is WITHDRAWN, not merely overridden: this carrier is `content: none` since V6.5, and a prohibition that the file still contains a live example of cannot be enforced by a gate reading it. */ opacity: 1; } /* ---- 2a · the header carries the SAME three layers as the hero's top ---- Measured: with only a ground and stars the strip sat at L 6.07 against the hero's 12.32 — the plate had not gone, it had only changed sign. And the beam covered the hero but not the header, so every pass would have drawn the band again. The header now holds the same ground, the same sky and the same beam, on the same keyframe and the same timeline — so there is nothing left that can differ between the two. */ header.nav::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--pf-mark); background-size: var(--pf-tile) 100%; background-repeat: repeat-x; background-position: calc(50% - 115vw) 0; mix-blend-mode: soft-light; animation: pflight1 var(--pf-period) linear infinite; } @media (prefers-reduced-motion: reduce) { header.nav::after { animation: none !important; background-position: calc(50% - 15vw) 0; } } /* ---- 1a · one composition of waves, reached from the other side -------- Measured: desaturating the picture moved the waves' LUMINANCE almost not at all — a saturated blue and a grey of the same luma read the same to the meter, and it is luminance that made them stand out. Dimming them further would have meant dimming his face with them. So the two are matched from the other side: the surface's own waves come UP toward his instead of his coming down. The result is one wave system with the picture inside it, rather than a loud half and a quiet half. The reading zone below keeps its own ground — the scrim already yields there, and section H re-measures it. */ .hero--founder .field-img { opacity: .68; } .hero--founder .field-img.mirror { opacity: .3; } .identity .portrait img { filter: saturate(.86) brightness(.94) contrast(.98); } /* on a narrow viewport the nav sits closer to everything, so the header's sky yields there exactly as the hero's does below the portrait — no plate, just a quieter ground under two small labels (section H caught 2.85:1) */ @media (max-width: 720px) { header.nav::before { background-color: #06080F; opacity: .62; } header.nav::after { opacity: .62; } } /* on a narrow viewport the answer is not to darken the header alone — that brought the plate back at 9.95 luma. The TOP OF THE HERO comes down with it, so the two are the same ground: the nav keeps its contrast and there is still no band. Same law as everywhere here — the surface yields where the reading is, and it yields on both sides of the line at once. */ @media (max-width: 720px) { .hero--founder .field .scrim { background: radial-gradient(70% 40% at 50% 26%, rgba(6,8,15,0) 0%, rgba(6,8,15,0.18) 58%, rgba(6,8,15,0.5) 100%), linear-gradient(to bottom, rgba(6,8,15,0.9) 0%, rgba(6,8,15,0.86) 8%, rgba(6,8,15,0.2) 22%, rgba(6,8,15,0.16) 34%, rgba(6,8,15,0.82) 48%, rgba(6,8,15,0.94) 64%, rgba(6,8,15,0.97) 100%); } .hero--founder .field-img { opacity: .5; } } /* ---- 2b · ground and sky separated, so each can answer its own duty ------ The two were one layer, so dimming the stars for the nav's contrast also dimmed the ground and the plate came back (9.95 luma), while matching the ground again broke the contrast (3.59:1). They are separated: the ground lives on the header itself and stays exactly the hero's, and the stars are their own layer, quieter on a narrow viewport where two small labels have to stand on them. No band appears, because the band was never the stars. */ header.nav { background-color: #0A0D16; } header.nav::before { background-color: transparent; opacity: .6; } @media (max-width: 720px) { header.nav { background-color: #090C15; } header.nav::before { background-color: transparent; opacity: .16; } header.nav::after { opacity: .55; } } /* ---- 1b · the quietest register for the band's own beam ----------------- Live measurement found one phase of eight where the picture's edge still stood 0.94 luma above the surface's own variation — the pass crossing its right side. The beam over the band drops to the reading register, the quietest the surface has, so no phase can lift the picture above what surrounds it. The header's beam follows, or the two would fall out of step. */ .hero--founder::after, header.nav::after { background-image: var(--pf-read); } /* ============================================================ V6.5 — ONE SURFACE, AT ONE SCALE (an approved decision "HERO SURFACE CORRECTION NOT ACCEPTED", 2026-08-22.) Three findings, and the first two have one cause. Composition, sizes, positions, typography, texts, navigation, the other sections and the accepted Visual Physics are untouched. ============================================================ */ /* ---- 1 + 2 · THE ENVIRONMENT WAS CONTINUED AT THE WRONG SCALE ----------- Finding: he still reads as a separate photograph laid on the surface, with a lighter area around the silhouette and shoulders; and the bright waves immediately behind him still read apart from the page's wave field. The previous round measured the boundary STEP and found none in eight phases out of eight, and that was true — and beside the point. A fade made long and shallow on purpose has a tiny step everywhere and still leaves an AREA. Measured as an area instead (scripts/measure-portrait-region.mjs): the picture's own surround L 14.3 – 15.5 same shape, same height, no picture L 9.6 – 11.1 a plateau of 1.46x – 1.62x that ends exactly where the picture ends. And it ends there because the page carried the photograph's environment at the WRONG SCALE. The picture renders 1400 -> 367 css px, a 3.8x reduction. Around it the page carried the same content magnified: stars a 328px tile drawn at 328px -> 3.8x larger than in the picture waves the leftmost 27% stretched -> ~14x larger than in the picture Same content, different scale. Scale is what the eye reads as MATERIAL: inside the frame the sky is fine and the ribbons are crisp, outside it is coarse and smeared. That is a findable boundary that no mask and no blend mode can remove — which is exactly why four rounds of masking, matching and blending could not close it, and why the numbers each round kept agreeing with the change and disagreeing with the Founder. So the environment is CONTINUED rather than imitated, at the picture's own scale, in exact register, on both counts. */ /* the sky takes the picture's own reduction: the same tile, shrunk by the same 1400 -> portrait ratio the photograph is subject to. Derived, not chosen. */ .hero--founder::before { content: none; } /* it moves one level down */ .hero--founder .field::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url('/assets/field-stars.png'); background-repeat: repeat; background-size: calc(var(--idlever) * 328 / 1400) calc(var(--idlever) * 328 / 1400); opacity: .6; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.4) 56%, transparent 70%); mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.4) 56%, transparent 70%); } /* `z-index: 3` on the wrap made a stacking context, and a stacking context is an isolated group: a blend inside it blends against nothing. The wrap does not need it — the beam sits at 4 and stays above either way, and the field sits at 0 and stays below — so it is dropped rather than worked around. */ .hero--founder .wrap { z-index: auto; } /* the waves: the photograph's own background, continued outward past its frame. Anchored TO THE PORTRAIT BOX and drawn two portrait-widths per tile, so the scale is identical by construction and the vertical register is exact — not matched by eye and not tuned. `screen` over a sprite whose own sky was subtracted to zero adds only what the photograph adds. */ .identity .portrait::before { content: ''; position: absolute; top: 0; bottom: 0; left: -400%; right: -400%; pointer-events: none; background-image: url('/assets/field-continuation.jpg'); background-repeat: repeat-x; background-size: 22.2222% 100%; /* one mirror pair = 2 of 9 portrait widths */ background-position: left top; mix-blend-mode: screen; } /* positioned, so the man paints above the light instead of under it */ .identity .portrait img { position: relative; } /* the 14x stretch stops being the carrier of the waves — it was the whole defect. It stays as a faint ambient far from the picture, where there is no picture to compare it with and a bare band would be a defect of its own. */ .hero--founder .field-img { opacity: .1; } .hero--founder .field-img.mirror { opacity: .05; } @media (max-width: 720px) { .hero--founder .field-img { opacity: .1; } } /* and the corrections that existed only to compensate for the mismatch are withdrawn: with the surface carrying his own light outward, desaturating and dimming the picture would now make it the DARKER area instead of the lighter one. The photograph is left as it is. */ .identity .portrait img { filter: none; } /* ---- 3 · THE HEADER IS NOT A CONTAINER --------------------------------- Finding: the structure of the header still reads through the sky. Cause, and it is structural rather than tonal: `header.nav` is `position: static` — a box of its own, in flow, ABOVE the hero. Whatever it paints is a second surface, and the previous round gave it its own ground, its own sky and its own beam so the two would match. Matched surfaces are still two surfaces, and the eye finds the one that is a container. So it paints nothing at all. The hero is pulled up beneath it by exactly the header's measured height — 58px, at both 1440 and 390 — and the same amount is added back as padding, so not one element moves. One ground, one sky, one beam, and RU and CONNECT stand on the hero's own sky. The `background-attachment: fixed` exception goes with it: it existed only to keep two carriers in phase, and there are no longer two. The prohibition of round ten stands again, unqualified. */ header.nav { position: relative; z-index: 5; background: none; isolation: auto; } header.nav::before, header.nav::after { content: none; } .hero--founder { margin-top: -58px; /* exactly what was taken, given back. The hero's own padding is 0 since V6 — the identity component owns its air — so the compensation is the header's height and nothing else, and no element moves by a pixel. */ padding-top: 58px; } /* ---- V6.5a · the continuation is exact where it is compared, and falls away where it is not --------------------------------------------------------- The render said what the numbers could not: continued at full strength across the whole band, his light stops being a surface and becomes wallpaper — the mirror period reads as a repeating motif, and the band is louder than the picture it came from. The photograph itself does not do that: its waves are strongest around him and fade toward its own frame. So the continuation carries the same law. It is exact where the eye can compare the two — against his shoulders, where the boundary was findable — and falls away outward, where there is no picture to compare it with and only the quiet sky is needed. */ .identity .portrait::before { opacity: .62; -webkit-mask-image: radial-gradient(25% 104% at 50% 50%, #000 0%, #000 22%, rgba(0,0,0,.5) 56%, transparent 100%); mask-image: radial-gradient(25% 104% at 50% 50%, #000 0%, #000 22%, rgba(0,0,0,.5) 56%, transparent 100%); } /* the stretched wash is retired as a carrier entirely: at 14x its own material is a horizontal smear, and smear is visible on a near-black sky at any opacity. The rule and the asset stay; only its contribution goes to zero, so restoring it is one number. */ .hero--founder .field-img, .hero--founder .field-img.mirror { opacity: 0; } @media (max-width: 720px) { .hero--founder .field-img { opacity: 0; } } /* ---- V6.5b · which mismatch was actually the carrier --------------------- Tested rather than assumed: with the waves continued correctly, the star tile was put back to its own size and the AREA was measured again. If the plateau does not return, the stars' scale was never the carrier — the waves were — and the sky may keep the size at which it is a sky at all. At the picture's own reduction the points fall under a pixel and the top of the page goes empty, which is a defect of its own and the opposite of what the Founder asked for. */ .hero--founder .field::after { background-size: 328px 328px; } /* ---- V6.5c · the ambient and the motif are not the same layer ------------ Two measurements, one conclusion. Continued whole, the light reads as wallpaper. Damped, the area returns at 1.39 — because damping took the photograph's AMBIENT down with the ribbons and left the surface dark beside a lit picture. In the photograph itself the two behave differently: the glow lights its background from edge to edge, while the ribbons are a motif with a place. So they are separated at the source and each is given its own law here. */ .identity .portrait::after { content: ''; position: absolute; top: 0; bottom: 0; left: -400%; right: -400%; z-index: 0; pointer-events: none; background-image: url('/assets/field-glow.jpg'); background-repeat: repeat-x; background-size: 22.2222% 100%; background-position: left top; mix-blend-mode: screen; } .identity .portrait::before { z-index: 0; opacity: 1; } .identity .portrait img { z-index: 1; } /* ============================================================ V6.6 — THE THREE MEANINGS BELONG TO THE SURFACE (an approved decision "REMOVE CARDS", 2026-08-24.) Finding: «ОСНОВАТЕЛЬ / MEDIA HOLDING / ПРОДУКТЫ» reads as three UI cards. The card was built from four carriers, and all four are named in the finding, so all four go — nothing is merely re-tinted: · an outer rectangular container .spine border: 1px solid var(--hair) · vertical dividers .spine gap: 1px over a --hair ground, the table-grid trick: the container's colour shows through the gaps between opaque children and draws the lines · a filled surface under each .node background: var(--navy) · a second, BRIGHTER fill on one .node.n-mh linear-gradient(#0C1220 …) What replaces them is what the surface already uses for the same job one band below (.prod, .principle): no fill, no frame — space, and the typographic hierarchy that is already there. The middle one keeps its rank the way the canon assigns rank, by MATERIAL: its ring answers in gold, which is the group's colour, instead of standing on a lighter plate. The content, the marks and the meanings are untouched; only the geometry that made them objects on the page rather than parts of it. ============================================================ */ .spine { background: none; border: 0; /* the 1px gap existed to draw lines; a real one separates by space */ gap: clamp(34px, 4.6vw, 72px); } .node { background: none; padding: 0; } .node.n-mh { background: none; } @media (max-width: 860px) { /* stacked, the same law: silence between them, not a hairline */ .spine { gap: clamp(38px, 5.4vh, 58px); } } /* ============================================================ V6.7 — ONE FRONT, ONE STRENGTH, ONE PHYSICS (an approved decision "LIGHT BEAM UNIFORMITY ONLY", 2026-08-24.) Finding: the front is strong low on the surface and fades as it rises, all but vanishing over the sky, the waves and the portrait. Measured before touching anything (scripts/measure-beam-uniformity.mjs — the swing each height passes through over a full cycle, sampled in columns that carry no type, so what is measured is the band's own carrier and not the glint each line owns): top of the hero 4.4 → 2.6 the sky the wave band 17.9 a spike 58% of the hero 1.07 gone bottom 19.8 strong an 18.5x spread. Three causes, and none of them is the beam's direction, its speed or its cycle — those are left exactly as they are: 1 · `soft-light` makes the front's strength a FUNCTION OF THE BACKDROP. It was chosen in V6.4 to stop the beam amplifying the photograph, and it did — by making the light nearly nothing on a dark sky (2.6) and a spike on the bright waves (17.9). A front of equal strength cannot be built from a backdrop-proportional blend. The reason it was needed is gone: V6.5 continued the photograph's own environment at its own scale, so the picture's surround no longer sits brighter than the page (measured 1.16 against a 1.25 threshold) and there is nothing left for an additive light to amplify unevenly. 2 · THE TWO FADES DID NOT HAND OVER. The beam's mask ended at 62% of the hero; the hero's Field — which is what hides the page's own light — only clears at 96%. Between them neither was at strength, and that is the 1.07 trough, exactly where the Founder says it disappears. 3 · THE STRONG PART AT THE BOTTOM WAS NEVER THE HERO'S BEAM. It is the page's own carrier, `body::after`, showing through where the Field has faded. So the surface already contained the front the Founder is asking for — the hero was replacing it with a weaker one. The fix is therefore not a new effect and not a stronger beam over the photograph. The hero's beam stops inventing physics and takes the page's: the same register, the same plain compositing, the same keyframe, the same 96s line, the same phase. And its mask becomes the Field's own mask, so that what the Field hides of the page's light, the beam restores in exactly the same measure — beam + page light = constant at every height, by construction rather than by tuning. ============================================================ */ .hero--founder::after { /* the register the page's own light uses, not the quietest one */ background-image: var(--pf-field); /* a light ADDS; it does not multiply what lies under it */ mix-blend-mode: normal; /* the Field's own mask: b(y) = m(y), so b + (1 - m) = 1 everywhere */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%); mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%); } /* EXACTLY ONE CARRIER MOVES. The sky inherited `animation: pflight1` and `mix-blend-mode: overlay` from the V6.1 rule that once held this same selector — V6.5 reused it for the star texture and redeclared everything except those two. Its drift is below what a correlation over the rendered sky can detect, so nothing visible is being corrected here; what is corrected is that a second light was moving on the beam's own keyframe, which no claim of ONE front can stand beside. The texture, its tile, its scale, its opacity and its mask are untouched. */ .hero--founder .field::after { animation: none; } /* ============================================================ Consent (an approved decision) The panel FLOATS, so it carries its own material rather than borrowing the page's — the same law the language menu obeys. The two answers are one control repeated: identical class, weight and size, and neither is given the gold. Making "allow" look like the way forward would be exactly the pattern this surface refuses. ============================================================ */ .fw-cc { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; max-width: 40rem; margin: 0 auto; background: var(--panel); border: 1px solid var(--hair); border-radius: 10px; padding: 1rem 1.1rem; box-shadow: 0 16px 48px rgba(0, 0, 0, .5); } .fw-cc-msg { color: var(--silver); font-size: .95rem; line-height: 1.55; margin: 0 0 .4rem; } .fw-cc-detail { color: var(--silver); opacity: .72; font-size: .85rem; line-height: 1.55; margin: 0 0 .85rem; } .fw-cc-actions { display: flex; flex-wrap: wrap; gap: .6rem; } .fw-cc-btn { background: transparent; color: var(--silver); border: 1px solid var(--hair); border-radius: 8px; padding: .6rem 1.15rem; font: inherit; font-size: .9rem; cursor: pointer; } .fw-cc-btn:hover { border-color: var(--gold); } .fw-cc-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .fw-cc-foot { margin-top: .6rem; font-size: .8rem; opacity: .7; } .fw-cc-foot a { color: var(--silver); } @media (prefers-reduced-motion: reduce) { .fw-cc { transition: none; } }