/* Pipeline-owned. Written before the build; do not edit or overwrite. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; } /* Hours, prices and phone numbers line up only with tabular figures, and a misaligned hours table is a defect no check in this repo can see. Scoped to the elements that are numeric by semantics rather than by guess -- the rest is one line in the grammar, because CSS cannot tell a price from prose. */ :where(time, td, th) { font-variant-numeric: tabular-nums; } /* Anchored headings must not land under a sticky header. */ :where(h1, h2, h3, h4, [id]) { scroll-margin-top: 6rem; } :where(figure, blockquote, dl, dd) { margin: 0; } :where(ul, ol):where([class]) { margin: 0; padding: 0; list-style: none; } :where(h1, h2, h3, h4, p) { overflow-wrap: break-word; } /* ---- Japanese typesetting the browser does not do by default ---- */ /* line-break: strict keeps small kana and the long-vowel mark off the start of a line. text-autospace adds the 1/8em between Japanese and Latin or digits that every engine ships switched off, so a writer never types that space. Headings break between phrases, not inside a word -- test-bbs-deespot-024 shipped ラインナッ/プ and 質/問 -- and balance the lines they do break into; auto-phrase is Chromium-only, and floor.js loads phrase.js for the engines without it. Body copy avoids a one-character last line. :where() keeps all of it at zero specificity: a designed page still decides. */ :where(html) { line-break: strict; text-autospace: normal; } :where(h1, h2, h3, h4) { word-break: auto-phrase; text-wrap: balance; } :where(p, li, dd, blockquote, figcaption) { text-wrap: pretty; } :where(img, svg, video, iframe) { max-width: 100%; display: block; } :where(img, video) { height: auto; } :where(button, input, select, textarea) { font: inherit; color: inherit; } /* Every interactive thing is obviously interactive, and tapping it is instant. */ :where(a[href], button, summary, label, [role="button"]) { cursor: pointer; touch-action: manipulation; } :where(summary) { list-style: none; } :where(summary)::-webkit-details-marker { display: none; } /* Keyboard users can always see where they are. */ :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; } /* The floor of side padding. A section may have more; none may have none. */ body > :where(header, main, footer) > :where(section, div) { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); } /* Motion is decoration. Content never depends on it. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---- the motion runtime, loaded by motion.js ---- */ /* GSAP, ScrollTrigger and Lenis come off a CDN, and a CDN has bad minutes. The contract is that a reveal's *resting* state is visible and the hidden state is scoped under html.motion-on, which motion.js sets synchronously in the head and removes again if the libraries do not arrive. This rule is the net under the contract: a builder that forgets to scope its hidden state still ships a readable page when the libraries fail, rather than a blank one. */ html:not(.motion-on) :where([data-reveal], [data-animate], [data-split]) { opacity: 1 !important; transform: none !important; clip-path: none !important; visibility: visible !important; } /* ---- the loading curtain, when a design uses one ---- */ /* Two independent nets, because this is the one device that can leave a shop's site permanently blank. One: the curtain does not exist unless motion.js is alive to remove it — html.motion-on is set by that script and by nothing else, so a blocked CDN, a parse error and prefers-reduced-motion all mean the visitor never sees a curtain at all rather than seeing one forever. Two: motion.js adds html.preload-done on an unconditional timer, so the curtain lifts on the passage of time rather than on an event. The builder styles [data-preload] and gets the reveal for free; it cannot get this wrong, because it does not write it. */ html:not(.motion-on) [data-preload] { display: none !important; } [data-preload] { position: fixed; inset: 0; z-index: 90; transition: opacity .45s ease, visibility .45s ease; } html.preload-done [data-preload] { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ---- social post cards ---- */ /* The caption is clamped here rather than in the builder's stylesheet, because "long captions get three dots" is the whole reason these cards are ours and not Instagram's iframe. A post caption is arbitrary length — some are a sentence, some are twenty hashtags — and one long one otherwise stretches its card and breaks the row. The builder may override the line-clamp count to two or four; it should not have to remember the rest. */ .social-post p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* The photograph fills its frame at whatever aspect the card asks for. An Instagram post is not reliably square. */ .social-post img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ---- the posts section the pipeline injects, when the builder wrote none ---- */ /* applySourceOfTruth puts a plain
on the homepage when the page has no post cards at all, because ten posts in data.json and nothing on the page is the worse failure. jdm-test-008 shipped exactly that: eight cards, our class names, and not one rule matching .social-post anywhere in the build's own