/* ============================================================================ Rel8r — Design Token SSOT Source of truth for the Stitch "Collector Deliverables" set. Theme source: blister_pop_collective/DESIGN.md (light "Blister Pop Collective") + the values actually rendered by rel8r_collectible_toybox_deliverables_hub. Layers: 1. Primitive colour channels → consumed by the Tailwind config 2. Semantic surfaces / text / lines 3. Typography 4. Radii / elevation / motion 5. Component tokens (blister, bevel buttons, foil) Nothing downstream may hardcode a hex value — reference a token. ========================================================================= */ :root { /* ---- 1. Primitive colour channels (rgb triplets for alpha compositing) -- */ /* brand primitives */ --ch-pink: 255 20 132; /* #ff1484 bubblegum magenta (brand primary) */ --ch-magenta: 230 0 110; /* #e6006e deep magenta */ --ch-bubble: 255 77 160; /* #ff4da0 light bubble pink */ --ch-hotpink: 255 42 133; /* #ff2a85 Blister Pop primary (#FF2A85) */ --ch-hot: 255 0 115; /* #ff0073 saturated hot pink */ --ch-cyan: 0 195 255; /* #00c3ff electric sky cyan */ --ch-sky: 0 162 232; /* #00a2e8 deep sky */ --ch-yellow: 255 204 0; /* #ffcc00 sunshine yellow */ --ch-gold: 230 161 0; /* #e6a100 metallic gold */ --ch-darkgold: 158 111 0; /* #9e6f00 gold shadow */ --ch-gold-edge: 181 117 38; /* #b57526 burnished antique gold edge (sampled from logo-original.png) */ --ch-gold-specular: 246 189 91; /* #f6bd5b specular crest highlight (sampled from logo-original.png) */ --ch-gold-deep: 109 62 14; /* #6d3e0e deep gold bevel crevice (sampled from logo-original.png) */ --ch-gold-foil: 255 215 110; /* #ffd76e ambient gold foil for text/metadata */ --ch-lime: 0 230 118; /* #00e676 secure lime */ --ch-navy: 10 17 40; /* #0a1128 lacquer navy */ /* structural dark surfaces */ --ch-pure-black: 0 0 0; /* #000000 pure black */ --ch-ink: 18 20 28; /* #12141c badge black */ --ch-plum: 22 26 41; /* #161a29 lacquer plum */ --ch-plum-2: 30 23 48; /* #1e1730 plum lift */ --ch-console: 13 19 31; /* #0d131f terminal panel */ --ch-console-deep: 7 11 18; /* #070b12 terminal recess */ /* canvas + foil */ --ch-canvas: 242 246 252; /* #f2f6fc porcelain cool canvas */ --ch-foil: 255 213 79; /* #ffd54f gold foil trim */ --ch-foil-soft: 255 224 130; /* #ffe082 foil label text */ /* terminal traffic lights */ --ch-dot-red: 255 95 86; /* #ff5f56 */ --ch-dot-yellow: 255 189 46; /* #ffbd2e */ --ch-dot-green: 39 201 63; /* #27c93f */ /* ---- 1b. Tint scales (brand-derived, consumed by the Tailwind config) -- Each ramp is anchored on its brand primitive so soft chips never drift from the palette. Values are rgb channels, not hex. */ /* neutral (structure + text) */ --ch-slate-50: 248 250 252; --ch-slate-100: 241 245 249; --ch-slate-200: 226 232 240; --ch-slate-300: 203 213 225; --ch-slate-400: 148 163 184; --ch-slate-500: 100 116 139; --ch-slate-600: 71 85 105; --ch-slate-700: 51 65 85; --ch-slate-800: 30 41 59; --ch-slate-900: 15 23 42; --ch-slate-950: 2 6 23; /* pink (anchored on --ch-pink #ff1484) */ --ch-pink-50: 255 240 247; --ch-pink-100: 255 224 239; --ch-pink-200: 255 194 223; --ch-pink-300: 255 156 203; --ch-pink-400: 255 106 179; --ch-pink-500: 255 42 133; --ch-pink-600: 255 20 132; --ch-pink-700: 214 15 109; --ch-pink-800: 168 11 86; --ch-pink-900: 122 7 64; --ch-pink-950: 77 4 41; /* cyan (anchored on --ch-cyan #00c3ff) */ --ch-cyan-50: 236 250 255; --ch-cyan-100: 211 243 255; --ch-cyan-200: 169 232 255; --ch-cyan-300: 122 220 255; --ch-cyan-400: 60 205 255; --ch-cyan-500: 0 195 255; --ch-cyan-600: 0 144 209; --ch-cyan-700: 0 118 172; --ch-cyan-800: 7 90 128; --ch-cyan-900: 8 61 86; --ch-cyan-950: 4 34 47; /* amber / gold (anchored on --ch-yellow #ffcc00) */ --ch-amber-50: 255 252 235; --ch-amber-100: 255 246 199; --ch-amber-200: 255 236 138; --ch-amber-300: 255 221 71; --ch-amber-400: 255 204 0; --ch-amber-500: 230 161 0; --ch-amber-600: 201 127 0; --ch-amber-700: 168 100 0; --ch-amber-800: 138 86 0; --ch-amber-900: 92 58 0; --ch-amber-950: 58 36 0; /* emerald / secure (anchored on --ch-lime #00e676) */ --ch-emerald-50: 234 255 244; --ch-emerald-100: 201 255 227; --ch-emerald-200: 155 250 205; --ch-emerald-300: 94 240 171; --ch-emerald-400: 32 230 140; --ch-emerald-500: 0 214 118; --ch-emerald-600: 0 168 84; --ch-emerald-700: 4 132 68; --ch-emerald-800: 4 96 52; --ch-emerald-900: 4 80 42; --ch-emerald-950: 2 46 24; /* ---- 1c. Editorial stage (owner's redesign brief, 2026-10-05) --------- The editorial home: art photographed at night on a black stage, cream type, hot pink (--ch-hotpink) as punctuation, gunmetal and worn brass. */ --ch-stage: 5 5 5; /* #050505 stage black */ --ch-maroon: 59 10 26; /* #3b0a1a noir diorama deep maroon */ --ch-burgundy: 88 14 39; /* #580e27 noir diorama dark burgundy */ --ch-stage-soft: 11 11 13; /* #0b0b0d stage lift */ --ch-cream: 238 222 208; /* #eeded0 headline cream, sampled from the owner's layout reference */ --ch-cream-muted: 184 178 173; /* #b8b2ad muted type on black */ --ch-pink-soft: 255 116 179; /* #ff74b3 soft pink */ --ch-gunmetal: 37 39 43; /* #25272b gunmetal */ --ch-brass: 184 145 78; /* #b8914e worn brass */ /* editorial frame: the owner's responsive layout reference (design/reference/layout-map/). Its grid panel: desktop 12 columns x 96px with 24px gaps (1416px of content), tablet 8 columns with 20px gaps and 40px outer gutters, mobile 4 columns with 16px gaps and 20px outer gutters. Header heights as drawn at each width. Desktop landscape (owner 2026-10-28: at 1440 and 1920 the home read "jammed in the centre" with 29px gutters at 1440 and a 1416px column snapping to 252px margins at 1920): the column tops out at 1520px and the gutter is a share of the viewport, 4vw between 32px and 80px, so 1440 shows 58px gutters and the column keeps growing to 1680 before it centres. The 12-column grid keeps its 24px gaps and simply gets wider columns. */ --ed-content-max: 1520px; /* was 1416px (edge to edge at 1440) */ --ed-cols-desk: 12; --ed-cols-tab: 8; --ed-cols-mob: 4; --ed-gap-desk: 24px; --ed-gap-tab: 20px; --ed-gap-mob: 16px; --ed-gutter-desk: clamp(var(--ed-space-32), var(--ed-vw-4), var(--ed-space-80)); /* was clamp(24px, 2vw, 32px): 29px at 1440 */ --ed-gutter-tab: 40px; --ed-gutter-mob: 20px; --ed-header-h-desk: 72px; /* blueprint S01: 72px fixed */ --ed-header-h-tab: 72px; --ed-header-h-mob: 52px; --ed-tap-min: 44px; /* comfortable touch target for phone CTAs (owner 2026-10-09: "at least a 44px touch target on mobile") */ /* 8-point spacing scale (owner 2026-10-24: "propose a unified spacing system ... to eliminate dead space and visual disjointedness"; docs/4-explanation/funnel-polish-2026-10/INTENT.md hat 3). Every home .ed-band pads top and bottom by the same step at each width; the per-section pad tokens below now alias it. */ --ed-space-8: 8px; --ed-space-16: 16px; --ed-space-24: 24px; --ed-space-32: 32px; --ed-space-48: 48px; --ed-space-80: 80px; --ed-space-96: 96px; --ed-band-pad-mob: var(--ed-space-24); --ed-band-pad-tab: var(--ed-space-32); /* desktop band padding is fluid (owner 2026-10-28: a flat 48px read as "thin strips" at 1920): one step of the scale at 1024 (48px), about 68px at 1440, 90px at 1920, two steps (96px) from 2043 up */ --ed-band-pad-desk: clamp(var(--ed-space-48), var(--ed-vw-4-7), var(--ed-space-96)); /* was var(--ed-space-48) at every desktop width */ /* header and footer logo: the brand mark (site/assets/rel8r-logo.png, 900x435) at a set height (owner 2026-10-24: the typed wordmark "feels too much like a generic, bland SaaS brand"); the footer keeps the typed wordmark's old height */ --ed-logo-h-mob: 42px; /* inside the 52px phone header (~87px wide, clear chrome ligature) */ --ed-logo-h-tab: 54px; /* inside the 72px tablet header (~112px wide) */ --ed-logo-h-desk: 60px; /* inside the 72px desktop header (~125px wide) */ --ed-logo-footer-h-mob: 28px; --ed-logo-footer-h-tab: 38px; --ed-logo-footer-h-desk: 44px; /* 1:1 PLACEMENT (owner 2026-10-09: "we have 1:1 placement"; "it looked way too roomie"): every band and art box below is design/reference/layout-map/layout-map.json at its own scale (desktop x2.1333, tablet x2.1453, mobile x1.6116; band edges from separator_lines_y). Art boxes are aspect ratios, so they hold their shape at any width. S02 hero: band 284px, art box 740x275 (7 columns, bleeds left), copy 5 columns */ /* desktop hero (owner 2026-10-28: a fixed 516px band at 1440 and 1920 with the art "cropped to a band"): the band is at least 60% of the viewport height, between the approved 409px and 720px, and the art box stretches to the band's full height (its ratio is auto; the image covers it, cropped from --ed-hero-crop-desk). 540px at 1440x900, 648px at 1920x1080, 461px at 1024x768. */ --ed-hero-h-floor-desk: 409px; /* the approved art overlay's hero band at 1440: never shorter */ --ed-hero-h-ceil-desk: 720px; /* never taller, so a tall monitor does not push the styles below the fold */ --ed-hero-h-min-desk: clamp(var(--ed-hero-h-floor-desk), var(--ed-svh-60), var(--ed-hero-h-ceil-desk)); /* was min(28.4vw, 409px) */ --ed-hero-art-ratio-desk: auto; /* was 922 / 400 (approved art overlay box 1): the box now fills the hero's height */ --ed-hero-art-ratio-tab: 678 / 159; /* populated mock tablet strip, 766x178 at 768: full-bleed, above the headline (owner 2026-10-09) */ --ed-hero-art-ratio-mob: 386 / 213; /* populated mock mobile art, 386x213 at 390: full-bleed (owner 2026-10-09; was the wireframe's 350/127) */ /* art crops (object-position) and sign placement, set by eye against the mock at each width so faces and titles stay in frame (owner 2026-10-09: "no hardocding!") */ --ed-hero-crop-desk: 50% 8%; --ed-hero-crop-tab: 50% 12%; --ed-hero-crop-mob: 50% 50%; --ed-hero-art-pad: 7%; /* top padding of the hero art box, share of its width (was typed in rel8r-editorial.css) */ /* mobile focal zoom (owner 2026-10-09 Treatment B): the art is scaled about this origin inside its clipped box so the couple and the gauges approach the mock's focal scale. 1 = no zoom (Treatment A). */ --ed-hero-zoom-mob: 1.6; /* owner 2026-10-09: Treatment B approved as the provisional mobile layout */ --ed-hero-zoom-origin-mob: 88% 24%; /* COA-126 (2026-10-28): focal point moved right and up for hero-main-v2 so a 390 phone shows both diegetic brand marks, the brass hood ornament and the neon Rel8r sign, plus both faces; the approved 1.6x zoom is unchanged (was 45% 35%, set for the v2 convertible) */ --ed-style-crop: 50% 0; /* S06 pocket coach art (owner 2026-10-09: edit B of candidate v2 in the tested layout). Phones zoom onto the coach and the phone (M2); tablet and desktop show the whole head, the phone and the props. */ --ed-coach-inlay-w: 14%; /* WF7: the two live dials over the scene, as a share of the art's width; each gauge ring was ~215px of 1536 */ --ed-coach-inlay-anx-x: 8.8%; /* hub of the ANXIETY gauge in the art: (135, 652) of 1536x1024 */ --ed-coach-inlay-avo-x: 23.1%; /* hub of the AVOIDANCE gauge: (355, 652) */ --ed-coach-inlay-y: 63.7%; --ed-coach-crop-y-mob: 0%; /* the vertical crop point of the scene (was object-position 50% 0%); the plate centres horizontally */ --ed-coach-crop-y-tab: 32%; --ed-coach-crop-y-desk: 32%; --ed-coach-zoom-mob: 1.6; /* the 390x230 box shows x 290-1250, y 99-665 of the 1536x1024 art */ --ed-coach-zoom-origin-mob: 50.4% 26%; /* of the 3:2 plate (WF7); 29% of the old 230px box = 26% of the 260px plate, same window */ --ed-hero-pad-top-desk: 0px; --ed-hero-pad-bot-desk: 0px; --ed-hero-cols-art: 7; /* blueprint S02 7 / 5 (was 8 / 4 since the art overlay, 2026-10-09): the copy stage was 445px at 1440 and the trust row broke onto three lines */ --ed-hero-cols-copy: 5; --ed-hero-h-desk: 56; /* H1 size at 1440 (unitless, read as --d): REALLY HAPPENING. sits flush in the 5-column copy stage */ --ed-hero-btn-pad-desk: 1.2em; /* hero CTA padding: both CTAs fit one row inside the 5-column copy stage, 1024-1440px */ --ed-hero-cta-gap-desk: 1em; /* gap between the hero CTAs, scales with the button type */ /* S03 attachment styles: cards 329x247 (desktop), 343x257 (tablet 2x2), 81x106 (mobile 4 across); owner 2026-10-14 (WF2): taller so all fields show, so desktop and tablet cards take the pack art's own 4:3 (1448x1086) and crop nothing */ --ed-styles-pad-top-desk: var(--ed-band-pad-desk); /* was 17px; the 8-point band step since 2026-10-24 */ --ed-styles-pad-bot-desk: var(--ed-band-pad-desk); /* was 13px */ --ed-style-ratio-desk: 1448 / 1086; /* was 300 / 163 (approved art overlay boxes 3-6) until WF2 */ --ed-style-ratio-tab: 1448 / 1086; /* was 343 / 102 */ /* S04 two dials: band 247px; dials 250px (desktop), 176px (tablet), 105px (mobile); support box 329x228 */ --ed-dials-pad-top-desk: var(--ed-band-pad-desk); /* was 0px */ --ed-dials-pad-bot-desk: var(--ed-band-pad-desk); /* was 0px */ --ed-dials-dial-w-desk: 21.75vw; /* 313px at 1440: a quarter bigger (owner 2026-10-09) */ --ed-dials-dial-w-tab: 28.75vw; /* 221px at 768 */ --ed-dials-dial-w-mob: 33.6vw; /* 131px at 390 */ /* blueprint S05 nineteen moments: H 280-360px (target 340px), pad 60px top and bottom; wide landscape cards as drawn */ --ed-moments-pad-top-desk: var(--ed-band-pad-desk); /* was 12px */ --ed-moments-pad-bot-desk: var(--ed-band-pad-desk); /* was 12px */ --ed-moments-card-ratio-desk: 2 / 1; /* 318x159px at 1440: section ~343px */ --ed-coach-plate-ratio: 1448 / 1086; /* action diorama with Aleksandra: Coach Hype in COACH hat & latex */ --ed-coach-scene-ratio-mob: 39 / 23; /* 390x230 full-bleed at 390 (owner 2026-10-09, M2) */ --ed-coach-scene-ratio-tab: 366 / 163; /* the populated mock's tablet art, 366x163 at 768; bleeds right */ --ed-coach-scene-ratio-desk: 16 / 7; /* 1019x446 at 1440 (owner 2026-10-09, option A): whole head, phone and props */ --ed-coach-cols-tab: minmax(0, 3fr) minmax(0, 2fr); /* copy column 401px at 768: heading and CTA each fit on one line */ --ed-coach-cols-desk: minmax(0, 3fr) minmax(0, 9fr); /* S06 pocket coach: section 464px at 1440 (option A), about 179 at 768 and about 360 at 390 */ --ed-coach-pad-top-desk: var(--ed-band-pad-desk); /* was 6px */ --ed-coach-pad-bot-desk: var(--ed-band-pad-desk); /* was 12px */ /* S07 earned security: the WE REL8! lineup (earned-security-cast-v10.png, 1672x941) shown whole at every width (owner 2026-10-24: the header container "truncates/crowds the "We Relate" group graphic"). The ratio tokens were 1092/179, 459/116 and 348/60, which showed 29.2%, 45.0% and 30.8% of the art's height and cut off the boots. The ceiling keeps the whole lineup inside a short screen; past it the art letterboxes, never crops. */ --ed-earned-pad-top-desk: var(--ed-band-pad-desk); /* was 15px */ --ed-earned-pad-bot-desk: var(--ed-band-pad-desk); /* was 4px */ --ed-earned-cols-cast: 9; --ed-earned-cols-copy: 3; --ed-earned-cast-ratio-desk: 1672 / 941; --ed-earned-cast-ratio-tab: 1672 / 941; --ed-earned-cast-ratio-mob: 1672 / 941; --ed-earned-cast-max-h: 80svh; /* S08 what you get: band 100px; heading 2 columns, five products 218x81 in 10; tablet 79x54; mobile 55x40 */ --ed-get-pad-top-desk: var(--ed-band-pad-desk); /* was 40px (WF9: the row grew from a strip to five squares with names) */ --ed-get-pad-bot-desk: var(--ed-band-pad-desk); /* was 28px */ --ed-get-tile-ratio-desk: 1 / 1; /* WF9 (owner 2026-10-15): the 440x440 product art shown whole and large; was 218 / 81 */ --ed-get-tile-ratio-tab: 1 / 1; --ed-get-tile-ratio-mob: 1 / 1; /* S09 trust strip: band 90px, icons 45px */ --ed-trust-pad-top-desk: var(--ed-band-pad-desk); /* was 22px */ --ed-trust-pad-bot-desk: var(--ed-band-pad-desk); /* was 20px */ /* S10 final call: band 113px; content centred in the band; on the band scale too */ --ed-final-pad-top-desk: var(--ed-band-pad-desk); /* was 0px */ --ed-final-pad-bot-desk: var(--ed-band-pad-desk); /* was 0px */ --ed-final-h-min-desk: min(7.85vw, 113px); /* S11 footer: band 79px */ --ed-footer-h-desk: 79px; /* content pages migrated to the editorial system (2026-10-09): every section is an .ed-band, text is .ed-body, headings are .ed-poster; these tokens are their only values (owner: "no hardcoding please" / "A REAL MIGRATION") */ --ed-doc-max: 760px; /* reading measure: .ed-wrap width on a text band */ --ed-doc-pad-top: 32px; /* band padding on a text band */ --ed-doc-pad-bot: 32px; --ed-doc-pad-first: 56px; /* the page's opening band */ --ed-doc-flow: 12px; /* between blocks inside a band */ --ed-doc-lh: 1.5; /* body line height on text pages */ --ed-h1-m: 40.7; --ed-h1-t: 56; --ed-h1-d: 64; --ed-h1-lh: 0.92; /* page title (px at 390 / 768 / 1440) */ --ed-h2-m: 22; --ed-h2-t: 26; --ed-h2-d: 28; --ed-h2-lh: 1; /* section heading */ --ed-alpha-text: 0.9; /* body text on the stage */ --ed-alpha-meta: 0.6; /* dates, small print */ --ed-fine-size: 0.75rem; /* fine print: 12px at the default root, grows with browser text size (WCAG 1.4.4); 5.8:1 contrast on the stage (measured 2026-10-15) with --ed-alpha-meta (WCAG 1.4.3). Rule: Machine-Norms standards/DISCLOSURE-AND-FINE-PRINT-STANDARD.md */ --ed-fine-lh: 1.4; /* fine print line height */ --ed-alpha-line: 0.45; /* panel and route borders */ --ed-alpha-fill: 0.55; /* panel and route fill */ --ed-alpha-glow: 0.12; /* panel glow */ /* Antique gold frame (COA-117): the one gold family every page frames with, built only from the logo's sampled channels (--ch-gold-edge / -specular / -deep / -foil). Header and footer mirror each other; cards, tags, kickers, controls and the "Need a moment?" panel use the same line, bevel and foil, so no page mixes its own gold. Pink stays the action colour. */ --gold-line: rgb(var(--ch-gold-edge) / var(--ed-alpha-line)); /* hairline frame on cards, tags, panels */ --gold-line-hot: rgb(var(--ch-gold-specular) / var(--ed-alpha-fill)); /* the same frame on hover or when chosen */ --gold-text: rgb(var(--ch-gold-foil)); /* kickers, tags, small foil type */ --gold-bevel: inset 0 1px 0 rgb(var(--ch-gold-specular) / var(--ed-alpha-line)), inset 0 -1px 0 rgb(var(--ch-gold-deep) / var(--ed-alpha-fill)); --gold-glow: 0 0 12px rgb(var(--ch-gold-edge) / var(--ed-alpha-glow)); --gold-rule: linear-gradient(90deg, transparent, rgb(var(--ch-gold-deep)) 12%, rgb(var(--ch-gold-edge)) 32%, rgb(var(--ch-gold-specular)) 50%, rgb(var(--ch-gold-edge)) 68%, rgb(var(--ch-gold-deep)) 88%, transparent); --gold-rule-h: 1px; /* section seam */ --gold-frame-h: 2px; /* the header's bottom edge and the footer's top edge */ --gold-chassis: linear-gradient(180deg, rgb(var(--ch-stage-soft)), rgb(var(--ch-stage))); /* blackened panel fill */ --ed-route-cols: 2; /* link tiles per row from 768px */ --ed-fw-regular: 400; --ed-fw-semi: 600; --ed-fw-bold: 700; --ed-fw-heavy: 800; --ed-fw-black: 900; /* type weights */ /* page components (guides, compass, reader), 2026-10-09 migration */ --ed-card-pad: 20px; --ed-card-gap: 12px; /* inside a card */ --ed-grid-gap: 16px; /* between cards */ --ed-grid-cols-tab: 2; --ed-grid-cols-desk: 3; --ed-grid-cols-wide: 4; --ed-intro-cols: 1fr 1fr; /* copy | art on the intro band from 1024px */ --ed-sheet-max: 672px; /* detail sheet (dialog) width */ --ed-art-w-card: 224px; /* a pack inside a card */ --ed-art-w-sheet: 256px; /* a pack inside the sheet */ --ed-art-w-obj: 128px; /* an isolated object */ --ed-aside-w: 480px; /* an illustration set beside or under the copy */ --ed-toast-bottom: 24px; --ed-alpha-scrim: 0.7; /* dialog backdrop */ --ed-thumb-cols: 2; /* small pack versions under a large one */ --ed-full: 100%; /* fill the container */ --ed-half: 50%; /* half the container */ --ed-bubble-max: 384px; /* chat bubble width */ --ed-alpha-bubble: 0.12; /* the other person's bubble fill */ --ed-radius-round: 50%; /* a circle */ --ed-radius-pill: 9999px; /* fully rounded ends on a pill */ --ed-dial-read-intro: 0deg; /* compass explainer dials: needle straight up, the middle of the scale */ /* iMessage thread tokens (IMESSAGE-NARRATIVE-THREAD-FORMAT-SSOT.md) */ --imessage-thread-margin: 20px 0 24px; --imessage-thread-gap: 8px; --imessage-thread-max-w: 440px; --imessage-bubble-who-size: 0.72rem; --imessage-bubble-who-margin: 4px 0 2px 8px; --imessage-bubble-max-w: 82%; --imessage-bubble-pad: 10px 16px; --imessage-bubble-size: 0.95rem; --imessage-bubble-lh: 1.38; --imessage-bubble-radius-sent: 18px 18px 4px 18px; --imessage-bubble-radius-rcvd: 18px 18px 18px 4px; --imessage-bubble-tail-w: 10px; --imessage-bubble-tail-h: 12px; --imessage-bubble-tail-offset-r: -5px; --imessage-bubble-tail-offset-l: -5px; --imessage-status-size: 0.68rem; --imessage-status-mt: 1px; --imessage-status-pad: 0 4px; --imessage-mobile-mt: 12px; --imessage-spring-curve: cubic-bezier(0.175, 0.885, 0.32, 1.275); --imessage-spring-duration: 380ms; --imessage-typing-dot-size: 7px; --imessage-typing-dot-gap: 4px; --imessage-typing-pad: 12px 16px; --imessage-typing-min-h: 38px; --imessage-typing-duration: 1.4s; --imessage-typing-delay-1: 0ms; --imessage-typing-delay-2: 200ms; --imessage-typing-delay-3: 400ms; --ed-scale-dot: 40px; /* compass answer circle */ --ed-scale-dot-mob: 34px; --ed-progress-h: 12px; --ed-plot-label: 3px; /* plot label size, in the plot's own 0-100 units */ --ed-plot-dash: 2 2; --ed-plot-line: 0.4px; --ed-plot-dot-line: 0.8px; --ed-vh-full: 100dvh; /* full dynamic viewport height */ --ed-radius-box: clamp(6px, 0.7vw, 10px); --ed-z-content: 20; --ed-z-nav: 100; --ed-z-over: 2; /* a label or dial needle over its own card */ /* Moment sheet on phones (COA-100): flex order of the opened card's parts. Head, then MY MOVE + the script + the next step (lead), then the two illustrations (art), then everything else (rest). Desktop keeps the DOM order. */ --ed-order-head: 0; --ed-order-lead: 1; --ed-order-art: 2; --ed-order-rest: 3; --ed-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ed-fast: 160ms; --ed-needle-swing: 1.4s; /* dial needle swing to its reading */ --ed-needle-twitch: 0.7s; /* dial needle twitch on hover */ /* editorial lengths: every absolute length rel8r-editorial.css draws, as the layout reference measures it (px at the 390 / 768 / 1440 anchors). The frame consumes these and holds no raw px; scripts/check-hardcoding.mjs (css_px) fails any new raw length. --ed-px casts the unitless type anchors (--m, --t, --d) to pixels. */ --ed-px: 1px; --ed-len-1: 1px; --ed-len-1-5: 1.5px; --ed-len-2: 2px; --ed-len-3: 3px; --ed-len-4: 4px; --ed-len-5: 5px; --ed-len-6: 6px; --ed-len-8: 8px; --ed-len-10: 10px; --ed-len-11: 11px; --ed-len-12: 12px; --ed-len-13: 13px; --ed-len-14: 14px; --ed-len-15: 15px; --ed-len-16: 16px; --ed-len-17: 17px; --ed-len-18: 18px; /* live-site values that were typed in rel8r-editorial.css, blister-slots.css and head.html (same values, now named) */ --ed-style-crop-card: 66% 40%; --ed-dial-hub: 43.75% 56.25%; --ed-dial-anxiety-nl: 32.3%; --ed-dial-anxiety-nt: 35.6%; --ed-dial-anxiety-nw: 40%; --ed-dial-avoidance-nl: 31.9%; --ed-dial-avoidance-nt: 33.9%; --ed-dial-avoidance-nw: 40%; --ed-moments-card: 76%; --ed-moments-glow: ellipse 70% 90% at 50% 100%; --ed-moments-glow-end: 70%; --ed-moments-slack: 3.3%; --ed-toygrid-dot: 0.8px; --ed-toygrid-cell: 24px; --ed-toygrid-opacity: 0.07; /* the toy grid is a faint texture, not a pattern */ --ed-hub-note-bg: rgb(255 255 255 / .78); --ed-hub-note-shadow: 0 10px 24px rgb(var(--ch-navy) / .06); --bp-radius: 1rem; --bp-radius-small: .75rem; --bp-obj-max: 8rem; --bp-gap: .5rem; --bp-gap-wide: 1rem; --bp-card-max: 14rem; --bp-sheet-max: 16rem; --ed-len-20: 20px; --ed-len-22: 22px; --ed-len-24: 24px; --ed-len-25: 25px; --ed-len-26: 26px; --ed-len-28: 28px; --ed-len-30: 30px; --ed-len-31: 31px; --ed-len-32: 32px; --ed-len-34: 34px; --ed-len-36: 36px; --ed-len-40: 40px; --ed-len-42: 42px; --ed-len-45: 45px; --ed-len-46: 46px; --ed-len-48: 48px; --ed-len-50: 50px; --ed-len-60: 60px; --ed-len-62: 62px; --ed-len-68: 68px; --ed-len-70: 70px; --ed-len-72: 72px; --ed-len-80: 80px; --ed-len-100: 100px; --ed-len-140: 140px; --ed-len-160: 160px; --ed-len-220: 220px; --ed-len-280: 280px; --ed-len-290: 290px; --ed-len-390: 390px; --ed-len-400: 400px; --ed-len-410: 410px; --ed-len-440: 440px; --ed-len-540: 540px; --ed-len-680: 680px; --ed-len-820: 820px; --ed-len-900: 900px; --ed-len-999: 999px; --ed-len-1200: 1200px; --ed-len-1600: 1600px; /* story reader lengths in rem (scripts/dating-red-flags/generate_dating_red_flags_html.mjs): the same values the reader stylesheet drew as typed rem; a rem token scales with the root text size as the literal did. */ --ed-len-0-5rem: 0.5rem; --ed-len-0-65rem: 0.65rem; --ed-len-0-68rem: 0.68rem; --ed-len-0-7rem: 0.7rem; --ed-len-0-72rem: 0.72rem; --ed-len-0-75rem: 0.75rem; --ed-len-0-76rem: 0.76rem; --ed-len-0-78rem: 0.78rem; --ed-len-0-8rem: 0.8rem; --ed-len-0-8125rem: 0.8125rem; --ed-len-0-82rem: 0.82rem; --ed-len-0-875rem: 0.875rem; --ed-len-0-92rem: 0.92rem; --ed-len-0-95rem: 0.95rem; --ed-len-0-98rem: 0.98rem; --ed-len-1rem: 1rem; --ed-len-1-15rem: 1.15rem; --ed-len-1-25rem: 1.25rem; --ed-len-1-35rem: 1.35rem; --ed-len-1-45rem: 1.45rem; --ed-len-1-5rem: 1.5rem; --ed-len-1-8rem: 1.8rem; --ed-len-1-9rem: 1.9rem; --ed-len-2-4rem: 2.4rem; --ed-len-2-5rem: 2.5rem; --ed-len-2-6rem: 2.6rem; --ed-len-3rem: 3rem; --ed-len-3-2rem: 3.2rem; /* editorial relative measures: every em / vw / vh rel8r-editorial.css draws. An em token resolves against the element that reads it (custom properties substitute as written), so type-relative spacing still scales with each element's size; vw tokens are the fluid slopes between the 390 / 768 / 1440 anchors. check-hardcoding.mjs (css_relative) fails any new raw relative length. */ --ed-em-0-01: 0.01em; --ed-em-0-03: 0.03em; --ed-em-0-04: 0.04em; --ed-em-0-1: 0.1em; --ed-em-0-12: 0.12em; --ed-em-0-3: 0.3em; --ed-em-0-35: 0.35em; --ed-em-0-5: 0.5em; --ed-em-0-55: 0.55em; --ed-em-0-6: 0.6em; --ed-em-0-7: 0.7em; --ed-em-0-84: 0.84em; --ed-em-0-97: 0.97em; --ed-em-1: 1em; --ed-vw-1: 1vw; --ed-vw-1-5: 1.5vw; --ed-vw-1-6: 1.6vw; --ed-vw-1-7: 1.7vw; --ed-em-1-8: 1.8em; --ed-vw-1-8: 1.8vw; --ed-em-1-9: 1.9em; --ed-vw-2: 2vw; --ed-vw-4: 4vw; --ed-vw-4-7: 4.7vw; --ed-em-2-2: 2.2em; --ed-em-2-4: 2.4em; --ed-em-2-6: 2.6em; --ed-em-2-7: 2.7em; --ed-em-2-9: 2.9em; --ed-vw-2-9: 2.9vw; --ed-em-3: 3em; --ed-em-3-1: 3.1em; --ed-em-3-2: 3.2em; --ed-em-3-5: 3.5em; --ed-em-4-1: 4.1em; --ed-em-4-5: 4.5em; --ed-vw-5-4: 5.4vw; --ed-vw-100: 100vw; --ed-svh-60: 60svh; /* a share of the small viewport height (the hero band on desktop) */ /* ---- 2. Semantic roles ------------------------------------------------ */ --c-canvas: rgb(var(--ch-canvas)); --c-surface: #ffffff; --c-text: #1e293b; --c-text-muted: #475569; --c-line: #e2e8f0; /* ---- 3. Typography ---------------------------------------------------- */ --font-display: 'Fredoka', 'Plus Jakarta Sans', system-ui, sans-serif; --font-headline: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Nunito Sans', system-ui, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace; --font-poster: 'Barlow Condensed', 'Plus Jakarta Sans', system-ui, sans-serif; /* editorial home headlines (weight 900) */ --font-label: 'Barlow Condensed', 'Plus Jakarta Sans', system-ui, sans-serif; /* editorial home: artwork-container labels (500 / 400), as drawn */ /* ---- 3b. Size Scale (font sizes, spacing, component dimensions) ------ */ /* Font sizes - map directly to arbitrary text-[Npx] values in code */ --size-text-xs: 9px; /* captions, legal */ --size-text-sm: 10px; /* microcopy */ --size-text-base: 11px; /* UI labels */ --size-text-md: 13px; /* body small */ --size-text-lg: 14px; /* body */ --size-text-xl: 15px; /* body large */ --size-text-2xl: 16px; /* emphasis */ --size-text-3xl: 17px; /* subheads */ --size-text-4xl: 18px; /* small headings */ --size-text-5xl: 20px; /* headings */ --size-text-6xl: 22px; /* large headings */ --size-text-7xl: 26px; /* hero */ --size-text-8xl: 32px; /* display */ /* Spacing scale - 4px base unit */ --size-space-1: 4px; --size-space-2: 8px; --size-space-3: 12px; --size-space-4: 16px; --size-space-5: 20px; --size-space-6: 24px; --size-space-8: 32px; --size-space-10: 40px; --size-space-12: 48px; --size-space-16: 64px; --size-space-20: 80px; --size-space-24: 96px; /* Component widths */ --size-card-sm: 460px; --size-card-md: 550px; --size-card-lg: 600px; --size-card-xl: 650px; /* Component heights */ --size-hero-sm: 400px; --size-hero-md: 550px; --size-hero-lg: 600px; --size-hero-xl: 650px; /* ---- 4. Radii / elevation / motion ----------------------------------- */ --r-sm: .5rem; --r-md: 1rem; --r-lg: 1.5rem; --r-xl: 2rem; --r-2xl: 2.5rem; --r-pill: 9999px; --sh-hero: 0 20px 50px rgb(var(--ch-pink) / .12); --sh-header: 0 4px 24px rgb(var(--ch-pink) / .08); --sh-lacquer: 0 12px 30px rgb(0 0 0 / .25); --sh-icon: 0 4px 12px rgb(var(--ch-yellow) / .5); --sh-tag: 0 3px 10px rgb(var(--ch-hot) / .35); --sh-badge: 0 2px 4px rgb(0 0 0 / .2); --sh-cyan: 0 15px 35px rgb(var(--ch-cyan) / .18); --sh-pink: 0 15px 35px rgb(var(--ch-pink) / .18); --sh-yellow: 0 15px 35px rgb(var(--ch-yellow) / .18); --sh-navy: 0 15px 35px rgb(var(--ch-navy) / .18); --sh-cyan-soft: 0 10px 25px rgb(var(--ch-cyan) / .12); --sh-pink-soft: 0 10px 25px rgb(var(--ch-pink) / .12); --sh-yellow-soft: 0 10px 25px rgb(var(--ch-yellow) / .15); --sh-lime-soft: 0 10px 25px rgb(var(--ch-lime) / .15); --sh-deck: 0 25px 60px rgb(var(--ch-magenta) / .3); --sh-frame: 0 25px 60px rgb(var(--ch-hot) / .35); --sh-card: 0 15px 35px rgb(var(--ch-cyan) / .18); --sh-foil: inset 0 1px 0 rgb(255 243 176 / .8), inset 0 -1px 0 rgb(179 119 0 / .6), 0 4px 14px rgb(0 0 0 / .6); /* drop-shadow filters */ --drop-logo: 0 4px 8px rgb(0 0 0 / .15); --drop-hero: 0 2px 4px rgb(var(--ch-pink) / .2); --ease-pop: cubic-bezier(.34, 1.56, .64, 1); --dur-pop: 240ms; /* "Need a moment?" panel (COA-87; site/need-a-moment.css) */ --nam-line: 2px; /* button and dialog border */ --nam-focus: 3px; /* keyboard focus ring */ --nam-width: 32rem; /* dialog width at most */ --nam-fade: 0.15s; /* hover colour change */ --nam-clear: calc(var(--size-space-12) + 2 * var(--size-space-4)); /* room kept under the footer so the fixed bottom-left opener never covers it */ /* ---- 5. Component tokens --------------------------------------------- */ /* bevel (3D) button stops */ --bevel-yellow-top: #ffe55c; --bevel-yellow-bottom: #ffc000; --bevel-yellow-edge: #cc8800; --bevel-pink-top: #ff4d9d; --bevel-pink-bottom: #ff0073; --bevel-pink-edge: #b3004e; --bevel-cyan-top: #38d6ff; --bevel-cyan-bottom: #0099e6; --bevel-cyan-edge: #006da3; /* --- The 8 Brand Mark (Canon / GOLD) --- */ --eight-masc: #1b2a6b; --eight-fem: rgb(var(--ch-pink)); --eight-mid: #8b3a9e; --eight-gradient: linear-gradient(180deg, var(--eight-fem) 0%, var(--eight-mid) 50%, var(--eight-masc) 100%); } /* ============================================================================ Story reader: Spread 62 cascading triptych (scripts/dating-red-flags/generate_dating_red_flags_html.mjs) Dimensions only. The PDF templates and the standalone reader link this file; the site reader already loads it. ========================================================================= */ :root { --story-hairline: 1px; --story-pano-text-max: 760px; --story-tri-pad: 36px 44px 44px; --story-tri-pad-print: 20px 24px; --story-tri-pad-mob: 24px 18px 32px; --story-tri-gap: 28px; --story-tri-grid-gap: 36px 44px; --story-tri-grid-gap-mob: 24px; --story-tri-frame-shadow: 0 16px 36px -8px oklch(0.2 0.03 60 / 0.28); --story-tri-radius: 6px; --story-tri-cap-mt: 10px; --story-tri-cap-pad: 8px 12px; --story-tri-cap-radius: 4px; --story-tri-cap-gap: 2px; --story-seq-size: 0.72rem; --story-seq-track: 0.08em; --story-desc-size: 0.8125rem; --story-prose-size: 1.125rem; --story-prose-mb: 16px; --story-dropcap-size: 3.4rem; --story-dropcap-pt: 4px; --story-dropcap-pr: 10px; --story-dropcap-pb: 2px; --story-foot-pt: 16px; --story-foot-mt: 12px; --story-foot-size: 0.75rem; --story-cta-band-margin: 20px 0 28px; --story-cta-gap: 0.55em; --story-cta-h: 48px; --story-cta-pad: 0 24px; --story-cta-border: 2px; --story-cta-radius: 0.7em; --story-cta-font-size: 0.85rem; --story-cta-letter-spacing: 0.04em; --story-cta-shadow: 0 4px 14px rgb(0 0 0 / 0.5); --story-cta-shadow-hover: 0 8px 24px rgb(0 0 0 / 0.65); --story-cta-hover-lift: -2px; --story-art-aspect-ratio: 9 / 16; --story-art-aspect-ratio-panoramic: 1672 / 941; /* Story reader type tracking, motion, layers and print geometry (COA-107: the generator's last typed values) */ --story-track-tight: -0.01em; --story-track-xs: 0.02em; --story-track-sm: 0.05em; --story-track-md: 0.08em; --story-track-lg: 0.1em; --story-track-xl: 0.12em; --story-track-2xl: 0.14em; --story-dur-fast: 0.15s; --story-dur-base: 0.18s; --story-z-card-corner: 2; /* deep-dive corner ornament */ --story-z-card-content: 3; /* deep-dive header, body and cites over the ornament */ --story-z-tape: 5; /* washi tape over the art */ --story-z-gutter: 10; /* the book's centre gutter shadow */ --story-z-super: 11; /* the spread super-title over the gutter */ --story-prose-indent: 1.5em; --story-print-page-h: 100vh; /* one printed page (print media) */ --story-glow-fade: 75%; --story-gutter-shade: 6%; --story-split-at: 33.333%; --story-deckle-max: 92%; --story-art-intrinsic-size: 900px 1600px; /* Story reader: Print / PDF layout tokens */ --story-print-pad: 34px 44px 26px 54px; --story-print-red-line: 38px; --story-print-prose-size: 1.05rem; --story-print-prose-lh: 1.55; --story-print-prose-mb: 14px; --story-print-p-mb: 10px; --story-print-dropcap: 2.8rem; --story-print-card-mt: 14px; --story-print-card-pad: 12px 18px; --story-print-card-body-size: 0.88rem; --story-print-card-body-lh: 1.48; --story-print-framework-mt: 8px; --story-print-framework-pt: 6px; --story-print-framework-size: 0.72rem; --story-print-flourish-mt: 14px; --story-print-flourish-pad: 10px 18px; --story-print-note-size: 1.25rem; --story-print-note-lh: 1.35; --story-print-foot-mt: 12px; --story-print-foot-pt: 8px; --story-print-dia-mb: 8px; --story-print-dia-pad: 6px 12px; --story-print-dia-size: 0.95rem; --story-print-dia-lh: 1.45; --story-print-spot-max-h: 180px; --story-print-spot-mb: 12px; --story-print-super-pad: 26px 40px 4px; --story-print-art-pad: 10px 20px 24px; --story-print-art-max-h: calc(100vh - 220px); --story-print-tri-p-size: 1rem; --story-print-tri-p-lh: 1.5; --story-print-tri-p-mb: 8px; --story-print-tri-card-mt: 10px; --story-print-tri-card-pad: 10px 14px; --story-print-tri-art-max-h: 250px; } /* ============================================================================ Base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { overscroll-behavior: none; background: var(--c-canvas); } ::-webkit-scrollbar { display: none; } /* Visible, brand-consistent focus for every interactive element */ :focus-visible { outline: 3px solid rgb(var(--ch-sky)); outline-offset: 2px; border-radius: var(--r-sm); } /* ============================================================================ Blister-pack primitives ========================================================================= */ /* Peg-hole cutout at the top of a toy card */ .blister-peg { width: 58px; height: 14px; background: radial-gradient(circle at center, rgb(0 0 0 / .25) 0%, rgb(0 0 0 / .08) 70%, transparent 100%); border: 1.5px solid rgb(255 255 255 / .85); box-shadow: inset 0 2px 4px rgb(0 0 0 / .35); border-radius: var(--r-pill); } /* Glossy plastic reflection sweeping a card */ .blister-sheen { background: linear-gradient(135deg, rgb(255 255 255 / .7) 0%, rgb(255 255 255 / .15) 30%, transparent 60%); } /* ============================================================================ Bevel (3D) buttons ========================================================================= */ .btn-3d, .btn-3d-yellow, .btn-3d-pink, .btn-3d-cyan { border: 0; cursor: pointer; text-decoration: none; transition: transform var(--dur-pop) var(--ease-pop), box-shadow var(--dur-pop) var(--ease-pop), filter 160ms ease; } .btn-3d-yellow { background: linear-gradient(180deg, var(--bevel-yellow-top) 0%, var(--bevel-yellow-bottom) 100%); box-shadow: 0 5px 0 var(--bevel-yellow-edge), 0 10px 20px rgb(0 0 0 / 0.4); } .btn-3d-pink { background: linear-gradient(180deg, var(--bevel-pink-top) 0%, var(--bevel-pink-bottom) 100%); box-shadow: 0 5px 0 var(--bevel-pink-edge), 0 10px 20px rgb(0 0 0 / 0.4); } .btn-3d-cyan { background: linear-gradient(180deg, var(--bevel-cyan-top) 0%, var(--bevel-cyan-bottom) 100%); box-shadow: 0 5px 0 var(--bevel-cyan-edge), 0 10px 20px rgb(0 0 0 / 0.4); } .btn-3d-yellow:hover, .btn-3d-pink:hover, .btn-3d-cyan:hover { filter: brightness(1.06); } .btn-3d-yellow:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--bevel-yellow-edge), 0 4px 10px rgb(0 0 0 / 0.3); } .btn-3d-pink:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--bevel-pink-edge), 0 4px 10px rgb(0 0 0 / 0.3); } .btn-3d-cyan:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--bevel-cyan-edge), 0 4px 10px rgb(0 0 0 / 0.3); } /* ============================================================================ Foil treatments ========================================================================= */ .gold-foil-border { border: 2px solid rgb(var(--ch-foil)); box-shadow: var(--sh-foil); } .gold-emboss { color: rgb(var(--ch-gold)); font-weight: 700; text-shadow: 0 1px 2px rgb(0 0 0 / 0.8); } /* ============================================================================ Moments filter tabs ========================================================================= */ .moment-tab[aria-pressed="true"] { background: rgb(var(--ch-pink-700)); /* small white text: pink 700 meets WCAG AA (owner 2026-10-03: darker shades for small text) */ color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.2); } /* ============================================================================ Motion ========================================================================= */ @keyframes od-toast-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .toast-in { animation: od-toast-in 260ms var(--ease-pop) both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---- 6. Self-hosted fonts (no Google requests at runtime) ---------------- */ /* ============================================================================ Attachment story two-panel pair (design/redesign-v3/MOBILE_TWO_PANEL_FRAMEWORK.md, Phase 1 §5.1). Consumed by site-src/generated/attachment-story-css.html (.att2-*). Dimensions, type sizes and the placeholder crop stops only; every colour is a primitive above. R2 gutter, R3 ratio, R10 caption size and measure. ========================================================================= */ :root { --att2-panel-ratio: 4 / 5; /* R3: both panels; the frame grows with its captions and never clips owner text (R4) */ --att2-macro-min: 125cqw; /* §5.1: the placeholder macro window is a 4:5 crop of the panel's width, taller when the frame has room */ --att2-gutter-mob: 8px; /* R2: constant gutter under 900px */ --att2-gutter-desk: 12px; /* R2: from 900px, the two panels side by side */ --att2-pad: 12px; /* inside a panel and inside every box */ --att2-pad-tight: 8px; --att2-box-gap: 8px; /* between the stacked rows of a panel */ --att2-radius-panel: 8px; --att2-radius-box: 4px; --att2-radius-balloon: 18px; --att2-line: 1px; /* hairlines and balloon outlines */ --att2-caption-size-mob: 16px; /* R10: caption body on phones */ --att2-caption-size-desk: 17px; --att2-caption-lh: 1.45; --att2-measure: 42ch; /* R10: caption measure */ --att2-banner-size: 15px; /* angled_banner_newsprint */ --att2-banner-lh: 1.15; --att2-banner-track: 0.06em; --att2-banner-tilt: -1.5deg; --att2-bubble-max: 78%; /* a message's share of the panel width (R5; the thread, owner 2026-10-16) */ --att2-tail: 10px; /* the tail nub on the last message of a run */ --att2-insight-size: 15px; /* R6 insight line */ --att2-strip-size: 14px; /* R8: the two Send & Land lines and the notes summary */ --att2-notes-size: 15px; --att2-crop-left: 0%; /* §5.1 placeholder macro: attachment_art.json `crop` stops for object-position */ --att2-crop-center-left: 25%; --att2-crop-center: 50%; --att2-crop-center-right: 75%; --att2-crop-right: 100%; --att2-crop-y: 50%; } /* fonts:start — GENERATED by scripts/build-site-fonts.mjs from site-src/fonts.json. Do not edit. */ /* site text: Fredoka (display), Plus Jakarta Sans (headline), Nunito Sans (body) */ /* hebrew */ @font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("assets/fonts/X7n64b87HvSqjb_WIi2yDCRwoQ_k7367_DWs89XyHw.woff2") format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } /* latin-ext */ @font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("assets/fonts/X7n64b87HvSqjb_WIi2yDCRwoQ_k7367_DWg89XyHw.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("assets/fonts/X7n64b87HvSqjb_WIi2yDCRwoQ_k7367_DWu89U.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* hebrew */ @font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("assets/fonts/X7n64b87HvSqjb_WIi2yDCRwoQ_k7367_DWs89XyHw.woff2") format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } /* latin-ext */ @font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("assets/fonts/X7n64b87HvSqjb_WIi2yDCRwoQ_k7367_DWg89XyHw.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("assets/fonts/X7n64b87HvSqjb_WIi2yDCRwoQ_k7367_DWu89U.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tCKQ.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tCKQ.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tCKQ.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tCKQ.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tCKQ.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tCKQ.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tCKQ.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tCKQ.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tCKQ.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tCKQ.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tCKQ.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* vietnamese */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tCKQ.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url("assets/fonts/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko70yyygA.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* vietnamese */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko50yyygA.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko70yyygA.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* vietnamese */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko50yyygA.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko70yyygA.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* vietnamese */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko50yyygA.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko70yyygA.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* vietnamese */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko50yyygA.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* icons (Material Symbols Outlined): the complete icon set, stored on the site, at the one setting the pages use (FILL 0, wght 300, GRAD 0, opsz 40; rel8r-editorial.css .ed-ico). Any icon works with no rebuild and no network (owner 2026-10-09: "yes store fon"). */ /* fallback */ @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 300; src: url("assets/fonts/kJF4BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZZLsYEpzC_1qmr5Y0.woff2") format('woff2'); } .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } /* the story reader on reader.html (hand-lettered and book faces) */ /* latin-ext */ @font-face { font-family: 'Architects Daughter'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/KtkxAKiDZI_td1Lkx62xHZHDtgO_Y-bvTYdg4_zg.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Architects Daughter'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/KtkxAKiDZI_td1Lkx62xHZHDtgO_Y-bvTYlg4w.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/Wnz6HAc5bAfYB2Q7azYYmg8.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/Wnz6HAc5bAfYB2Q7ZjYY.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/Wnz6HAc5bAfYB2Q7azYYmg8.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/Wnz6HAc5bAfYB2Q7ZjYY.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/Wnz6HAc5bAfYB2Q7azYYmg8.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/Wnz6HAc5bAfYB2Q7YjYYmg8.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/Wnz6HAc5bAfYB2Q7aDYYmg8.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/Wnz6HAc5bAfYB2Q7ZjYY.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'La Belle Aurore'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/RrQIbot8-mNYKnGNDkWlocovHeI4Eu2EBVk.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'La Belle Aurore'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/RrQIbot8-mNYKnGNDkWlocovHeI4HO2E.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic */ @font-face { font-family: 'Marck Script'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/nwpTtK2oNgBA3Or78gapdwuyzCg_WMM.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'Marck Script'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/nwpTtK2oNgBA3Or78gapdwuyxig_WMM.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Marck Script'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/nwpTtK2oNgBA3Or78gapdwuyyCg_.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYkzbBZD.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYgzbBZD.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url("assets/fonts/cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYYzbA.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/cY9AfjOCX1hbuyalUrK439HyjJBG.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/cY9AfjOCX1hbuyalUrK439DyjJBG.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/cY9AfjOCX1hbuyalUrK4397yjA.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/cY9AfjOCX1hbuyalUrK439HyjJBG.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/cY9AfjOCX1hbuyalUrK439DyjJBG.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/cY9AfjOCX1hbuyalUrK4397yjA.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: 'Reenie Beanie'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/z7NSdR76eDkaJKZJFkkjuvWxXPq1qw.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/i7dPIFZifjKcF5UAWdDRYE58RWq7.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/i7dPIFZifjKcF5UAWdDRYE98RWq7.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/i7dMIFZifjKcF5UAWdDRaPpZUFqaHjyV.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/i7dMIFZifjKcF5UAWdDRaPpZUFuaHjyV.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/i7dMIFZifjKcF5UAWdDRaPpZUFWaHg.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* editorial home headlines (owner's responsive layout reference, 2026-10-05): Barlow Condensed Black for the headlines (its proportions match the reference: caps 53px at the reference width); Medium and Regular for the artwork-container labels, as drawn */ /* vietnamese */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/HTx3L3I-JCGChYJ8VI-L6OO_au7B6x7T2kn3.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/HTx3L3I-JCGChYJ8VI-L6OO_au7B6x_T2kn3.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/HTx3L3I-JCGChYJ8VI-L6OO_au7B6xHT2g.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B4-Lwz3nWuZEC.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B4-Lwz3jWuZEC.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B4-Lwz3bWuQ.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url("assets/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B45L0z3nWuZEC.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url("assets/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B45L0z3jWuZEC.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url("assets/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B45L0z3bWuQ.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* fonts:end */