/* ============================================================ SELF-HOSTED FACES Subset to Latin + the punctuation this site actually uses (primes, degree, middot). Total payload 128 KB for four families. No third-party requests, no visitor IPs leaving the site, nothing to break if someone else's CDN does. ============================================================ */ @font-face{font-family:'Cutive Mono';src:url('fonts/cutive-mono.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Archivo';src:url('fonts/archivo-var.woff2') format('woff2-variations'); font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Fraunces';src:url('fonts/fraunces-var.woff2') format('woff2-variations'); font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('fonts/plex-mono-300.woff2') format('woff2'); font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('fonts/plex-mono-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'IBM Plex Mono';src:url('fonts/plex-mono-500.woff2') format('woff2'); font-weight:500;font-style:normal;font-display:swap} /* ============================================================ BLACKROCK CANNABIS COMPANY LTD Design tokens — single source of truth v0.1 · 2026-08-03 The stone ramp is sampled directly from the graded Black Rock Mountain panorama. It is not invented colour. ============================================================ */ :root { /* --- STONE RAMP ----------------------------------------- Sampled from pano_walls_graded.jpg + lookout frames. Cool in shadow, neutral bone at the top. No green. */ --stone-000: #08090B; /* below the sampled range — true ground */ --stone-050: #101215; --stone-100: #191C20; --stone-200: #32363D; --stone-300: #494E54; --stone-400: #5F646B; --stone-500: #7D8186; --stone-600: #9B9FA2; --stone-700: #BBBDBD; --stone-800: #DCDCD9; --stone-900: #EFEEEA; /* bone paper */ /* --- OXIDE ---------------------------------------------- The only chromatic value in the system. Iron oxide, the stain that forms on exposed rock. Used at trace amounts: rules, hallmark punches, single data emphases. Never fills. */ --oxide: #8A4E35; --oxide-dim: #5E3626; --oxide-lift: #B2705230; /* --- MODE: SHELL (mineral) ------------------------------ Brand surfaces. Hero, narrative, covers, section breaks. */ --shell-bg: var(--stone-050); --shell-bg-2: var(--stone-100); --shell-rule: #24282D; --shell-text: var(--stone-800); --shell-text-2: var(--stone-600); --shell-text-3: var(--stone-500); /* --- MODE: PAYLOAD (clinical) --------------------------- Data surfaces. Spec sheets, COA tables, batch records. Switches the whole system to a second gear. */ --pay-bg: var(--stone-900); --pay-bg-2: #E4E3DE; --pay-rule: #C6C5BF; --pay-ink: var(--stone-050); --pay-ink-2: var(--stone-300); --pay-ink-3: var(--stone-400); /* --- TYPE ----------------------------------------------- mark : wordmark + hallmark micro-type only display : editorial authority body : quiet, neutral, gets out of the way data : all figures, batch codes, coordinates (tabular) */ --ff-mark: "Courier Prime", "Courier New", ui-monospace, monospace; --ff-display: "Fraunces", Georgia, "Times New Roman", serif; --ff-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ff-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; /* --- TWO SCALES, NOT ONE ------------------------------- Reading distance barely changes between a laptop and a 32" display, so BODY type stays near-constant — roughly 16-20px forever. DISPLAY type is doing architecture rather than reading, so it grows hard with the viewport. Tying both to one dial is what forced paragraphs to balloon in order to get a headline the right size. --- */ --disp: 1; /* display-type multiplier. Tunable. */ /* Reading sizes — deliberately restrained ceilings */ --t-micro: clamp(0.625rem, 0.60rem + 0.10vw, 0.76rem); --t-fine: clamp(0.75rem, 0.72rem + 0.13vw, 0.90rem); --t-body: clamp(0.95rem, 0.91rem + 0.18vw, 1.15rem); --t-lead: clamp(1.10rem, 0.92rem + 0.70vw, 2.00rem); /* Architectural sizes — grow with the room */ --t-h3: clamp(1.25rem, calc((0.62rem + 1.55vw) * var(--disp)), calc(3.20rem * var(--disp))); --t-h2: clamp(1.65rem, calc((0.50rem + 3.40vw) * var(--disp)), calc(6.80rem * var(--disp))); --t-h1: clamp(2.30rem, calc((0.60rem + 6.00vw) * var(--disp)), calc(11.5rem * var(--disp))); --t-mark: clamp(1.60rem, calc((0.50rem + 8.00vw) * var(--disp)), calc(16.0rem * var(--disp))); --lh-tight: 1.06; --lh-snug: 1.28; --lh-body: 1.62; /* Tracking. Lowercase mark runs tight; hallmark micro-type runs wide caps. That tension is the point. */ --tr-mark: -0.045em; --tr-micro: 0.22em; --tr-caps: 0.09em; /* --- STRUCTURE ------------------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 7rem; --sp-10: 10rem; --measure: 34rem; /* body copy max line length */ --gutter: clamp(1.25rem, 4vw, 5rem); --maxw: 84rem; /* Nothing in this system is rounded. It is struck, not printed. */ --radius: 0px; --hair: 1px; /* --- CONTOUR / SURVEY GRAPHIC -------------------------- Locked spec: "C3 ghost". Uncrossed ground sits near-invisible, crossed ground holds as a faint ghost trail, and oxide marks the single active elevation band. Nothing ever goes white — the only thing that moves is the oxide. */ --contour-rest: #2A2F35; --contour-rest-op: 0.55; --contour-trail: var(--stone-300); --contour-trail-op: 0.85; --contour-active: var(--oxide); --contour-w: 1.15; --contour-w-active: 2.0; --contour-fade: 0.45s; /* band cross-fade */ --contour-lead: 46; /* metres of leading edge (~2 bands) */ } /* ============================================================ ROOT SCALE STEPS A 27–32" Pro Display is not "a big laptop". Viewport-relative type flattens at its ceiling and starts reading undersized against all that width. Stepping the root size scales every rem-based token — type, spacing, measure, gutters — together, so proportion holds instead of just the headline growing. ============================================================ */ html { font-size: 16px; } @media (min-width: 1200px) { html { font-size: 17px; } } @media (min-width: 1700px) { html { font-size: 18px; } } @media (min-width: 2200px) { html { font-size: 19px; } } @media (min-width: 2800px) { html { font-size: 20px; } } /* Respect anyone who has set a larger default in their browser. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }