/* Konvolut station-group design tokens — canonical: konvolut-site repo. dieline site holds a byte-identical copy; parity is enforced by diff in CI/acceptance. */ :root { --paper: #FAF7F0; --ink: #191712; --ink-soft: #57534A; --cut: #C93A2B; /* industry: cut lines are red */ --crease: #2C4EC4; /* industry: crease/fold lines are blue */ --brass: #96742F; /* WCAG large text (>=24px, or >=18.66px bold 700+) and ornament only */ --brass-deep: #7A5D23; /* small-text brass; must measure >=4.5:1 on --paper (verify Task 7) */ --hairline: rgba(25, 23, 18, 0.25); } .label { font-family: "Familjen Grotesk", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .mono { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .page { max-width: 1180px; margin: 0 auto; padding: 0 48px; } /* Reveal: content is visible by default; only when JS marks do elements hide and animate in. No-JS => everything readable. */ .js-ready .reveal { opacity: 0; transform: translateY(14px); transition: opacity .85s cubic-bezier(.2,.6,.2,1), transform .85s cubic-bezier(.2,.6,.2,1); transition-delay: var(--d, 0s); } .js-ready .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-ready .reveal { opacity: 1; transform: none; transition: none; } } /* Full-bleed horizontal rules: content stays in the measure, rules run the viewport. */ .rule-t, .rule-b, .rule-bd, .rule-td, .rule-dash { position: relative; } .rule-t::before, .rule-b::after, .rule-bd::after, .rule-td::before, .rule-dash::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; pointer-events: none; } .rule-t::before { top: 0; border-top: 1px solid var(--ink); } .rule-b::after { bottom: 0; border-bottom: 1px solid var(--ink); } .rule-bd::after { bottom: 0; border-bottom: 3px double var(--ink); } .rule-td::before { top: 0; border-top: 3px double var(--ink); } .rule-dash::after { bottom: 0; border-bottom: 1px dashed var(--hairline); }