/* ───────────────────────────────────────────────────────────────────────────── The Yin Rhythms logo — one stylesheet, every page. Rebuilt 4 Sep 2026: the hand-drawn rose mark beside the wordmark in Instrument Serif. The files ARE the logo. Nothing here re-sets "YIN RHYTHMS" as CSS text: the tracking, the optical gap between the mark and the Y, and the baseline relationship are fixed in the artwork and do not survive re-typesetting. REBUILT AGAIN 16 Sep 2026: wordmark swapped from Instrument Serif to Juana (Canva-licensed, not a webfont — ships as a traced image path, same as the rose), at Anna's own spacing (wide tracking, bigger caps, measured from her mockup). Rose is the thicker 15 Sep set. Because Juana's tracking is much wider than Instrument Serif's, the lockup's aspect ratio changed and the canvas grew WIDER to hold it — height held at 1424 (unchanged) so nothing below that depends on lockup height had to move; width went 2091 -> 3657, and every `` in the markup was updated to match. See `vault/00 - notes/logs/handovers/2026-09-16-site-logo-juana-HANDOVER.md` for the measured ratios. The paragraphs below this point are 4-5 Sep history and describe the OLD Instrument Serif proportions (cap-band %, aspect 1.468:1) — kept for the refinement story, not as current fact. Current facts: aspect now ~2.568:1 (3657/1424); ivory ink is #FAF8F4 (was #F9F7F3). THE FULL LOCKUP EVERYWHERE - Anna's ruling, 5 Sep ------------------------------------------------- The mark never appears on its own anywhere on this site. Nav and footer both carry the horizontal lockup: the rose mark AND the words together. Artwork refined 5 Sep 12:00, after Anna reviewed the footer live: the wordmark is set smaller and more subtly (60px rather than 78px in the source render) and there is more air between the Y and the rose's descending line. The canvas changed with it - 2091x1424, from 2263x1424 - so the intrinsic width/height attributes in the markup moved too. The stacked lockup is now 1393x1764; it is not used anywhere yet. That refinement changes the sizing maths, so it is re-measured here rather than carried over. The wordmark's cap band is now 178px of the file's 1424, which is 12.5% of whatever height the lockup is given (it was 16.2%): lockup 40px tall -> wordmark caps 5.0px unreadable lockup 76px tall -> wordmark caps 9.5px what ships in the nav lockup 156px tall -> wordmark caps 19.5px what ships in the footer lockup 208px tall -> wordmark caps 26.0px the guidelines' floor The heights below are deliberately UNCHANGED from before the refinement. The logo renders at the same overall size Anna reviewed; what moved is the wordmark's weight within it, which is exactly what she asked for. Scaling the lockup up to hold the old cap height would have quietly undone the refinement, so it was not done. The nav's 76px is the most the bar can hold without becoming a band, and it is below the guidelines' print/video floor - a real trade, recorded rather than hidden. Reaching that floor needs a 208px lockup. The footer runs to 156px, which is as close to it as a footer sensibly gets. COLOURWAY --------- Two files per lockup — forest #2C4038 for light grounds, ivory #FAF8F4 for dark grounds and photographs (updated from #F9F7F3 on 16 Sep, matching the Juana rebuild). Both ship in the markup; CSS decides which is visible, so a nav that swaps ground on scroll swaps colourway with it and never re-fetches. Add `is-light` to the link (or `.scrolled` on an ancestor nav, which the homepage already toggles) to take the ivory artwork. The line's pressure variation is the asset. Never stretch it, recolour it, fill it, rotate it or put a shadow behind it. ───────────────────────────────────────────────────────────────────────── */ .yr-logo{ display:inline-flex; align-items:center; line-height:0; /* no descender gap under the artwork */ text-decoration:none; border:0; border-radius:3px; /* Clear space = the height of the small crescent above the mark (4.1% of the mark's height). Held as a proportion of the rendered logo so it scales. */ padding:0.05em; -webkit-tap-highlight-color:transparent; } .yr-logo img{ display:block; width:auto; /* height drives the size — never both */ height:100%; /* The artwork ships far above 2x for every size used here, so the fine line stays crisp on retina. Keep the browser's best downscaler on it. */ image-rendering:auto; } /* Both colourways ship; one is shown. */ .yr-logo .yr-logo-light{display:none} .yr-logo .yr-logo-dark{display:block} .yr-logo.is-light .yr-logo-light, .is-light .yr-logo .yr-logo-light, nav:not(.scrolled):not(.solid) .yr-logo.on-scroll-swap .yr-logo-light{display:block} .yr-logo.is-light .yr-logo-dark, .is-light .yr-logo .yr-logo-dark, nav:not(.scrolled):not(.solid) .yr-logo.on-scroll-swap .yr-logo-dark{display:none} /* A nav that starts over the hero image and settles onto a light ground: ivory artwork at the top, forest once scrolled. Two class names, because the site grew two: the homepage, YINtentions and YINtuition toggle `scrolled`; Yin Leadership toggles `solid`. Both mean the same thing - the bar has left the hero and landed on parchment - so both are honoured here rather than leaving one page's logo dark-on-dark. */ nav.scrolled .yr-logo.on-scroll-swap .yr-logo-light, nav.solid .yr-logo.on-scroll-swap .yr-logo-light{display:none} nav.scrolled .yr-logo.on-scroll-swap .yr-logo-dark, nav.solid .yr-logo.on-scroll-swap .yr-logo-dark{display:block} /* Keyboard focus must be visible — this is the link home on every page. */ .yr-logo:focus{outline:none} .yr-logo:focus-visible{ outline:2px solid currentColor; outline-offset:6px; border-radius:3px; } /* ── Placements ─────────────────────────────────────────────────────────── */ /* Nav: the full lockup. Height drives it; the width follows the artwork's own aspect (1.468:1 on the canvas, down from 1.589:1 before the refinement), so a 76px lockup is 112px wide and the bar settles around 120px. */ .yr-logo--nav{height:76px} .yr-logo--nav img{height:76px} /* A nav that floats over the hero photograph needs a scrim, not a shadow. The guidelines are explicit that the mark takes a plain ground or "a quiet area of footage", never a busy passage, and that a shadow behind the artwork is misuse. Measured on the homepage hero, the ivory mark at 44px over the cliff face is barely present — it is a hairline drawing on mid-grey. So the ground is quietened rather than the artwork altered: a soft top-down wash across the whole bar, which lifts the nav links by the same amount and leaves the drawing untouched. It fades out entirely by the bar's bottom edge, and the scrolled state replaces it with the solid background that was always there. Scoped to the swap logo, so navs that already sit on a plain ground never get it. The stops hold most of their weight to 62% and only release after 88%, and that is deliberate rather than taste. The wash is a percentage of the BAR, but what needs covering is the MARK, which spans roughly 18%-71% of the bar's height. An earlier version faded from 55% and looked fine while the bar was short; when the lockup grew the bar to 120px the fade landed exactly on the mark and the rose all but vanished over the cliff, leaving the words floating on their own - the one thing this logo may never do. If the nav's height or the logo's changes again, re-check these stops against where the mark actually sits. */ nav:not(.scrolled):not(.solid):has(.yr-logo.on-scroll-swap){ background:linear-gradient(180deg, rgba(22,30,26,.46) 0%, rgba(22,30,26,.36) 62%, rgba(22,30,26,.13) 88%, rgba(22,30,26,0) 100%); } /* Footer: the full horizontal lockup, where there is room for it. After the refinement the clamp yields a 15px cap height at its floor and 19.5px at its ceiling - subtler than before by design, which is the change Anna asked for having looked at this exact spot. */ .yr-logo--foot{height:clamp(120px,13vw,156px)} .yr-logo--foot img{height:100%} @media (max-width:640px){ .yr-logo--nav,.yr-logo--nav img{height:58px} .yr-logo--foot{height:104px} } /* Reduced motion / print: nothing animates here, but keep the artwork solid when a page prints on white — the ivory version would vanish. */ @media print{ .yr-logo .yr-logo-light{display:none !important} .yr-logo .yr-logo-dark{display:block !important} }