/* ========================================================================== nojs.css — the static document, for when JS never runs. Loaded unconditionally and scoped entirely under `html:not(.js)`. The inline script in adds `.js` synchronously, so this only ever applies when scripting is genuinely off or the module graph failed to execute. Without this file the page is BLANK with JS off: leaf.css hides every .leaf__body that lacks [data-live], and JS is what sets that attribute. The strategy is to stop pretending there is a card. The eight sections render as one continuous document, the fixed presentation layer is removed from the page, and the corner chrome becomes an ordinary masthead. ========================================================================== */ /* -- 1 ── remove the presentation layer ---------------------------------- */ /* The sheet is a lay-down prop. With no JS nothing removes it, so it would sit over the whole page as an opaque rectangle. */ html:not(.js) .sheet, html:not(.js) .card .grounds, html:not(.js) .card .lid, html:not(.js) #backdrop canvas, html:not(.js) #backdrop .grade { display: none !important; } /* The card is fixed and empty (its #stage is only filled by JS). Take it out of the layout entirely rather than leaving an empty floating rectangle. */ html:not(.js) .card { position: static; inset: auto; overflow: visible; contain: none; background: transparent; box-shadow: none; border-radius: 0; container-type: normal; /* cqw units fall back to the vw @supports branch */ } html:not(.js) .card__inner { position: static; display: block; opacity: 1 !important; padding: 0; pointer-events: auto; } html:not(.js) .stage { display: none; } /* One backdrop photograph, held still behind the whole document. */ html:not(.js) #backdrop { position: fixed; inset: 0; z-index: 0; } html:not(.js) #backdrop .fall { display: none; } html:not(.js) #backdrop .fall[data-leaf="1"] { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; filter: grayscale(1) contrast(0.9); } /* -- 2 ── the document becomes the page ---------------------------------- */ html:not(.js) body { background: var(--plate-foam); } html:not(.js) main#doc { position: relative; z-index: 1; max-width: 78ch; margin-inline: auto; padding: clamp(1.5rem, 5vw, 5rem) clamp(1.25rem, 5vw, 3rem) 6rem; background: var(--plate-foam); } /* Sections stop being 100svh scroll spacers and become real content blocks. */ html:not(.js) .leaf { min-height: 0; height: auto; padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--rule); } html:not(.js) .leaf:first-of-type { border-top: 0; } /* THE LOAD-BEARING OVERRIDE: un-hide every wrapper. */ html:not(.js) .leaf__body { position: static !important; inset: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; display: block; } /* Carbon reads as ink-on-paper here; a single dark band mid-document is worse than one consistent document. */ html:not(.js) .leaf[data-plate="carbon"] { --on-plate: var(--stencil); --on-soft: var(--stencil-2); --on-rule: var(--rule); color: var(--stencil); } /* -- 3 ── typography without the card ------------------------------------ */ /* The giant word is a photo-over-type composition that needs the card's centred stage. Statically, show the real word and let the photograph stand alone. */ html:not(.js) .word { font-size: clamp(2.5rem, 12vw, 6rem); line-height: 0.9; margin-bottom: 1rem; } html:not(.js) .word .glyphs { display: none; } html:not(.js) .word .sr-only { position: static; width: auto; height: auto; clip: auto; clip-path: none; overflow: visible; white-space: normal; margin: 0; } html:not(.js) .word .cut { position: static; display: block; margin: 1.25rem 0 0; width: min(100%, 28rem); clip-path: none !important; transform: none !important; } html:not(.js) .word .cut img { width: 100%; height: auto; } /* Inline insets in the capabilities headline are decorative in flow. */ html:not(.js) .statement .inset { display: inline-block; height: 1em; width: auto; vertical-align: baseline; margin-inline: 0.15em; } /* -- 4 ── the horizontal band becomes a vertical list -------------------- */ html:not(.js) .band { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; transform: none !important; overflow: visible; width: auto; } html:not(.js) .band .panel { width: auto !important; min-width: 0; scroll-snap-align: none; } html:not(.js) .band .panel img { width: 100%; height: auto; } /* -- 5 ── tables, map and callouts --------------------------------------- */ html:not(.js) table { width: 100%; border-collapse: collapse; } html:not(.js) .map { max-width: 30rem; height: auto; } /* The callouts animate a stroke-dashoffset. Undrawn, they are invisible. */ html:not(.js) .callout svg .lead, html:not(.js) .callout svg .tick { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; } html:not(.js) .callout .num { opacity: 1 !important; } /* Anything whose only reveal is a transform or blur must sit at its end state. */ html:not(.js) [data-reveal], html:not(.js) .silhouette, html:not(.js) .plate, html:not(.js) .aperture { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } /* -- 6 ── chrome becomes a masthead and a footer ------------------------- */ html:not(.js) .chrome { opacity: 1 !important; filter: none !important; } html:not(.js) .chrome--mark { display: block; max-width: 78ch; margin: 0 auto; padding: 1.25rem clamp(1.25rem, 5vw, 3rem) 0; font-size: 1.25rem; } /* No overlay can open, so the trigger would be a dead control. */ html:not(.js) .pill--menu, html:not(.js) .pill--index, html:not(.js) .note { display: none; } /* The joke survives, at the end, where it belongs on a printed carton. */ html:not(.js) .mark-rotated { position: static; display: block; max-width: 78ch; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem) 3rem; transform: rotate(180deg); transform-origin: center; width: max-content; } /* -- 7 ── the menu overlay becomes a real nav list ----------------------- */ /* It carries [hidden], which must keep winning — the content is duplicated in leaf 08's colophon, so showing it here would repeat all ten lines. */ html:not(.js) .menu[hidden] { display: none !important; }