/* ===================================================================================== EXPLAIN-FIGURES — the About page's full version of the eclipse-type explainer. Director, 2 Aug 2026: «еще мне кажется надо наш эксплейнер затмений переделать, нужно что-то вроде этого. связать логику тени с изображением солнца. и в about можно полную версию.» The compact version is the legend's four "i" cards on the globe (index.html, with its drawing rules in styles.css); this sheet is only the long form: the four types laid out together, each as the same CHAIN OF THREE — the geometry, the mark it leaves on the ground, and the Sun as it looks from inside that mark. THE TWO SURFACES DELIBERATELY DIFFER IN COUNT NOW (same day, second pass). The director threw the first drawn version out — «нужно нарисовать два вида тени просто, а рядом кольцо» — and the CARD is two figures: the band, and the Sun beside it. The cone was cut there because at 162 CSS px it was three blobs and two dashed lines. It survives HERE, where a column is 200 px and it earns its space, and where his reference image wanted it in the first place. What the two surfaces still share, and must keep sharing, is the alphabet: the same band at the same shipped tone, and the same Sun drawn with NO BLACK FIELD anywhere — amber for what is left of the Sun, paper for what the Moon took. WHY A THIRD SHEET AND NOT about.css. Nothing here is a new idea about the About page; it is the explainer, which belongs to itself and is loaded by both surfaces' worth of markup. It rides on styles.css for everything real — the palette tokens, the type faces, the whole d-* drawing alphabet (.d-sun / .d-umbra / .d-band / .d-corona / …) and the .sw type glyphs reused in the headings — so the figures on this page and the figures in the legend card can never drift apart. Only the PAGE-LEVEL layout of the long form lives here, scoped to .aboutpage in the same way about.css scopes its own. House rules, unchanged: no borders, no rounding, no shadows, nothing under 13px, and every tone mixed from the theme tokens rather than written out. ===================================================================================== */ /* One type: a heading, its three figures, its paragraph. Separated by air, never by a box. */ .aboutpage .ex-type { margin-top: clamp(34px, 5.5vw, 52px); } .aboutpage .ex-type:first-of-type { margin-top: clamp(24px, 3.5vw, 32px); } /* The heading carries the piece's OWN type glyph — the same masked mark the legend chips and the globe's points speak, straight out of styles.css — so a reader arrives at this page already able to match the row to the swatch they clicked. */ .aboutpage .ex-type h3 { display: flex; align-items: center; gap: 11px; margin: 0 0 clamp(12px, 2vw, 16px); font-family: var(--grot); font-weight: 600; font-size: clamp(17px, 2.2vw, 20px); line-height: 1.2; letter-spacing: -0.012em; color: var(--ink); } /* THE CHAIN. Three equal columns on a desktop, one column on a phone — the reading order is the same either way, and the numbers in the captions say so out loud rather than relying on an arrow that would have to be redrawn when the row stacks. */ .aboutpage .ex-figs { display: grid; /* TWO, was three. The middle figure — the band on its own patch of ground — went on 3 Aug 2026 («what lands on the ground выглядит вообще бессмысленно, я бы убрал совсем»); a three-track grid with one track empty would have left each remaining figure at a third of the width for no reason. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 30px); margin: 0 0 clamp(16px, 2.4vw, 22px); } @media (max-width: 620px) { .aboutpage .ex-figs { grid-template-columns: minmax(0, 1fr); gap: 24px; } } .aboutpage .ex-fig { margin: 0; } .aboutpage .ex-fig svg { display: block; width: 100%; height: auto; /* currentColor is the drawing's warm amber — the same one the legend's diagrams use. */ color: var(--amber); overflow: hidden; } .aboutpage .ex-cap { margin-top: 9px; font-family: var(--grot); font-size: 13px; line-height: 1.5; letter-spacing: 0; color: var(--ink-faint); } /* The step number, in the number face, because in this piece Mono counts and Grotesk speaks. */ .aboutpage .ex-cap .ex-n { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--gold); margin-right: 7px; } /* The one place a figure is allowed to be wider than the reading measure: the three-column row uses the whole column, while the prose around it keeps its 680px. */ .aboutpage .ex-figs { max-width: none; } /* ---- THE CONE'S OWN LABELS, AT THIS PAGE'S SCALE (3 Aug 2026) -------------------------------- `umbra` / `penumbra` / `antumbra` are set INSIDE the drawings now (see the .d-lab note in styles.css), and an SVG font-size is in USER UNITS — so the same 11 that clears the piece's 13px floor on the legend's cards does not clear it here. The two surfaces scale differently and in opposite directions: measured (dev/_about_fig_size.mjs), this figure is 204 CSS px wide at 1280x900, 506.9 at 576x1280 and 343.2 at 390x844 — NARROWEST on the desktop, where the card's is a flat 272 at every width. One unit is 0.944 px at that tightest case, so 14.5 units lands at 13.7 px, just over the floor; every other width draws the whole figure larger and the label grows with it, which is what a figure scaling should do rather than something to correct. */ .ex-fig .d-lab { font-size: 14.5px; } /* ...AND SMALLER ON A PHONE, WHICH SOUNDS BACKWARDS AND IS NOT. This page's figure is the one thing here that gets BIGGER as the window narrows — it is a three-column strip on the desktop and a full-width figure on a phone — so a user-unit size fitted to the desktop's 204px lands at 34px on a 576px-wide phone figure, shouting over 17px body text. Measured at the two phone widths (dev/_fig_check.mjs): one unit is 2.347px at 576x1280 and 1.589 at 390x844, so 8.6 units is 20.2px and 13.7px — over the floor at the tighter of them, and in proportion at the other. */ @media (max-width: 620px) { .ex-fig .d-lab { font-size: 8.6px; } }