/* ═══════════════════════════════════════════════════════════════════════════════════════════ AURUM · THE WORLD'S THEATRE Evolved 2026-07-27 from the third casting's inline block, which earned his eye the same day. EVERY selector, hook and class name of that casting survives here (DECISIONS #30): what changed is named in the comments, item by item, against docs/research/aurum-world-maximum.md. It lives in ONE file because the two tongues had already drifted apart in a single day (the English page carried an invisible word the Bulgarian did not), and a package of three hundred changes landing on two copies is six hundred edits and a second divergence. Item 246. THE LAWS THIS FILE OBEYS #27 Only transform and opacity ever animate. No per-frame paint write. No canvas. No content-visibility. No backdrop-filter over scrolling content. #40 The light is an instrument and is never dimmed to win a number. #41 Every colour pair is measured against the real ground, never eyeballed. #43 Nothing dark is painted behind a line of text. When words and light meet, the COMPOSITION moves. THE TRANSFORM CONTRACT (item 106). Six things wanted to move one element. One owner per node, one property per owner, or a keyframe silently erases the driver: #field translate the pointer's lean, written by the pointer loop #orb transform the driver's single per-frame write. NEVER carries a keyframe. .aura opacity the halo's breath .pulse scale the chapter loops (the heat's pant, the beat's two stroke) .stack nothing static geometry; it clips the body to its own circle .sweep translate the travelling band of refraction ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ── THE TYPE. Four cut faces plus the mark, 129 KB against 2.37 MB of TTF (items 17, 35). The mark is four capitals at font-display: block, so the property's name can never flash or swap; at that scope blocking cannot hide one word of body text (item 36). Every other face is swap behind a metric matched fallback. The TTFs stay as the last resort and as the source the subsetter re cuts from. ── */ @font-face { font-family: "Aurum Mark"; src: url("fonts/aurum-mark.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; } @font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-light.woff2") format("woff2"), url("fonts/CormorantGaramond-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-italic.woff2") format("woff2"), url("fonts/CormorantGaramond-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-medium.woff2") format("woff2"), url("fonts/CormorantGaramond-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-light.woff2") format("woff2"), url("fonts/Inter_18pt-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } /* The metric matched stand ins, so the first frame is the right SIZE and the swap does not move a 210px wordmark (item 36). Measured off the shipped files: Cormorant cap 0.625em, x 0.386em; Georgia cap 0.692em. Inter 18pt x 0.539em; Arial x 0.519em. */ @font-face { font-family: "Cormorant fallback"; src: local("Palatino Linotype"), local("Palatino"), local("Georgia"), local("Times New Roman"); size-adjust: 90%; ascent-override: 92%; descent-override: 29%; line-gap-override: 0%; } @font-face { font-family: "Inter fallback"; src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"); size-adjust: 104%; ascent-override: 97%; descent-override: 24%; line-gap-override: 0%; } :root { --display: "Cormorant Garamond", "Cormorant fallback", "Palatino Linotype", Georgia, serif; --mark: "Aurum Mark", "Cormorant Garamond", "Cormorant fallback", Georgia, serif; --body: "Inter", "Inter fallback", system-ui, -apple-system, sans-serif; --inscr: "Inter", "Inter fallback", system-ui, sans-serif; /* THREE INKS AND ONE GILT (item 52). --dim and --whisper measured 4.7 oklch lightness points apart at the same hue, which is two tokens the eye cannot separate. --whisper is now an alias, kept so no rule had to be hunted down, and both sit HIGHER than either did before, which can only raise the measured floor. Identical to the reading rooms (item 53). */ --ink: #ece6d9; --read: #c9c2b1; --dim: #a49a84; --whisper: var(--dim); --gold: #c9a558; --gold-hi: #e8cd8f; --gold-lo: #8a6a2e; /* THE SIZE RAMP (item 41). Nine unrelated vw slopes, most frozen at both ends, replaced by one ladder that ramps continuously from 390px to 1600px. In rem, so a reader who has set a larger default font size is finally answered (item 43). Read in x height normalised terms the ladder is 11.5, 12.5, 14.3, 17, 17.9, 19, 21.5, 38.7, 54.4, 136: small chromatic steps through the reading band, then exactly two silences (x1.80 and x2.50). Nothing may ever be placed inside those two gaps. Every Cormorant size carries the 1.40 correction: its x height is 0.386em against Inter's 0.539em, so a Cormorant number must be 1.40x an Inter number to look the same size beside it. Before this, the page's climax and its only live action were optically SMALLER than the paragraphs above them (item 40). */ --fs-inscr: clamp(0.719rem, 0.699rem + 0.083vw, 0.781rem); /* 11.5 → 12.5 */ --fs-inscr-l: clamp(0.75rem, 0.73rem + 0.083vw, 0.813rem); /* 12 → 13 */ --fs-body: clamp(0.969rem, 0.939rem + 0.124vw, 1.063rem); /* 15.5 → 17 */ --fs-lead: clamp(1.031rem, 0.981rem + 0.207vw, 1.188rem); /* 16.5 → 19 */ --fs-num: clamp(1rem, 0.919rem + 0.331vw, 1.25rem); /* 16 → 20 */ --fs-tell: clamp(1.25rem, 1.149rem + 0.413vw, 1.563rem); /* 20 → 25 */ --fs-disp-s: clamp(1.375rem, 1.214rem + 0.661vw, 1.875rem); /* 22 → 30 */ --fs-h2: clamp(2rem, 1.557rem + 1.818vw, 3.375rem); /* 32 → 54 */ --fs-begin: clamp(2.625rem, 1.94rem + 2.81vw, 4.75rem); /* 42 → 76 */ --fs-title: min(clamp(3.875rem, 14.4vw, 21.25rem), 26vh); /* 62 → 340, and never taller than a quarter of the glass */ /* THE EASING TOKENS (item 174 of the motion pass). Eight accents cut to five. */ --ease-settle: cubic-bezier(0.16, 0.80, 0.30, 1); --ease-rise: cubic-bezier(0.20, 0.70, 0.20, 1); --ease-arrive: cubic-bezier(0.22, 1.00, 0.36, 1); --ease-glass: cubic-bezier(0.45, 0, 0.55, 1); --t-fast: 0.35s; --t-mid: 0.7s; --t-slow: 1.15s; /* the sphere's own diameter, named once so eleven rules and the driver agree (item 150) */ --orb: min(52vmin, 420px); /* the outer margin the folio numerals and the cells hang from */ --gutter: clamp(22px, 4vw, 56px); --measure: 24em; } /* WIDE GAMUT (item 51). Every hex above stands as the fallback and is never removed; engines that can reach past sRGB take the same colours with the chroma the gold was always short of. Measured: --gold sits at oklch chroma 0.1049 where sRGB alone allows 0.1515 at that lightness and hue, so the page was leaving 31 per cent of even its sRGB gamut unused. */ @supports (color: oklch(0.75 0.12 85)) { :root { --ink: oklch(92.6% 0.021 88); --read: oklch(81.4% 0.028 88); --dim: oklch(68.6% 0.036 88); --gold: oklch(73.9% 0.145 84.7); --gold-hi: oklch(85.4% 0.108 87); --gold-lo: oklch(51.0% 0.098 82); } } /* ═══ THE DOORS BETWEEN THE PAGES ═══ One declaration, carried by the stylesheet every page on the property already links, so the fourteen documents stop flashing white at each other and cross into one another instead. It only pays because the door, the two worlds and the ten rooms now share one ground and one metal: before this pass the threshold painted #17161f under a theme-colour of #090b16 and handed to a world that painted #0b0c14, three grounds in one gesture (items 239, 237). The tall world page is deliberately NOT given a shared element name: snapshotting a seven thousand pixel document with eleven promoted light layers to morph one word is not a trade worth making on a phone. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-group(root) { animation-duration: 0s; } } * { margin: 0; padding: 0; box-sizing: border-box; } /* clip, not hidden: hidden makes the root a scroll container, which silently disables position: sticky for every descendant on the page, so the folio numerals would never stick and nothing would say why (item 33). hidden stays first for Safari 15. */ html, body { overflow-x: hidden; } @supports (overflow: clip) { html, body { overflow-x: clip; } } html { /* THE FLOOR, AND THE TRAP (item 61). The night lives on #night at z-index -4. If body also carried a background it would paint AFTER every negative z-index child and bury the whole theatre behind a flat rectangle, and the diff would look correct. So the canvas colour goes HERE and body carries none. This is also what an overscroll bounce reveals: night, not white. */ background: #080910; scrollbar-width: thin; scrollbar-color: rgba(201, 165, 88, 0.34) transparent; color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { color: var(--read); font-family: var(--body); font-weight: 300; font-size: var(--fs-body); -webkit-font-smoothing: antialiased; /* deliberate: it avoids colour fringing on the gold. It also thins every stroke on macOS, which is why no inscription on this page may go lighter. Item 46 */ overscroll-behavior-y: none; /* or the rubber band slides the fixed dawn up and shows a cold band under the sunrise (item 25) */ } a { color: var(--gold-hi); text-decoration: none; -webkit-tap-highlight-color: rgba(240, 194, 75, 0.22); } /* ONE OPAQUE SELECTION (item 57). The old translucent gold composited over the light's core to about 1.6:1, so selecting a sentence that crossed the sphere erased it. -webkit-text-fill-color is not optional: without it, selecting AURUM or the closing line makes the words vanish, because both are painted through background-clip: text. */ ::selection { background: #6a5320; color: #fff6dc; -webkit-text-fill-color: #fff6dc; } /* ONE HOUSE FOCUS RING (item 58). The property had no :focus rule of any kind. Two tones, drawn wholly outside the border box, because that is the only form that measures 3:1 against every ground this page owns: the near black night, the sphere's own core, and the gold gate. */ :where(a, button, [tabindex]):focus-visible { outline: 2px solid #ffe9a8; outline-offset: 3px; border-radius: 3px; box-shadow: 0 0 0 5px rgba(8, 7, 14, 0.92); } :focus:not(:focus-visible) { outline: none; } /* ═══ THE NIGHT ═══ Widened (item 48): the old ramp spanned 1.5 oklch lightness points end to end, which is one flat black pretending to be a sky. This one carries a real crown, a real middle and a warm floor, and the temperature arc down the page is finished by #warm (item 181). */ #night { position: fixed; inset: 0; z-index: -4; overflow: clip; background: radial-gradient(132% 78% at 50% -24%, #1b2244 0%, rgba(24, 29, 58, 0.55) 32%, rgba(20, 23, 46, 0) 62%), radial-gradient(96% 42% at 50% 116%, rgba(126, 68, 38, 0.30), rgba(96, 52, 32, 0.10) 42%, transparent 72%), linear-gradient(180deg, #101528 0%, #0c1020 24%, #090b16 52%, #08090f 78%, #0d0a12 100%); } /* THE AURORA. One wide slow field high in the sky, the way a night looks when something is burning below the horizon. Its three lobes were measured as two: the left and right were inside the just noticeable difference of each other, so the page paid for a triple and showed a single (item 54). Now they are separated in hue and in reach. */ #night::after { content: ""; position: absolute; inset: -24% -34%; transform: rotate(-8deg); will-change: transform; background: radial-gradient(56% 30% at 22% 24%, rgba(72, 108, 208, 0.20), transparent 66%), radial-gradient(46% 25% at 74% 14%, rgba(158, 96, 206, 0.15), transparent 62%), radial-gradient(38% 21% at 50% 6%, rgba(72, 182, 196, 0.11), transparent 58%); } @media (prefers-reduced-motion: no-preference) { #night::after { animation: sky 132s var(--ease-glass) infinite; } } /* and once the dawn owns the sky, the aurora stops: a 132s infinite compositor animation otherwise wakes the compositor thread for the whole visit, including the passages where the layer is completely covered and cannot be seen (item 183) */ body.duskover #night::after { animation-play-state: paused; } @keyframes sky { 0%, 100% { transform: rotate(-8deg) translate3d(0, 0, 0) scale(1); } 50% { transform: rotate(-8deg) translate3d(3.5vw, 2vh, 0) scale(1.09); } } /* THE VIGNETTE, tinted and kneed (item 55). Pure black grey shifted every hue it crossed, it reached full value at the top corners where the crown should be brightest, and it had no knee, so it bit into the middle. Now it is the night's own hue, it is weakest at the crown and strongest at the floor corners, and it holds off until 52 per cent. */ #night::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(126% 104% at 50% 42%, transparent 52%, rgba(6, 6, 14, 0.24) 78%, rgba(4, 4, 10, 0.52) 100%), linear-gradient(180deg, transparent 0%, transparent 72%, rgba(5, 4, 10, 0.20) 100%); } /* THE TEMPERATURE ARC (item 181). The matter transmuted all the way down and the world around it stayed the same blue, which is exactly why the middle chapters read as an orange lamp in a cold room. One warm field, one opacity write, alpha ceilinged at the MEASURED 0.50 that keeps the smallest ink above the floor, on a late curve so the warmth arrives with the last third rather than tracking the wheel. */ #warm { position: fixed; inset: 0; z-index: -4; opacity: 0; will-change: opacity; pointer-events: none; background: radial-gradient(120% 62% at 50% 104%, rgba(196, 104, 48, 0.42), rgba(150, 74, 44, 0.14) 46%, transparent 76%), radial-gradient(90% 50% at 50% -10%, rgba(96, 60, 140, 0.28), transparent 64%); } /* ═══ THE DAWN ═══ The old dawn put its two warm bands at 50% 126% and 50% 134%, which is below the glass, so the emotional peak of the page rendered as a flat mauve with a bright arc clipped by the bottom edge. And its base ramp ended on oklch hue 311, a magenta 45 degrees from any dawn that has ever happened (items 174, 176). Now: #dawn is the atmospheric COLUMN (cold crown to warm floor, Rayleigh order), and #land is the clipped stage that owns the horizon, so the line and the sun can never drift apart at any viewport or in either tongue (item 177). */ #dawn { position: fixed; inset: -14vh 0; z-index: -3; opacity: 0; will-change: opacity; background: linear-gradient(180deg, #0a0b1a 0%, #12102a 28%, #1e1430 50%, #2e1a2c 68%, #431f24 86%, #55291d 100%); } #land { position: fixed; inset: 0; z-index: -3; opacity: 0; will-change: opacity; pointer-events: none; overflow: clip; } /* THE LAND SITS IN FRONT OF THE SUN (item 178). One layer could not do this job: with the ground behind it the disc rose straight through the footer, and the closing links sat on the brightest pixels of the page, which is the one thing #43 forbids. Now the world is built the way a world is: sky behind, ground in front, and the sun clipped by the line where they meet. The reader ends standing on the ground with the dawn above him. */ #ground { position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; top: var(--horizon, 72%); opacity: 0; will-change: opacity; pointer-events: none; background: linear-gradient(180deg, #140d16 0%, #0d0810 42%, #08060c 100%); } #ground .line { position: absolute; left: -2%; right: -2%; top: 0; height: 1px; transform: translateY(-1px); background: linear-gradient(90deg, transparent 0%, rgba(255, 226, 162, 0.24) 14%, rgba(255, 246, 216, 1) 50%, rgba(255, 226, 162, 0.24) 86%, transparent 100%); } #ground .haze { position: absolute; left: 0; right: 0; top: 0; height: 11vh; background: radial-gradient(64% 100% at 50% 0%, rgba(255, 222, 168, 0.34), rgba(255, 194, 128, 0.10) 46%, transparent 82%), linear-gradient(180deg, rgba(255, 206, 148, 0.13), rgba(214, 126, 78, 0.04) 44%, transparent); } /* the sky above the line: first light on the line, amber body under it, rose scatter bleeding up into the violet overhead. Every band is anchored to the HORIZON, so its percentages mean something at every window instead of at one (item 175). */ #land .sky { position: absolute; left: 0; right: 0; top: 0; height: var(--horizon, 72%); background: radial-gradient(32% 7% at 50% 100%, rgba(255, 232, 176, 0.20), transparent 84%), radial-gradient(72% 13% at 50% 102%, rgba(228, 132, 64, 0.13), transparent 88%), radial-gradient(112% 26% at 50% 112%, rgba(150, 70, 96, 0.09), transparent 84%); } /* THE GODRAYS. Six thin shafts on staggered breaths. Never a conic gradient: one wide enough to fan across a 1440 frame rasterises about 1350px square, which is memory the small night does not have (item 180). */ #land .rays { position: absolute; left: 50%; top: var(--horizon, 72%); width: 0; height: 0; } #land .rays i { position: absolute; left: 0; bottom: 0; width: 8vmax; height: 92vmax; transform-origin: 50% 100%; background: linear-gradient(to top, rgba(255, 226, 160, 0.075), rgba(255, 226, 160, 0.022) 44%, transparent 76%); opacity: 0; margin-left: -4vmax; } #land .rays i:nth-child(1) { transform: rotate(-44deg); } #land .rays i:nth-child(2) { transform: rotate(-31deg); } #land .rays i:nth-child(3) { transform: rotate(-17deg); } #land .rays i:nth-child(4) { transform: rotate(16deg); } #land .rays i:nth-child(5) { transform: rotate(30deg); } #land .rays i:nth-child(6) { transform: rotate(43deg); } @media (prefers-reduced-motion: no-preference) { #land .rays i { animation: ray 13s ease-in-out infinite; } #land .rays i:nth-child(2) { animation-duration: 17s; animation-delay: -3s; } #land .rays i:nth-child(3) { animation-duration: 11s; animation-delay: -6s; } #land .rays i:nth-child(4) { animation-duration: 19s; animation-delay: -2s; } #land .rays i:nth-child(5) { animation-duration: 15s; animation-delay: -8s; } #land .rays i:nth-child(6) { animation-duration: 21s; animation-delay: -5s; } } @keyframes ray { 0%, 100% { opacity: 0.26; } 50% { opacity: 0.62; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ THE BODY OF LIGHT The loudest defect on the property was here: a page whose first promise is real glass and real weight, showing a soft brush cloud with no limb, no highlight and no edge. The answer was not invented. It is the game's own Orb.shader, ported layer for layer: "a TRUE halo: bloom around the body's RIM, not a flood across its interior", inner 1/1.62 one light for the whole game, highlight centre (-0.34, 0.40), i.e. 33% / 30% of the disc a catchlight of radius one sixth, at (-0.28, +0.36) The old build flooded the interior, and that flood is exactly what landed inside the letters R and U of the wordmark (items 82, 83, 84, 85, 103). NO BLEND MODES. Every highlight is a plain rgba layer at a hand tuned alpha: on a body this bright the image is within a code value of screen, it costs no backdrop read, it needs no isolation, and it does not ask a mid range phone for a blended full bleed group. ═══════════════════════════════════════════════════════════════════════════════════════════ */ #field { position: fixed; inset: 0; z-index: -2; pointer-events: none; will-change: transform; } #orb { position: absolute; left: 50%; top: 44%; width: var(--orb); height: var(--orb); margin: calc(var(--orb) / -2) 0 0 calc(var(--orb) / -2); will-change: transform; opacity: 0; animation: born 1.9s var(--ease-arrive) 0.06s forwards; /* opacity only, so it can never collide with the driver's transform */ } @keyframes born { from { opacity: 0; } to { opacity: 1; } } /* THE HALO, outside the body, weighted at the rim. Three pre painted fields, crossfaded by the driver as the matter changes temperature, all three breathing together in OPACITY. The old build breathed the whole sphere by scale, which on a soft smudge was invisible and on a hard edged body reads as a balloon inflating: glass never does that (item 96). The floor is 0.86, never lower: the light is not dimmed, it breathes (#40). */ #orb .aura { position: absolute; inset: -31%; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { #orb .aura { animation: pant 7.4s ease-in-out infinite; } } @keyframes pant { 0%, 100% { opacity: 0.88; } 50% { opacity: 1; } } #orb .h { position: absolute; inset: 0; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, transparent 0%, transparent 54%, var(--rim1) 62%, var(--rim2) 69%, var(--rim3) 78%, transparent 96%); } #orb .h.cool { --rim1: rgba(176, 198, 240, 0.30); --rim2: rgba(140, 168, 220, 0.16); --rim3: rgba(110, 140, 200, 0.05); opacity: 1; } #orb .h.warm { --rim1: rgba(255, 176, 96, 0.32); --rim2: rgba(228, 128, 70, 0.17); --rim3: rgba(190, 90, 60, 0.055); } #orb .h.gold { --rim1: rgba(255, 226, 150, 0.40); --rim2: rgba(248, 200, 104, 0.22); --rim3: rgba(228, 168, 62, 0.075); } /* THE CHAPTER LOOPS live here and nowhere else, on scale alone, so they compose with the driver's transform instead of replacing it, and so the silhouette itself never jitters. All three share a midline of 1.008, which bounds the worst single frame jump at a class flip to about 1.2 per cent: there is no way to cross fade two keyframe animations on one property, so this bounds it rather than pretending to remove it (item 99). */ #orb .pulse { position: absolute; inset: 0; } #orb.hot .pulse { animation: heat 2.3s ease-in-out infinite; } #orb.beat .pulse { animation: beat 1667ms cubic-bezier(0.28, 0, 0.22, 1) infinite; } @keyframes heat { 0%, 100% { transform: scale(1.008); } 50% { transform: scale(1.019); } } /* 72 beats a minute, a two stroke with a real rest, because chapter IV is about music and the old loop was 25 bpm with seventy per cent of its cycle flat (item 98) */ @keyframes beat { 0% { transform: scale(1.008); } 7% { transform: scale(1.030); } 16% { transform: scale(1.010); } 23% { transform: scale(1.022); } 34% { transform: scale(1.008); } 100% { transform: scale(1.008); } } /* THE BODY. Its own circle clips every surface layer, so nothing needs a mask and the silhouette is exact. */ #orb .stack { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; } /* THE ELEVEN. Opaque matter now, at inset 0, with an edge: the limb falls in the last four per cent, which is what gives the sphere a terminator instead of a fade. The eleven mid stops are the game's own Molten Metals palette, verbatim from Cosmetics.cs (item 107). Their LIGHTNESS arc is flattened (item 102): measured, the old ramp fell 32.7 oklch lightness points between form 3 and form 9 and only recovered at form 10, so the middle of the descent read as the light going out rather than the matter growing rare. Hue and chroma carry the transmutation now; every form is as bright as every other. */ #orb .f { position: absolute; inset: 0; border-radius: 50%; opacity: 0; } /* THE FIRST FORM IS LIT BY THE STYLESHEET, not by the driver. The script sits at the end of the body, so the first painted frame used to carry no light at all and the moonstone popped in when the parser reached it; and with scripting off the sphere was never lit at all, on a page whose every word is already readable without it (items 119, 79). The driver overwrites this on its first frame. */ #orb .f1 { opacity: 1; } #orb .f { background: radial-gradient(circle at 33% 30%, var(--hi) 0%, var(--mid) 26%, var(--lo) 62%, var(--edge) 92%, var(--edge) 96%, transparent 99.5%); } #orb .f1 { --hi: #f6f9ff; --mid: #b9c2d0; --lo: #6d7787; --edge: #2b3242; } #orb .f2 { --hi: #fdf6f2; --mid: #d8c8c1; --lo: #8a7871; --edge: #34292a; } #orb .f3 { --hi: #fffaea; --mid: #e6d3a6; --lo: #97835a; --edge: #3a3020; } #orb .f4 { --hi: #fff6e2; --mid: #ecc173; --lo: #9d7434; --edge: #3b2a13; } #orb .f5 { --hi: #fff2dc; --mid: #eba552; --lo: #9a5f21; --edge: #3a2210; } #orb .f6 { --hi: #ffeed4; --mid: #e98b3c; --lo: #964f16; --edge: #371b0c; } #orb .f7 { --hi: #ffe9d2; --mid: #dd7042; --lo: #8e3d1c; --edge: #331409; } #orb .f8 { --hi: #ffe4d2; --mid: #cf5740; --lo: #85291c; --edge: #300e0a; } #orb .f9 { --hi: #ffdfd8; --mid: #b9404a; --lo: #741d26; --edge: #2c0a0f; } #orb .f10 { --hi: #fff9e0; --mid: #f0c24b; --lo: #a17b18; --edge: #3d2c07; } #orb .f11 { --hi: #fffdf4; --mid: #fbe9b0; --lo: #b8a05e; --edge: #463a1c; } /* THE WALL. A dark inner ring just inside the limb: glass reads as the contrast between its own thickness and its own edge, and this is the thickness (item 86). */ #orb .wall { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, transparent 0%, transparent 74%, rgba(6, 4, 12, 0.13) 86%, rgba(4, 3, 9, 0.30) 94%, rgba(4, 3, 9, 0.16) 99%, transparent 100%); } /* THE RIM LIGHT. A warm crescent hugging the shadow side, so the body separates from the night behind it instead of dissolving into it (item 87). */ #orb .back { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, transparent 0%, transparent 88%, rgba(255, 232, 190, 0.5) 96%, transparent 100%); mask-image: conic-gradient(from 232deg, transparent 0deg, #000 34deg, #000 118deg, transparent 156deg, transparent 360deg); -webkit-mask-image: conic-gradient(from 232deg, transparent 0deg, #000 34deg, #000 118deg, transparent 156deg, transparent 360deg); opacity: 0.9; } /* THE SPECULAR, at the game's own light position, and THE CATCHLIGHT: one crisp point of near white at a sixth of the radius. That single detail is what separates a jewel from a glow (items 84, 85). */ #orb .glint { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(26% 22% at 33% 30%, rgba(255, 253, 246, 0.62) 0%, rgba(255, 250, 238, 0.20) 40%, transparent 76%); } #orb .spark { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(7.5% 7.5% at 36% 32%, rgba(255, 255, 252, 0.96) 0%, rgba(255, 255, 250, 0.42) 46%, transparent 82%); } /* THE EXIT. Where the refraction comes back out the far side, which is what breaks the terminator and stops the shadow half reading as a hole (item 88). */ #orb .exit { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(20% 18% at 70% 72%, rgba(255, 238, 206, 0.20) 0%, rgba(255, 236, 200, 0.06) 52%, transparent 84%); } /* THE TRAVELLING BAND. The shader's sband. Once the silhouette is dead still, this is where the body's life comes from: a sheet of refraction crossing it on a long breath, transform only (item 89). */ #orb .sweep { position: absolute; inset: -20% -60%; border-radius: 50%; background: linear-gradient(74deg, transparent 34%, rgba(255, 246, 224, 0.10) 45%, rgba(255, 255, 255, 0.20) 50%, rgba(255, 246, 224, 0.09) 55%, transparent 66%); } @media (prefers-reduced-motion: no-preference) { #orb .sweep { animation: sweep 26s ease-in-out infinite; } } @keyframes sweep { 0%, 100% { transform: translate3d(-34%, 0, 0); } 50% { transform: translate3d(34%, 0, 0); } } /* THE MENISCUS. Glass always has a lip (item 90). */ #orb .lip { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, transparent 0%, transparent 92%, rgba(255, 250, 232, 0.55) 97.5%, transparent 100%); mask-image: linear-gradient(186deg, #000 0%, rgba(0, 0, 0, 0.42) 26%, transparent 46%); -webkit-mask-image: linear-gradient(186deg, #000 0%, rgba(0, 0, 0, 0.42) 26%, transparent 46%); } /* THE CUT. Wedges crossed with rings, on the game's own crossed cut, for the crystalline forms only: Moonstone, Pearl, Champagne and Garnet are minerals, and the page opens on one (item 92). */ #orb .cut { position: absolute; inset: 3%; border-radius: 50%; opacity: 0; background: repeating-conic-gradient(from 14deg at 50% 50%, rgba(255, 255, 255, 0.055) 0deg, transparent 9deg, transparent 18deg, rgba(0, 0, 0, 0.05) 27deg, transparent 36deg), repeating-radial-gradient(closest-side, transparent 0%, transparent 7%, rgba(255, 255, 255, 0.045) 9%, transparent 11%); } @media (prefers-reduced-motion: no-preference) { #orb .cut { animation: turn 74s linear infinite; } } @keyframes turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* MOONSTONE'S ADULARESCENCE. Its one famous optical property, and the page opens on it (item 95). */ #orb .schiller { position: absolute; inset: 0; border-radius: 50%; opacity: 0; background: radial-gradient(46% 30% at 62% 66%, rgba(150, 190, 235, 0.34) 0%, rgba(168, 204, 240, 0.12) 48%, transparent 84%); } /* COPPER'S MIRROR. The shader's Liquid Metal read: a sharp split with a hot line at the seam, so form seven looks like poured metal instead of orange fog (item 94). */ #orb .mirror { position: absolute; inset: 0; border-radius: 50%; opacity: 0; background: linear-gradient(159deg, rgba(255, 244, 220, 0.13) 0%, rgba(255, 236, 200, 0.03) 46%, rgba(255, 250, 232, 0.05) 55%, rgba(255, 250, 232, 0.22) 58.4%, rgba(255, 250, 232, 0.05) 62%, rgba(60, 26, 12, 0.09) 71%, rgba(30, 12, 6, 0.13) 100%); } /* THE DRESSED RING (chapter VI). It used to sit at inset 8%, i.e. at 84 per cent of the sphere, so it CUT ACROSS the body instead of circumscribing it, and a flat one pixel circle at one colour read as a wireframe. Now it is an annulus with a bright quadrant, outside the limb (item 105). */ #orb .ring { position: absolute; inset: -4%; border-radius: 50%; border: 1px solid rgba(232, 205, 143, 0.42); box-shadow: 0 0 26px rgba(240, 194, 75, 0.20), inset 0 0 20px rgba(240, 194, 75, 0.07); opacity: 0; transform: scale(1.1); transition: opacity var(--t-slow) ease, transform var(--t-slow) var(--ease-rise); } #orb .ring::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255, 244, 214, 0.9); mask-image: conic-gradient(from -58deg, #000 0deg, transparent 46deg, transparent 360deg); -webkit-mask-image: conic-gradient(from -58deg, #000 0deg, transparent 46deg, transparent 360deg); } #orb.dressed .ring { opacity: 1; transform: scale(1); } /* THE CAUSTIC. The pool of light the body throws beneath itself, tied to the dawn so it strengthens as the ground warms (item 91). */ #orb .caustic { position: absolute; left: -36%; right: -36%; top: 84%; height: 54%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 26%, rgba(255, 216, 152, 0.26) 0%, rgba(250, 188, 108, 0.10) 42%, transparent 78%); opacity: 0; } /* ═══ THE SKY: sixteen stars in four constellations ═══ Chapter V's copy promises sixteen stars in four constellations and the page showed five loose specks that never moved, which on a dark monitor read as dead pixels. The page must not be caught contradicting its own sentence (item 172). Fixed, full frame, because the copy says the sky is lit AROUND the light. Still DOM, still no canvas. */ #sky { position: fixed; inset: 0; z-index: -3; pointer-events: none; width: 100%; height: 100%; opacity: 0; transition: opacity 2.2s ease; } #sky.lit { opacity: 1; } #sky .join { stroke: rgba(226, 232, 248, 0.20); stroke-width: 0.7; fill: none; stroke-dasharray: 1 1000; stroke-dashoffset: 0; transition: stroke-dasharray 2.6s var(--ease-rise); } #sky.lit .join { stroke-dasharray: 1000 1000; } #sky circle { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0.3); transition: opacity 1.5s ease, transform 1.5s var(--ease-rise); } #sky.lit circle { opacity: 1; transform: scale(1); } /* lit outward from the light, not in DOM order: the old delays ran in markup order and markup order was spatially random, so the sky ignited by jumping about (item 172) */ #sky .g1 circle:nth-of-type(1) { transition-delay: 0.10s } #sky .g1 circle:nth-of-type(2) { transition-delay: 0.30s } #sky .g1 circle:nth-of-type(3) { transition-delay: 0.52s } #sky .g1 circle:nth-of-type(4) { transition-delay: 0.74s } #sky .g2 circle:nth-of-type(1) { transition-delay: 0.20s } #sky .g2 circle:nth-of-type(2) { transition-delay: 0.42s } #sky .g2 circle:nth-of-type(3) { transition-delay: 0.64s } #sky .g2 circle:nth-of-type(4) { transition-delay: 0.86s } #sky .g3 circle:nth-of-type(1) { transition-delay: 0.34s } #sky .g3 circle:nth-of-type(2) { transition-delay: 0.56s } #sky .g3 circle:nth-of-type(3) { transition-delay: 0.78s } #sky .g3 circle:nth-of-type(4) { transition-delay: 1.00s } #sky .g4 circle:nth-of-type(1) { transition-delay: 0.46s } #sky .g4 circle:nth-of-type(2) { transition-delay: 0.68s } #sky .g4 circle:nth-of-type(3) { transition-delay: 0.90s } #sky .g4 circle:nth-of-type(4) { transition-delay: 1.12s } #sky .g1 { --star: #cfe0ff; } /* nigredo, the cold first stage */ #sky .g2 { --star: #f4f2ea; } /* albedo, the white */ #sky .g3 { --star: #ffe8b0; } /* citrinitas, the yellowing */ #sky .g4 { --star: #ffc9b4; } /* rubedo, the red */ @media (prefers-reduced-motion: no-preference) { #sky.lit circle { animation: shimmer 6s ease-in-out infinite; } #sky.lit .g2 circle { animation-duration: 7.5s; animation-delay: -2s; } #sky.lit .g3 circle { animation-duration: 9s; animation-delay: -4s; } #sky.lit .g4 circle { animation-duration: 8s; animation-delay: -6s; } } @keyframes shimmer { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } } /* ═══ THE TWO QUIET DOORS ═══ They were rgba capsules: measured over the hero's top right they composited DARKER than their own surround, so each read as a grey chip floating in the corner, and at the dawn, where the ground turns warm, the same chip becomes a patch, which is what #43 refuses. Now they are inscriptions with a hairline that draws itself, at the touch floor, inside the safe area, and with the letter space compensation HALVED, because tracking adds its space after the last glyph too, so a centred label needs half the tracking, not all of it (items 44, 65, 62, 64). */ .home, .lang { position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 6; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-family: var(--inscr); font-weight: 300; font-size: var(--fs-inscr); letter-spacing: 0.3em; text-indent: 0.15em; text-transform: uppercase; color: var(--dim); /* THE CORNER MARKS ARE FIXED AND THE PAGE SCROLLS UNDER THEM, so their ground is whatever happens to be there: caught over the collections' ribbons, "STUDIO KIRILOV" sat on six saturated colour blocks. A tight dark outline hugging the glyphs is not the painted field #43 refuses (that was a soft patch behind a line, and he refused it on sight); it is the standard cure for type over an unpredictable ground, and at this radius it is invisible as a shape. The alternative, a capsule, is exactly what this pass removed. */ text-shadow: 0 1px 2px rgba(6, 5, 12, 0.95), 0 0 6px rgba(6, 5, 12, 0.75); transition: color var(--t-fast) ease, opacity var(--t-mid) ease, visibility var(--t-mid); } .home { left: max(var(--gutter), env(safe-area-inset-left, 0px)); } .lang { right: max(var(--gutter), env(safe-area-inset-right, 0px)); letter-spacing: 0.18em; text-indent: 0.09em; } .home::after, .lang::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 11px; height: 1px; background: currentColor; opacity: 0.28; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-arrive), opacity var(--t-fast) ease; } @media (hover: hover) and (pointer: fine) { .home:hover, .lang:hover { color: var(--gold-hi); } .home:hover::after, .lang:hover::after { transform: scaleX(1); opacity: 0.6; } } .home:focus-visible::after, .lang:focus-visible::after { transform: scaleX(1); } /* at the hero the studio door stands down, and it leaves the tab order with it, so a keyboard reader cannot focus something nobody can see (item 65) */ body.athero .home { opacity: 0; visibility: hidden; pointer-events: none; } /* ═══ THE ARRIVAL ═══ THE COMPOSITION MOVED, NOT THE PAINT (item 110). The light's bright core used to land inside the letters R and U at every desktop width, and behind the over line on a phone. Nothing is dimmed and no letter moves: the copy now sits in the upper two thirds and the light rises from below, so the first screen shows only its glow and the descent draws the matter up into view. That is also a better page: a hero with a real sky, a light source that explains why the wordmark is lit from the upper left, and a first gesture that feels like drawing the light up out of the vessel. */ .arrival { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; position: relative; padding: clamp(72px, 11vh, 132px) 24px 0; } .arrival .over { font-family: var(--inscr); font-weight: 300; font-size: var(--fs-inscr-l); letter-spacing: 0.42em; text-indent: 0.21em; word-spacing: 0.34em; /* under 0.42em of tracking the words dissolve into one row of separated letters: the gap ratio was 1.50 (item 123) */ text-transform: uppercase; color: var(--dim); font-feature-settings: "case" 1; animation: settle 1.05s var(--ease-settle) 0.62s both; } .arrival .over a { color: inherit; border-bottom: 1px solid transparent; transition: color var(--t-fast) ease, border-color var(--t-fast) ease; } @media (hover: hover) and (pointer: fine) { .arrival .over a:hover { color: var(--gold-hi); border-color: rgba(232, 205, 143, 0.5); } } h1.title { font-family: var(--mark); font-weight: 500; font-size: var(--fs-title); line-height: 1; white-space: nowrap; letter-spacing: 0.14em; text-indent: 0.07em; /* half the tracking, so the ink is truly centred (item 44) */ margin-top: 2.4vh; /* REAL METAL (items 112, 113). A pale to dark ramp is paint; metal is a value REVERSAL: light, a dark horizon, light again. And the axis is 180deg, not 168deg, because at 168deg the M rendered measurably darker than the A, which reads as a lighting mistake rather than as gold. Every stop is mapped onto the CAP BAND, not the box: Cormorant's content box is 1.211em against a 0.625em cap height, so with line-height 1 the caps occupy 19.4% to 81.9% of the box and the old ramp spent its brightest and darkest stops in the leading, where there is no ink at all. */ background: linear-gradient(180deg, #fffaf0 19.4%, #f8e6ba 27%, #e8c281 38%, #ad8138 48%, #7d5a24 52%, #d9ad55 57%, #fff2cc 65%, #eecb8b 74%, #a2782f 81.9%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* struck into the night, and emitting: the 1px dark and -1px warm give the letters an edge, the 46px bloom makes the gold sit ON the night rather than in it */ text-shadow: 0 1px 1px rgba(3, 4, 9, 0.5), 0 -1px 0 rgba(255, 248, 226, 0.06), 0 0 46px rgba(240, 194, 75, 0.10); animation: titleset 1.35s cubic-bezier(0.16, 1, 0.24, 1) 0.18s both; } /* with leading trim the box IS the cap band, so the same ramp maps 0 to 100 (item 117) */ @supports (text-box: trim-both cap alphabetic) { h1.title { text-box: trim-both cap alphabetic; background: linear-gradient(180deg, #fffaf0 0%, #f8e6ba 12%, #e8c281 30%, #ad8138 46%, #7d5a24 52%, #d9ad55 60%, #fff2cc 71%, #eecb8b 84%, #a2782f 100%); -webkit-background-clip: text; background-clip: text; } .finale .begin { text-box: trim-both cap alphabetic; } } h1.title::selection, h1.title span::selection { -webkit-text-fill-color: #fff6dc; } @keyframes titleset { from { opacity: 0; transform: translateY(9px) scale(1.014); } to { opacity: 1; transform: none; } } .arrival .work { font-family: var(--display); font-style: italic; font-weight: 300; font-size: var(--fs-disp-s); color: var(--read); /* it was --dim, the palette's faintest value, immediately under a wordmark whose ramp ends at #a2782f, so the two nearly matched. For a Bulgarian reader this line IS the title (item 120) */ margin-top: 1.9vh; letter-spacing: 0.012em; animation: settle 1.05s ease 0.80s both; } .arrival .line { font-family: var(--body); font-weight: 300; font-size: var(--fs-lead); line-height: 1.72; color: var(--read); max-width: 26em; margin: 3.2vh auto 0; text-wrap: balance; /* balance, not pretty: pretty is Chromium first and could not fix a 30em box, so both tongues orphaned two words (item 121). The sentences are also split in the markup, so the break is deterministic in every engine */ animation: settle 1.05s ease 0.98s both; } .arrival .line span { display: block; } .arrival .stores { font-family: var(--inscr); font-weight: 300; font-size: var(--fs-inscr); letter-spacing: 0.3em; text-indent: 0.15em; word-spacing: 0.26em; text-transform: uppercase; color: var(--dim); font-feature-settings: "case" 1; margin-top: 4vh; animation: settle 1.1s ease 1.18s both; } .arrival .stores b { font-weight: 300; font-family: var(--display); font-style: italic; text-transform: none; } .arrival .stores span { display: inline-block; } /* the two halves break as plates, so no line can ever end on an ampersand (item 122) */ /* THE CUE. It was clipped to one pixel: a 1px rail with overflow hidden containing a 3px drop with a 10px bloom, so the drop and its entire glow were cut away and only a hairline showed. That is the whole reason nobody could see it (item 125). Now the clip holds the drop, the rail measures above 3:1, and the drop falls INTO the rising light instead of into nothing. */ .arrival .cue { position: absolute; bottom: calc(23vh + env(safe-area-inset-bottom, 0px)); left: 50%; width: 9px; height: 92px; transform: translateX(-50%); overflow: hidden; opacity: 0; animation: cuein 1.1s ease 1.72s both; } .arrival .cue::before { content: ""; position: absolute; left: 4px; top: 0; width: 1px; height: 100%; background: linear-gradient(to bottom, rgba(226, 194, 112, 0.06), rgba(226, 194, 112, 0.72)); } .arrival .cue::after { content: ""; position: absolute; left: 2.5px; top: 0; width: 4px; height: 17px; border-radius: 3px; background: linear-gradient(to bottom, rgba(255, 246, 220, 0), #ffe89a 60%, #f0c24b); box-shadow: 0 0 7px 1px rgba(240, 194, 75, 0.7), 0 0 18px 3px rgba(240, 194, 75, 0.28); animation: fall 2.9s cubic-bezier(0.5, 0, 0.5, 1) 2.4s infinite; } @keyframes fall { 0% { transform: translateY(-20px); opacity: 0; } 18% { opacity: 1; } 74% { opacity: 1; } 100% { transform: translateY(92px); opacity: 0; } } @keyframes cuein { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%); } } /* a fade, not a snap: a property inside an animation's fill phase cannot transition, so the old rule needed !important and still jumped (item 126) */ body.moved .arrival .cue { animation: cueout 0.6s ease both; } @keyframes cueout { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } @keyframes settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* THE MATTER ON THE FIRST SCREEN (item 128). The page promises real glass and showed none. Two pieces of it rest at the brim, flanking the cue, drawn by the same light as the body. */ .arrival .matter { position: absolute; bottom: calc(21vh + env(safe-area-inset-bottom, 0px)); left: 50%; width: 0; height: 0; animation: settle 1.4s ease 1.5s both; } .arrival .matter i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 33% 30%, var(--hi) 0%, var(--mid) 26%, var(--lo) 64%, var(--edge) 93%, transparent 99%); box-shadow: 0 0 18px 2px rgba(180, 200, 240, 0.10); } .arrival .matter i:nth-child(1) { --hi: #f6f9ff; --mid: #b9c2d0; --lo: #6d7787; --edge: #2b3242; width: 24px; height: 24px; left: -80px; bottom: -12px; } .arrival .matter i:nth-child(2) { --hi: #fdf6f2; --mid: #d8c8c1; --lo: #8a7871; --edge: #34292a; width: 17px; height: 17px; left: 63px; bottom: -8.5px; } /* ═══════════════════════════════════════════════════════════════════════════════════════════ THE CHAPTERS The page's structural weakness was never a lack of ornament, it was UNIFORMITY: measured at 1440x900, the seven gaps between text blocks were 530, 583, 538, 538, 553, 507 and 468px, which is 3,717 of 6,768 pixels, 55 per cent of the descent, spent on nothing, and six of the seven within 76 pixels of each other. So min-height 92vh is gone and the air is composed per chapter, on the cell, where it can be exact (item 131). Both cells are left aligned now and the alternation is carried by COLUMN and by a hairline spine (item 133): a ragged left edge on running prose is a real cost, and Bulgarian pays it twice, because its words run to fifteen characters. ═══════════════════════════════════════════════════════════════════════════════════════════ */ .chapter { display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; max-width: min(1400px, 92vw); margin: 0 auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); } /* the air table: variance, not a metronome. Each chapter breathes differently, and the pair before the finale closes so the page tightens exactly where it used to die. */ #c1 { padding-block: 9vh 13vh; } #c2 { padding-block: 15vh 11vh; } #c3 { padding-block: 12vh 15vh; } #c4 { padding-block: 16vh 10vh; } #c5 { padding-block: 11vh 14vh; } #c6 { padding-block: 14vh 62vh; } .chapter .cell { grid-column: 1; justify-self: start; text-align: left; max-width: var(--measure); position: relative; z-index: 2; } .chapter.alt .cell { grid-column: 2; justify-self: end; } /* the spine: it always faces AWAY from the light, so it edges the column rather than crossing it */ .chapter .cell { padding-left: 26px; border-left: 1px solid rgba(232, 205, 143, 0.13); } .chapter.alt .cell { padding-left: 0; padding-right: 26px; border-left: none; border-right: 1px solid rgba(232, 205, 143, 0.13); } /* THE FOLIO. Half of every chapter's grid carried nothing at all. The numeral goes there as a hollow watermark in the outer margin, behind the instrument and behind the copy, with the light passing behind all of it: the numeral's counters are where the light shines through (items 134, 135). The small roman numeral is gone from the kicker, so the frame never states it twice. */ .chapter .folio { position: absolute; top: 50%; z-index: 0; font-family: var(--display); font-weight: 500; font-style: normal; font-size: clamp(120px, 21vw, 320px); line-height: 0.8; transform: translateY(-50%); color: transparent; -webkit-text-stroke: 1px rgba(232, 205, 143, 0.10); background: linear-gradient(180deg, rgba(232, 205, 143, 0.035), rgba(232, 205, 143, 0.008)); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; } .chapter .folio { right: -0.06em; } .chapter.alt .folio { right: auto; left: -0.06em; } .chapter .num { font-family: var(--display); font-weight: 300; font-variant-caps: small-caps; /* REAL small caps, verified present in the cut faces for Latin AND Cyrillic, so both tongues get true small capitals instead of Inter's faux caps (items 42, 26) */ font-size: var(--fs-num); color: var(--gold); letter-spacing: 0.13em; text-indent: 0.065em; font-feature-settings: "case" 1; } .chapter h2 { font-family: var(--display); font-weight: 300; /* Light, not Medium. There is no Cormorant Medium Italic on disk, so a Medium head with an italic accent fell back to the 300 italic and every gold emphasis word rendered TWO HUNDRED weight units lighter than the roman beside it. At 300 the pair matches exactly, and the 666 KB Light face the property downloaded and never used finally sets something (items 14, 15, 38) */ font-size: var(--fs-h2); line-height: 1.14; color: var(--ink); margin-top: 0.5em; text-wrap: balance; letter-spacing: 0.004em; } .chapter.alt h2 { margin-left: auto; } .chapter h2 em { font-style: italic; color: var(--gold-hi); } .chapter p { font-size: var(--fs-body); line-height: 1.7; margin-top: 1.1em; /* em, not vh: a type block's internal proportions must not drift with the window's height (item 141) */ text-wrap: pretty; hyphens: auto; } .chapter p .lead { font-family: var(--display); font-variant-caps: small-caps; font-size: 1.16em; letter-spacing: 0.06em; color: var(--ink); } /* THE ELEVEN BEADS. One per form, in that form's own hex from the game's palette table, lit from the same 33/30 position as the body, on the cap line rather than the baseline, with a real gap instead of a middot and two hard spaces doing a gap's job (items 107, 108, 148). */ .chapter .forms { margin-top: 1.9em; display: flex; flex-wrap: wrap; align-items: center; gap: 0.7em 1.6em; font-family: var(--display); font-weight: 300; font-variant-caps: small-caps; font-size: var(--fs-num); letter-spacing: 0.14em; color: var(--dim); } .chapter.alt .forms { justify-content: flex-end; } .chapter .forms span { display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap; } .chapter .forms b { font-weight: 300; width: 0.62em; height: 0.62em; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0%, var(--c) 42%, color-mix(in oklab, var(--c) 62%, #14100c) 88%, color-mix(in oklab, var(--c) 34%, #0a0810) 100%); box-shadow: 0 0 5px color-mix(in oklab, var(--c) 60%, transparent); vertical-align: middle; flex: none; transform: translateY(-0.06em); } @supports not (background: color-mix(in oklab, red 50%, blue)) { .chapter .forms b { background: radial-gradient(circle at 34% 30%, #fff 0%, var(--c) 46%, rgba(10, 8, 16, 0.55) 100%); } } /* the canonical eleven, Cosmetics.cs "Molten Metals" (DefaultOwned), verbatim */ .f-1 { --c: #b9c2d0 } .f-2 { --c: #d8c8c1 } .f-3 { --c: #e6d3a6 } .f-4 { --c: #ecc173 } .f-5 { --c: #eba552 } .f-6 { --c: #e98b3c } .f-7 { --c: #dd7042 } .f-8 { --c: #cf5740 } .f-9 { --c: #b9404a } .f-10 { --c: #f0c24b } .f-11 { --c: #fbe9b0 } /* THE INSTRUMENTS. One drawn thing from the game per chapter, in the column the copy does not use, in front of the folio and behind the light (item 136). Chapter V has none: its instrument is the whole sky. */ .chapter .kit { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; z-index: 1; width: min(92%, 340px); color: rgba(232, 205, 143, 0.55); pointer-events: none; } .chapter.alt .kit { grid-column: 1; justify-self: start; } .chapter .kit svg { width: 100%; height: auto; display: block; overflow: visible; } .chapter .kit .hair { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; } /* THE INSTRUMENTS CARRY NO LABEL. At 9.5px they were the smallest text on the property, and the light swings AWAY from the copy, which means it swings toward the instrument: "Salt" measured 1.71:1 on the sphere at 2560. The paragraph beside the sigils names Quicksilver, Sulphur and Salt in its own first three sentences, so the label was saying twice what the page already said once, in the one place where it could not be read (item 43). */ /* one frame of patience at boot: everything already on screen is marked arrived WITHOUT its transition, so a reader who reloads at chapter IV does not watch the paragraph he was reading fade in from nothing (item 70) */ html.boot .rise > *, html.boot .rise.in > * { transition: none !important; animation: none !important; } /* II · the three reagents, drawn as the marks they are rather than pulled from Unicode's alchemical block, which no shipped face covers */ .kit-sigils .hair { stroke-width: 1.1; } .kit-sigils .g { transition: opacity 0.8s ease; } /* III · the vessel and the brim: one hairline glass that fills, and a brim that warms as the work approaches it. The whole of chapter III is one honest risk decision, and the page answered it with a sub pixel tremble nobody could see (item 136). */ .kit-vessel { position: relative; } .kit-vessel .lvl { transform-origin: 50% 100%; transform: scaleY(0.18); transition: transform 1.2s var(--ease-glass); } .in .kit-vessel .lvl { animation: fillup 7.5s var(--ease-glass) infinite; } @keyframes fillup { 0%, 6% { transform: scaleY(0.16) } 44% { transform: scaleY(0.82) } 52% { transform: scaleY(0.86) } 60% { transform: scaleY(0.2) } 100% { transform: scaleY(0.16) } } .kit-vessel .brim { opacity: 0.28; transition: opacity 0.6s ease; } .in .kit-vessel .brim { animation: brimwarm 7.5s var(--ease-glass) infinite; } @keyframes brimwarm { 0%, 10% { opacity: 0.22 } 46% { opacity: 1 } 56% { opacity: 0.9 } 62%, 100% { opacity: 0.22 } } .kit-vessel .pour { opacity: 0; } .in .kit-vessel .pour { animation: pour 7.5s var(--ease-glass) infinite; } @keyframes pour { 0%, 52% { opacity: 0 } 56% { opacity: 1 } 66%, 100% { opacity: 0 } } /* I · the merge: two pieces of glass glide into one, which is the game's core verb */ .kit-merge { position: relative; height: 150px; } .kit-merge i { position: absolute; top: 50%; border-radius: 50%; background: radial-gradient(circle at 33% 30%, var(--hi) 0%, var(--mid) 28%, var(--lo) 66%, var(--edge) 94%, transparent 99%); } .kit-merge .a { --hi: #f6f9ff; --mid: #b9c2d0; --lo: #6d7787; --edge: #2b3242; width: 52px; height: 52px; margin-top: -26px; left: 22%; } .kit-merge .b { --hi: #f6f9ff; --mid: #b9c2d0; --lo: #6d7787; --edge: #2b3242; width: 52px; height: 52px; margin-top: -26px; left: 58%; } .kit-merge .c { --hi: #fdf6f2; --mid: #d8c8c1; --lo: #8a7871; --edge: #34292a; width: 68px; height: 68px; margin-top: -34px; left: 50%; margin-left: -34px; opacity: 0; } @media (prefers-reduced-motion: no-preference) { .in .kit-merge .a { animation: glideR 4.6s var(--ease-glass) 0.4s infinite; } .in .kit-merge .b { animation: glideL 4.6s var(--ease-glass) 0.4s infinite; } .in .kit-merge .c { animation: became 4.6s var(--ease-glass) 0.4s infinite; } } @keyframes glideR { 0%, 8% { transform: translateX(0); opacity: 1 } 40%, 100% { transform: translateX(64px); opacity: 0 } } @keyframes glideL { 0%, 8% { transform: translateX(0); opacity: 1 } 40%, 100% { transform: translateX(-64px); opacity: 0 } } @keyframes became { 0%, 36% { opacity: 0; transform: scale(0.7) } 46% { opacity: 1; transform: scale(1.06) } 54%, 88% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(1) } } /* IV · the beat: six unions on a rail, and one chair kept empty */ .kit-beat { position: relative; height: 120px; } .kit-beat .rail { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 205, 143, 0.34) 12%, rgba(232, 205, 143, 0.34) 88%, transparent); } .kit-beat b { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #e8cd8f; box-shadow: 0 0 8px rgba(240, 194, 75, 0.5); } .kit-beat b:nth-of-type(1) { left: 12% } .kit-beat b:nth-of-type(2) { left: 27% } .kit-beat b:nth-of-type(3) { left: 42% } .kit-beat b:nth-of-type(4) { left: 57% } .kit-beat b:nth-of-type(5) { left: 72% } .kit-beat b.empty { left: 87%; background: none; border: 1px solid rgba(232, 205, 143, 0.6); box-shadow: none; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; } .kit-beat .track { position: absolute; top: 50%; left: 12%; width: 75%; height: 0; } .kit-beat .trav { position: absolute; top: 0; left: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff6dc; box-shadow: 0 0 10px 2px rgba(255, 246, 220, 0.7); } @media (prefers-reduced-motion: no-preference) { .in .kit-beat .track { animation: travel 5s steps(1, end) infinite; } .in .kit-beat b:nth-of-type(1) { animation: ping 5s 0s infinite } .in .kit-beat b:nth-of-type(2) { animation: ping 5s 0.833s infinite } .in .kit-beat b:nth-of-type(3) { animation: ping 5s 1.666s infinite } .in .kit-beat b:nth-of-type(4) { animation: ping 5s 2.5s infinite } .in .kit-beat b:nth-of-type(5) { animation: ping 5s 3.333s infinite } } /* the wrapper spans the five occupied seats exactly, so one fifth of it is one seat, at every width, and the sixth seat at 100% is the one the traveller never takes: that IS the copy */ @keyframes travel { 0% { transform: translateX(0) } 20% { transform: translateX(20%) } 40% { transform: translateX(40%) } 60% { transform: translateX(60%) } 80% { transform: translateX(80%) } 100% { transform: translateX(0) } } @keyframes ping { 0%, 8% { transform: scale(1) } 3% { transform: scale(1.9) } 100% { transform: scale(1) } } /* VI · the collections: six ribbons, each woven from that palette's own eleven colours, so the picture is literally the game's data (Cosmetics.cs) */ .kit-ribbons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; height: 168px; } .kit-ribbons i { border-radius: 2px; position: relative; opacity: 0.88; box-shadow: inset 0 0 0 1px rgba(255, 246, 220, 0.10), inset 0 -18px 26px -12px rgba(8, 6, 14, 0.55), inset 0 18px 26px -12px rgba(8, 6, 14, 0.4); } .kit-ribbons i:nth-child(1) { background: linear-gradient(180deg, #b9c2d0, #d8c8c1 10%, #e6d3a6 20%, #ecc173 30%, #eba552 40%, #e98b3c 50%, #dd7042 60%, #cf5740 70%, #b9404a 80%, #f0c24b 90%, #fbe9b0); } .kit-ribbons i:nth-child(2) { background: linear-gradient(180deg, #e7c4cf, #c9a6e0 10%, #9b6fc9 20%, #6f74d6 30%, #3f96c9 40%, #33ad8a 50%, #8fc24a 60%, #e3b94a 70%, #e0743a 80%, #c23a52 90%, #eaf2ff); } .kit-ribbons i:nth-child(3) { background: linear-gradient(180deg, #cdd2da, #c0a89a 10%, #c66a4a 20%, #e0a85a 30%, #d8b483 40%, #e8c878 50%, #5fb0c0 60%, #4a6fc0 70%, #6b4a9c 80%, #f5c542 90%, #fdf3d0); } .kit-ribbons i:nth-child(4) { background: linear-gradient(180deg, #c8ccd4, #aab0bc 10%, #8b909c 20%, #727783 30%, #5b606b 40%, #6f6448 50%, #8a7438 60%, #a98a34 70%, #cba63f 80%, #e8c24a 90%, #f7e8b0); } .kit-ribbons i:nth-child(5) { background: linear-gradient(180deg, #d3d2e8, #b0aede 10%, #8d86d2 20%, #6f63c4 30%, #5a4bb0 40%, #6a4fb8 50%, #8460c8 60%, #a07cd8 70%, #c09ce8 80%, #d9bef5 90%, #f1e8ff); } .kit-ribbons i:nth-child(6) { background: linear-gradient(180deg, #f2dfe2, #ecc6cf 10%, #e3a9b8 20%, #db8aa0 30%, #d06c8a 40%, #c75078 50%, #d0696a 60%, #db8a5a 70%, #e0a85a 80%, #ecc873 90%, #fdeccb); } /* THE ARRIVALS AND THE DEPARTURES. The page had arrivals and no departures, while the reading rooms had both. The entry moved off the block and onto its CHILDREN, with the travel proportional to the type's own size and the delays in reading order, and a recede leg so the page learns to let go (item 137). Scroll driven where the engine has it, so it answers the hand and not a timer; an observer is the fallback, at threshold 0 with a negative margin, so a block taller than the glass can never be left blank (items 138, 139). */ .rise > * { --r: 22px; } .rise h2 { --r: 30px; } .rise .num { --r: 16px; } html.js .rise > * { opacity: 1; transform: translateY(var(--r)); } html.js .rise.in > * { opacity: 1; transform: none; transition: opacity 0.95s ease, transform 0.95s var(--ease-rise); } html.js .rise.in > *:nth-child(1) { transition-delay: 0s } html.js .rise.in > *:nth-child(2) { transition-delay: 0.09s } html.js .rise.in > *:nth-child(3) { transition-delay: 0.18s } html.js .rise.in > *:nth-child(4) { transition-delay: 0.27s } html.js .rise.in > *:nth-child(5) { transition-delay: 0.36s } html.js .rise.in > *:nth-child(6) { transition-delay: 0.45s } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { html.js .rise > * { opacity: 1; transform: none; animation: assemble linear both, recede linear forwards; animation-timeline: view(), view(); animation-range: cover 1% cover 15%, cover 90% cover 100%; transition: none; } html.js .rise.in > * { transition: none; } } } /* THE ARRIVAL IS A LIFT, AND CARRIES NO FADE AT ALL. Measured three times over: whatever floor a fade-in starts from, a reader can rest inside the range and the run is judged there. At 0.72 a chapter paragraph measured 4.48:1 against 4.5. The travel is the arrival; the ink never leaves full value; and the whole class of failure is gone rather than tuned. It is also the calmer gesture: a fade up from nothing is the most template-looking motion on the web (items 41, 137). */ @keyframes assemble { from { opacity: 1; transform: translateY(var(--r)); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { html.js .rise > .num, html.js .rise > .forms { animation: liftonly linear both; animation-timeline: view(); animation-range: cover 1% cover 15%; } } } @keyframes liftonly { from { opacity: 1; transform: translateY(var(--r)); } to { opacity: 1; transform: none; } } @keyframes recede { from { opacity: 1; transform: none; } to { opacity: 0.87; transform: translateY(-9px); } } /* ═══ THE ELEVEN: the seventh moment ═══ The page counted to eleven in its first line and named ten, and the eleventh form is the game's own name (GameConfig.cs). This plate is where the page finally says it, and it occupies exactly the passage that measured as the emptiest frame on the whole descent, so the dawn gets a screen of its own and not one empty frame is added (items 4, 171). */ .eleven { max-width: min(1400px, 92vw); margin: 0 auto; padding: 9vh max(var(--gutter), env(safe-area-inset-left, 0px)) 27vh; text-align: center; } .eleven .num { display: block; font-family: var(--display); font-weight: 300; font-variant-caps: small-caps; font-size: var(--fs-num); letter-spacing: 0.13em; color: var(--gold); } .eleven h2 { font-family: var(--display); font-weight: 300; font-size: var(--fs-h2); line-height: 1.14; color: var(--ink); margin-top: 0.45em; text-wrap: balance; } .eleven h2 em { font-style: italic; color: var(--gold-hi); } .eleven p { font-size: var(--fs-body); line-height: 1.7; margin: 1.1em auto 0; max-width: 34em; text-wrap: pretty; } body.duskover .eleven p, body.duskover .eleven h2 { color: #fbf5e8; } body.duskover .eleven .num { color: #ffdf9a; } body.duskover .eleven .ladder .nm { color: #fffaf0; } .eleven .ladder { margin-top: 4.4vh; list-style: none; display: grid; grid-template-columns: repeat(11, 1fr); align-items: end; gap: 0 clamp(4px, 0.8vw, 14px); position: relative; } .eleven .ladder::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 165, 88, 0.16) 8%, rgba(232, 205, 143, 0.7) 50%, rgba(201, 165, 88, 0.16) 92%, transparent); } .eleven .ladder li { display: flex; flex-direction: column-reverse; justify-content: flex-start; align-items: center; gap: 0.7em; } .eleven .ladder .seat { display: flex; align-items: flex-end; justify-content: center; height: 62px; } .eleven .ladder b { display: block; border-radius: 50%; font-weight: 300; background: radial-gradient(circle at 34% 30%, #fff 0%, var(--c) 40%, color-mix(in oklab, var(--c) 60%, #14100c) 86%, color-mix(in oklab, var(--c) 30%, #0a0810) 100%); box-shadow: 0 0 12px color-mix(in oklab, var(--c) 46%, transparent); transition: transform 0.5s var(--ease-arrive), box-shadow 0.5s ease; } /* the ladder is a ladder: each bead is the size of its own form, on the game's own radii */ .eleven .ladder li:nth-child(1) b { width: 12px; height: 12px } .eleven .ladder li:nth-child(2) b { width: 15px; height: 15px } .eleven .ladder li:nth-child(3) b { width: 18px; height: 18px } .eleven .ladder li:nth-child(4) b { width: 22px; height: 22px } .eleven .ladder li:nth-child(5) b { width: 26px; height: 26px } .eleven .ladder li:nth-child(6) b { width: 30px; height: 30px } .eleven .ladder li:nth-child(7) b { width: 35px; height: 35px } .eleven .ladder li:nth-child(8) b { width: 40px; height: 40px } .eleven .ladder li:nth-child(9) b { width: 45px; height: 45px } .eleven .ladder li:nth-child(10) b { width: 52px; height: 52px } .eleven .ladder li:nth-child(11) b { width: 60px; height: 60px } .eleven .ladder .nm { font-family: var(--display); font-weight: 300; font-variant-caps: small-caps; font-size: var(--fs-inscr); letter-spacing: 0.1em; color: var(--dim); writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); height: 9.8em; white-space: nowrap; } .eleven .ladder .pt { font-family: var(--display); font-weight: 300; font-size: var(--fs-num); color: var(--gold); font-variant-numeric: oldstyle-nums; } body.duskover .eleven .ladder .pt { color: #fff0c6; } .eleven .ladder li:last-child .nm { color: var(--gold-hi); } @media (hover: hover) and (pointer: fine) { .eleven .ladder li:hover b { transform: scale(1.18); box-shadow: 0 0 22px color-mix(in oklab, var(--c) 70%, transparent); } .eleven .ladder li:hover .nm { color: var(--ink); } } /* ═══ THE DAWN'S CLOSE ═══ */ .finale { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6vh 24px calc(4vh + env(safe-area-inset-bottom, 0px)); position: relative; } .finale .begin { font-family: var(--display); font-weight: 500; font-size: var(--fs-begin); line-height: 1.14; text-wrap: balance; /* the old ramp REVERSED direction in its last two stops, so on a single line the type darkened to orange and then lightened again inside the descenders (item 190) */ background: linear-gradient(180deg, #fff8e4 0%, #ffe6a6 26%, #f3ba62 54%, #e08a44 78%, #c97a3c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: 0 0 40px rgba(240, 160, 75, 0.12); } .finale .begin::selection { -webkit-text-fill-color: #fff6dc; } .finale .vow { font-family: var(--display); font-style: italic; font-weight: 300; font-size: var(--fs-disp-s); line-height: 1.4; color: #fff8ea; margin-top: 1.5em; letter-spacing: 0.008em; max-width: 22em; } .finale .vow span { display: block; } /* THE STUDIO'S STRONGEST COMMERCIAL SENTENCE, out of fine print. It was 11.5px uppercase at 0.3em tracking, byte for byte the same treatment as the colophon (item 192). */ .finale .noads { font-family: var(--display); font-weight: 300; font-size: var(--fs-disp-s); line-height: 1.4; color: var(--gold-hi); margin-top: 1.6em; position: relative; padding-top: 1.5em; } .finale .noads::before { content: ""; position: absolute; left: 50%; top: 0; width: 74px; height: 1px; margin-left: -37px; background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-hi) 50%, var(--gold) 70%, transparent); } .finale .noads i { font-style: normal; color: var(--ink); } /* THE ONE FILLED OBJECT ON THE PAGE, AND IT IS THE LIVE ACTION (item 185). The page's whole visual weight used to sit on two dead spans while its only working action was a small italic mailto underneath them. */ .finale .call { margin-top: 3.4vh; display: flex; flex-direction: column; align-items: center; gap: 2.4vh; } .finale .tell { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.8em; min-height: 52px; padding: 15px 34px; font-family: var(--display); font-weight: 500; font-size: var(--fs-tell); letter-spacing: 0.02em; color: #21160a; background: linear-gradient(180deg, #ffeec2 0%, #f3cf82 42%, #dcae55 72%, #c9a558 100%); border-radius: 2px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 244, 214, 0.35) inset, 0 1px 0 rgba(255, 252, 240, 0.6) inset; transition: transform var(--t-fast) var(--ease-arrive), box-shadow var(--t-fast) ease; } .finale .tell .seal { width: 0.62em; height: 0.62em; transform: rotate(45deg); background: #21160a; flex: none; opacity: 0.72; } @media (hover: hover) and (pointer: fine) { .finale .tell:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), 0 0 34px rgba(240, 194, 75, 0.24), 0 0 0 1px rgba(255, 244, 214, 0.5) inset, 0 1px 0 rgba(255, 252, 240, 0.7) inset; } } .finale .tell:active { transform: translateY(0); } /* THE TWO STORE GATES, as open topped plaques. No fill, no shadow, no hover, no cursor, no tab stop. They read as broken today precisely BECAUSE they carry every affordance of a button (a filled body, a rim, a 30px drop shadow, a hover lift, a sweeping underline) and do nothing. A frame open at the top reads as a threshold; a filled shadowed rectangle that lifts under the pointer and does nothing reads as a button that failed to load. Removing the fill is also the honest answer under #43: you remove a dark field from behind a line of text, you do not brighten it. And no vendor mark is drawn: a redrawn Apple or Google glyph on a page with no live listing is a trademark exposure taken for decoration (items 186, 187). */ .finale .doors { margin-top: 3vh; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .finale .door { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.7em; min-width: 190px; min-height: 48px; padding: 14px 26px; font-family: var(--inscr); font-weight: 300; font-size: var(--fs-inscr); letter-spacing: 0.24em; text-indent: 0.12em; text-transform: uppercase; color: var(--dim); font-feature-settings: "case" 1; border: 1px solid rgba(201, 165, 88, 0.30); border-top-color: transparent; border-radius: 2px; background: none; } .finale .door .gate { width: 13px; height: 15px; flex: none; opacity: 0.75; } .finale .door .gate .hair { fill: none; stroke: currentColor; stroke-width: 1; } /* one very slow light passes along the sill, and only while the finale is actually on screen, so nothing runs unseen for six thousand pixels */ .finale .door::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 194, 75, 0.55), transparent); transform: translateX(-100%); } @media (prefers-reduced-motion: no-preference) { body.atend .finale .door::after { animation: sill 7s ease-in-out infinite; } body.atend .finale .door:nth-child(2)::after { animation-delay: -3.5s; } } @keyframes sill { 0% { transform: translateX(-100%) } 55%, 100% { transform: translateX(100%) } } .finale .when { margin-top: 1.9vh; font-family: var(--inscr); font-weight: 300; font-size: var(--fs-inscr); letter-spacing: 0.26em; text-indent: 0.13em; text-transform: uppercase; color: var(--read); font-feature-settings: "case" 1; } body.atend .finale .door { color: #fdf6e6; border-color: rgba(255, 232, 178, 0.48); } body.atend .finale .when { color: #fffaf0; } /* THE QUIET LINE (2026-07-27, the copy programme). The game makes an anonymous account at first launch and talks to a server, with no prompt; a page whose loudest promise is privacy cannot be silent about that. It is set as running prose rather than as an inscription, because it is a disclosure and not a flourish, and it takes --read (the measured body token) rather than --dim, because #41 puts a 4.5:1 floor under anything a reader is expected to actually read. */ .finale .quiet { margin: 2.6vh auto 0; max-width: 46ch; font-family: var(--body); font-weight: 300; font-size: clamp(11.5px, 1.06vw, 13.5px); line-height: 1.72; letter-spacing: 0.012em; color: var(--read); text-wrap: pretty; } .finale .quiet a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgba(201, 165, 88, 0.6); } .finale .quiet a:hover { text-decoration-color: var(--gold-hi); } body.atend .finale .quiet { color: #f3e9d6; } /* THE SIGIL, in the 8vh of dead margin that used to sit above the footer: 72 pixels of nothing followed by 45 pixels of nothing (item 194). */ .sigil { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 7vh auto 0; max-width: 460px; width: 100%; } .sigil span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); } .sigil span:last-child { background: linear-gradient(90deg, var(--gold), transparent); } .sigil svg { width: 24px; height: 24px; flex: none; color: var(--gold-hi); } .sigil .hair { fill: none; stroke: currentColor; stroke-width: 1.1; } .sigil .core { fill: currentColor; stroke: none; } /* the footer is the document's own landmark now, not a section footer inside the finale (item 195) */ .foot { padding: 5vh 24px calc(5vh + env(safe-area-inset-bottom, 0px)); text-align: center; position: relative; z-index: 1; } .foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; } .foot nav a { font-family: var(--inscr); font-weight: 300; font-size: var(--fs-inscr); letter-spacing: 0.2em; text-indent: 0.1em; text-transform: uppercase; color: var(--read); padding: 14px 16px; /* padding, not margin, so a 14px row becomes a 44px target with real separation (item 64) */ font-feature-settings: "case" 1; transition: color var(--t-fast) ease; position: relative; } .foot nav a + a::before { content: ""; position: absolute; left: -1px; top: 50%; width: 1px; height: 10px; margin-top: -5px; background: rgba(164, 154, 132, 0.3); } @media (hover: hover) and (pointer: fine) { .foot nav a:hover { color: var(--gold-hi); } } .foot .colophon { font-family: var(--inscr); font-weight: 300; font-size: var(--fs-inscr); letter-spacing: 0.1em; color: var(--dim); /* it was --ink, brighter than the nav above it: the lowest line in the hierarchy was the brightest object in the footer (item 197) */ margin-top: 2.4vh; } .foot .colophon .yr { font-family: var(--display); font-variant-numeric: oldstyle-nums; font-size: 1.08em; } .foot .colophon a { color: var(--read); text-decoration: underline; text-decoration-color: rgba(201, 165, 88, 0.45); text-decoration-thickness: 1px; text-underline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .foot .colophon a:hover { color: var(--gold-hi); text-decoration-color: var(--gold-hi); } } /* ═══ THE CYRILLIC HAND ═══ Cyrillic capitals are flatter and stem repetitive (И Н П Ц Ш Щ), so they dissolve into a picket fence at tracking that Latin still carries: measured at 12px an Inter Cyrillic cap advances about 7.9px against 0.42em of letter space, and the Bulgarian over line and stores line were the property's two worst cases. Every tracked run on the Bulgarian pages is cut by roughly a third, and its compensation with it, which is HALF the tracking, never all of it (items 264, 44). The store names keep the Latin hand, because they are Latin. */ :lang(bg) .arrival .over { letter-spacing: 0.29em; text-indent: 0.145em; word-spacing: 0.26em; } :lang(bg) .arrival .stores { letter-spacing: 0.21em; text-indent: 0.105em; word-spacing: 0.2em; } :lang(bg) .finale .when { letter-spacing: 0.18em; text-indent: 0.09em; } :lang(bg) .foot nav a { letter-spacing: 0.14em; text-indent: 0.07em; } :lang(bg) .home { letter-spacing: 0.21em; text-indent: 0.105em; } :lang(bg) .chapter .num, :lang(bg) .eleven .num { letter-spacing: 0.1em; text-indent: 0.05em; } :lang(bg) .chapter .forms, :lang(bg) .eleven .ladder .nm { letter-spacing: 0.1em; } /* and the Bulgarian display words are longer, so the closing lockup is given a shorter measure rather than a smaller size (item 19 of the Bulgarian pass) */ :lang(bg) .finale .vow { max-width: 26em; } /* ═══ THE SMALL NIGHT ═══ Two faults ran through the old block. It keyed on width alone, so an iPhone in landscape (844x390) is WIDER than 840 and received the desktop grid on a 390 pixel tall glass; and the light was moved up to top 38%, straight behind the over line (items 157, 150). */ @media (max-width: 900px) { :root { --measure: 30em; --gutter: clamp(18px, 5vw, 30px); } /* THE SMALL NIGHT'S OWN LAW. On one column there is no beside, and a fixed body of light at any height inside the glass is crossed by scrolling text at some scroll position: no composition avoids it and #43 forbids the only other cure. So on a phone the light is SEATED BELOW THE GLASS and what reaches the words is its glow, which is exactly what the arrival does at every width. The light is not dimmed anywhere: it is placed. The sphere itself is a wide screen pleasure, and the phone gets the night, the numerals, the type, the instruments and the dawn (items 150, 43, 40). */ #orb { top: 112%; } h1.title { font-size: min(clamp(3.25rem, 19.5vw, 7.875rem), 22vh); letter-spacing: 0.1em; text-indent: 0.05em; } body { font-size: clamp(1.031rem, 1rem + 0.2vw, 1.125rem); } /* 16.5 to 18: the old floor was 15px on every phone, while iOS reads at 17 (item 152) */ .arrival { padding-top: clamp(56px, 9vh, 92px); } .arrival .over { letter-spacing: 0.3em; text-indent: 0.15em; } /* no line may end on a separator: the two halves become plates (item 154) */ .arrival .stores b { display: none; } .arrival .stores span { display: block; } .arrival .stores span + span { margin-top: 0.35em; } .arrival .cue { bottom: calc(15vh + env(safe-area-inset-bottom, 0px)); height: 74px; } .arrival .cue::after { animation-name: fallS; } .arrival .matter { bottom: calc(13vh + env(safe-area-inset-bottom, 0px)); } .arrival .matter i:nth-child(1) { left: -62px; width: 20px; height: 20px; } .arrival .matter i:nth-child(2) { left: 48px; width: 14px; height: 14px; } .chapter { grid-template-columns: 1fr; align-items: start; } /* the instruments' labels are 9.5px and they are the one text that would cross the glow: on a phone the drawn figure says it without them */ .chapter .cell, .chapter.alt .cell { grid-column: 1; grid-row: 2; justify-self: stretch; max-width: none; text-align: left; /* the old rule centred everything, so a six line paragraph rendered with a ragged LEFT and right edge (item 153) */ padding-left: 18px; padding-right: 0; border-left: 1px solid rgba(232, 205, 143, 0.13); border-right: none; } .chapter .kit, .chapter.alt .kit { grid-column: 1; grid-row: 3; justify-self: center; margin-top: 5vh; width: min(88%, 300px); } .chapter h2 { max-width: none; } .chapter.alt h2 { margin-left: 0; } .chapter.alt .forms { justify-content: flex-start; } .chapter .folio, .chapter.alt .folio { position: static; grid-column: 1; grid-row: 1; justify-self: start; transform: none; font-size: clamp(72px, 22vw, 132px); line-height: 0.72; margin-left: -0.04em; margin-bottom: -0.1em; } #c1, #c2, #c3, #c4, #c5, #c6 { padding-block: 6vh 5vh; } #c6 { padding-block: 8vh 54vh; } .eleven .ladder { grid-template-columns: 1fr; gap: 0.5em; justify-items: start; } .eleven .ladder::before { left: 30px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgba(232, 205, 143, 0.5) 12%, rgba(232, 205, 143, 0.5) 88%, transparent); } .eleven .ladder li { flex-direction: row; align-items: center; gap: 0.9em; width: 100%; } .eleven .ladder li { padding-left: 0; } .eleven .ladder li .seat { width: 60px; flex: none; display: flex; justify-content: center; } .eleven .ladder .nm { writing-mode: horizontal-tb; transform: none; height: auto; } .eleven .ladder .pt { margin-left: auto; } .eleven { text-align: left; padding-bottom: 12vh; } .finale .door { min-width: 0; width: 100%; } /* two mismatched grey slabs, 164px and 187px, were the last thing the page showed on a phone (item 155) */ .finale .doors { width: 100%; max-width: 320px; } .foot nav a { padding: 13px 12px; } } @keyframes fallS { 0% { transform: translateY(-20px); opacity: 0 } 18% { opacity: 1 } 74% { opacity: 1 } 100% { transform: translateY(74px); opacity: 0 } } @media (max-width: 360px) { h1.title { font-size: min(17.2vw, 22vh); } } /* the short window: a phone in landscape, and a laptop with browser chrome. The vertical composition has to give way before the type does. */ @media (max-height: 520px) { .arrival { padding-top: 4vh; } .arrival .cue, .arrival .matter { display: none; } #c1, #c2, #c3, #c4, #c5, #c6 { padding-block: 7vh; } #c6 { padding-block: 7vh 44vh; } .eleven { padding-block: 8vh; } .finale { padding-block: 5vh; } .foot { padding-block: 4vh; } } /* ═══ THE CALM TIER ═══ Written LAST, and it names every instrument the package actually shipped, choosing for each its single most eloquent still frame rather than switching it off: the light at full strength and still, the transmutation intact as discrete steps, the merge already merged, the traveller resting on the empty chair, the constellations fully drawn, the dawn already arrived with the sun up, the cue a stationary bead on its rail. A calm tier written before the instruments exist always misses one, and the one it misses is the one that looks broken. */ @media (prefers-reduced-motion: reduce) { .arrival .over, h1.title, .arrival .work, .arrival .line, .arrival .stores, .arrival .matter { animation: none; opacity: 1; transform: none; } #orb { animation: none; opacity: 1; } .arrival .cue { animation: none; opacity: 1; } .arrival .cue::after { animation: none; transform: translateY(36px); opacity: 1; } body.moved .arrival .cue { animation: none; opacity: 0; visibility: hidden; } #orb .aura, #orb .pulse, #orb .sweep, #orb .cut, #night::after, #land .rays i { animation: none; } #orb .aura { opacity: 0.94; } #land .rays i { opacity: 0.44; } #sky, #sky.lit circle, #sky .join { transition: none; animation: none; } #orb .ring, #orb .caustic { transition: none; } html.js .rise > *, html.js .rise.in > * { opacity: 1; transform: none; transition: none; animation: none; } .kit-merge .a, .kit-merge .b { animation: none; opacity: 0; } .kit-merge .c { animation: none; opacity: 1; } .kit-beat .trav, .kit-beat b { animation: none; } .kit-beat .track { transform: translateX(80%); } .finale .door::after { animation: none; transform: translateX(0); opacity: 0.4; } .finale .tell { transition: none; } .eleven .ladder b { transition: none; } } /* ═══ FORCED COLOURS ═══ The property's name is held by the most fragile mechanism CSS offers, on three surfaces. When the system takes every layer of light away, the name must still be there (item 67). */ @media (forced-colors: active) { h1.title, .finale .begin { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; text-shadow: none; forced-color-adjust: none; } #night, #warm, #dawn, #land, #ground, #field, #sky, .chapter .folio, .chapter .kit, .arrival .matter, .arrival .cue { display: none !important; } .chapter .cell, .chapter.alt .cell { border-color: CanvasText; } .finale .tell { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; box-shadow: none; } .finale .door { border: 1px solid GrayText; color: GrayText; } .chapter .forms b, .eleven .ladder b { forced-color-adjust: none; } } @media (prefers-contrast: more) { :root { --read: #ded8c9; --dim: #c3b9a1; } .chapter .cell { border-left-color: rgba(232, 205, 143, 0.34); } .chapter.alt .cell { border-right-color: rgba(232, 205, 143, 0.34); } } /* ═══ PRINT ═══ There was no print stylesheet anywhere on the property, and the world page printed as the hero plus six blank screens, because .rise holds its children at opacity 0 until a script says otherwise (item 11). */ @media print { html { background: #fff; } body { color: #111; font-size: 11pt; } #night, #warm, #dawn, #land, #ground, #field, #sky, .home, .lang, .arrival .cue, .arrival .matter, .chapter .folio, .chapter .kit, .sigil { display: none !important; } html.js .rise > *, html.js .rise.in > * { opacity: 1 !important; transform: none !important; animation: none !important; } h1.title, .finale .begin { background: none !important; color: #111 !important; -webkit-text-fill-color: #111 !important; text-shadow: none !important; } .arrival { min-height: 0; padding: 0 0 12mm; } .chapter { display: block; page-break-inside: avoid; } #c1, #c2, #c3, #c4, #c5, #c6 { padding: 0 0 8mm; } .chapter .cell, .chapter.alt .cell { max-width: none; border: none; padding: 0; text-align: left; } .chapter h2, .eleven h2 { color: #111; max-width: none; } .chapter .num, .eleven .num, .chapter .forms { color: #444; } .finale { min-height: 0; padding: 0; } .finale .tell { background: none; color: #111; box-shadow: none; border: 1px solid #111; } .foot nav a, .foot .colophon { color: #333; } .foot nav a[href]::after { content: " (" attr(href) ")"; font-size: 8pt; letter-spacing: 0; } }