hyperframes/skills/product-launch-video/phases/design-system/style-presets/retro-zine/preset.md

{
  "name": "retro-zine",
  "label": "Retro Zine",
  "fingerprint": {
    "shadow": "paper-on-paper-offset-slab",
    "border": "3px-solid-ink",
    "motion": "soft-paper-shuffle",
    "density": "editorial-medium-high",
    "contrast": "warm-paper-on-forest",
    "palette-mode": "anchored-pastel"
  },
  "match_signals": [
    { "kind": "condensed_display", "weight": 0.3 },
    { "kind": "thick_solid_border", "weight": 0.25 },
    { "kind": "minimal_decoration", "weight": 0.15 },
    { "kind": "low_saturation", "weight": 0.1 }
  ],
  "best_for": ["publishers", "music + arts brands", "small-batch / craft launches", "creator portfolios", "community decks"],
  "avoid_for": ["polished digital", "hi-tech neon palettes", "consumer SaaS hype", "fintech / enterprise"],
  "chromeFonts": {
    "googleFontsHref": "https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600&family=Caveat:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap",
    "display": "Bebas Neue",
    "body": "Space Grotesk",
    "script": "Caveat",
    "mono": "JetBrains Mono"
  }
}

chromeFonts makes the doc chrome render in the preset's native fonts; brand fonts still apply to §6 components.

§A Director's intent

Risograph-printed zine page in motion. Bebas Neue runs tall, condensed, all-caps with positive tracking for every display moment; Space Grotesk sits at editorial small body (13-16px); Caveat hand-script lands attributions and side notes. Three-face contrast IS the rhythm — one-face slides read as monotonous.

Depth is paper-on-paper offset slabs, not blurred shadows. Hero cards carry a forest-green ::before sitting 12px down-and-right behind a cream card. Stamps and collage pieces tilt -8°/+6°/-5°-to-+5° to read as hand-placed. A subtle SVG fractal-noise grain at 0.07 opacity sits over every scene — the texture that anchors the deck to printed-paper register.

Brand DNA drives accent, anchors carry the paper. The site brand colors light up headlines, drop caps, ribbon bars, stamp text, offset slabs, and inline accents. The warm khaki canvas (--anchor-paper) and soft cream (--anchor-cream) are §8.2 anchor hexes — without them dark or saturated brand DNA muddies the printed-paper identity. Body text and structural borders use var(--ink).

Color role contract: green-on-khaki = emphasis (drop cap, ribbon bar, hero headline); ink-on-khaki = structure (borders, body, body-paired headlines); cream cards layer on khaki as paper-on-paper. The brand-primary takes the green role. Never reverse it — ink-as-emphasis flips the zine voice.

Motion is soft paper-shuffle: gentle opacity + translateY entries, no overshoot, no glide. Decorative elements pop in with a single light tilt; nothing bounces. Three-face typography never animates a face-swap.

Class prefix: rz- — use on every component selector.

Density is non-negotiable. A scene that holds only one centered headline reads as underdesigned; the zine register expects supporting moves (eyebrow, drop cap, hand-script, stamp, ribbon, divider stub). Reserve true sparseness for statement / quote beats.

§B Decoration tokens (merge into design.html :root)

Retro Zine declares structural tokens here (borders, paper offsets, grain overlay, tape footprint, rotation set) plus two anchor hexes that carry the warm-paper identity. Brand DNA flows in via --brand-primary / --brand-secondary / --brand-accent and lights up headlines, drop caps, ribbon bars, and offset slabs.

/* §8.2 exception: paper anchors. Declared once so every khaki/cream surface
   reads as printed paper regardless of brand DNA. Without these anchors, dark
   or high-saturation brands would mute the warm-paper register — breaking the
   zine identity. All other colors source from brand DNA or var(--ink). */
--anchor-paper: #c8b99a; /* warm khaki canvas — default slide surface */
--anchor-paper-dark: #b8a98a; /* tonal sibling for layered surfaces / split halves */
--anchor-cream: #f4efe6; /* soft paper-cream for cards (never pure white) */

/* Structural border weights — black-on-paper. Always var(--ink), no exceptions. */
--border-thick: 3px solid var(--ink); /* card outer, region divider, collage piece */
--border-medium: 2px solid var(--ink); /* column rule, RSVP underline */
--border-fine: 1.5px solid var(--ink); /* grid cell sub-border, ledger header */
--border-hairline: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); /* ledger row divider */

/* Paper-on-paper offset — signature depth move. Slab sits 12px down-right of card. */
--offset-slab: 12px;
--offset-slab-color: var(
  --brand-primary
); /* the green slab; brand-primary carries the emphasis role */

/* Padding scale */
--pad-card-lg: 48px;
--pad-card-md: 32px;
--pad-card-sm: 24px;
--gap-lg: 60px;
--gap-md: 40px;
--gap-sm: 24px;

/* Rotation vocabulary — intentional, never accidental tilt. */
--rot-stamp: -8deg;
--rot-stamp-alt: 6deg;
--rot-collage-a: -3deg;
--rot-collage-b: 4deg;
--rot-collage-c: 2deg;
--rot-collage-d: -5deg;

/* Grain overlay — SVG fractal noise, 0.07 opacity. Required on every scene. */
--grain-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--grain-opacity: 0.07;
--grain-tile: 200px 200px;

§D Font pairing fallback (if brand fonts not on Google Fonts)

Retro Zine forces its display / body / hand-script trio regardless of site DNA — the three-face contrast is the system's typographic argument. Fallbacks below are only used if the primary face fails to load.

• display: 'Bebas Neue' · 'Oswald' · 'Anton' wght 400
• body: 'Space Grotesk' · 'Inter' · 'IBM Plex Sans' wght 400
• mono: 'Caveat' · 'Kalam' · 'Shadows Into Light' wght 600

Note: the mono slot carries the hand-script voice (Caveat / Kalam / Shadows Into Light) — Retro Zine has no machine-mono moment. resolveFont() reads the slot by name, not by role; using mono as the script slot keeps the three-slot contract while binding the system's signature handwritten face.

§T Type-role atlas (Phase 4b reads this to size text correctly)

The atlas is the sole authoring source for non-component text — do NOT invent ad-hoc sizes.

[
  {
    "id": "display-cover",
    "family": "display",
    "purpose": "cover / opening display headline — brand-primary on khaki",
    "px_min": 48, "px_max": 140, "weight": 400, "leading": "0.88", "tracking": "0.04em", "case": "upper",
    "sample_html": "<div class=\"t-trole-display-cover\">{BRAND_NAME}</div>"
  },
  {
    "id": "headline",
    "family": "display",
    "purpose": "primary section headline (green-on-khaki, the loudest editorial voice)",
    "px_min": 42, "px_max": 90, "weight": 400, "leading": "0.95", "tracking": "0.03em", "case": "upper",
    "sample_html": "<div class=\"t-trole-headline\">Section title</div>"
  },
  {
    "id": "statement",
    "family": "display",
    "purpose": "long-form quoted statement on brand-primary surface (cream type)",
    "px_min": 36, "px_max": 90, "weight": 400, "leading": "1.1", "tracking": "0.02em", "case": "upper",
    "sample_html": "<div><span class=\"t-trole-statement\">Stamped, signed, framed. The zine is the message.</span></div>"
  },
  {
    "id": "number-hero",
    "family": "display",
    "purpose": "hero statistic numeral — brand-primary on khaki",
    "px_min": 80, "px_max": 160, "weight": 400, "leading": "1", "tracking": "0.02em", "case": "upper",
    "sample_html": "<div class=\"t-trole-number-hero\">63%</div>"
  },
  {
    "id": "drop-cap",
    "family": "display",
    "purpose": "initial cap leading an editorial paragraph (green, floated, line-height 0.8)",
    "px_min": 48, "px_max": 80, "weight": 400, "leading": "0.8", "tracking": "0.02em", "case": "upper",
    "sample_html": "<p class=\"t-trole-body\"><span class=\"t-trole-drop-cap\">F</span>or the zine register, the drop cap is the editorial fingerprint — green Bebas Neue, floated left, body text wraps around.</p>"
  },
  {
    "id": "label-eyebrow",
    "family": "display",
    "purpose": "eyebrow label above a headline, tracked 0.2em (brand-primary)",
    "px_min": 26, "px_max": 32, "weight": 400, "leading": "1.2", "tracking": "0.2em", "case": "upper",
    "sample_html": "<div class=\"t-trole-label-eyebrow\">Vol. 01 — May 2026</div>"
  },
  {
    "id": "label-spaced",
    "family": "body",
    "purpose": "tracked all-caps label (Space Grotesk 600, ink)",
    "px_min": 24, "px_max": 28, "weight": 600, "leading": "1.2", "tracking": "0.25em", "case": "upper",
    "sample_html": "<div class=\"t-trole-label-spaced\">Section meta · Issue 03</div>"
  },
  {
    "id": "caption-feature",
    "family": "display",
    "purpose": "tracked all-caps caption / feature callout (Bebas, ink)",
    "px_min": 24, "px_max": 30, "weight": 400, "leading": "1.2", "tracking": "0.2em", "case": "upper",
    "sample_html": "<div class=\"t-trole-caption-feature\">— printed in this issue —</div>"
  },
  {
    "id": "hand-script",
    "family": "script",
    "purpose": "author attribution / decorative byline (Caveat 600)",
    "px_min": 30, "px_max": 44, "weight": 600, "leading": "1.3", "tracking": "0", "case": "sentence",
    "sample_html": "<div class=\"t-trole-hand-script\">— our founding principle since day one</div>"
  },
  {
    "id": "hand-script-sm",
    "family": "script",
    "purpose": "small handwritten label or side note",
    "px_min": 26, "px_max": 34, "weight": 400, "leading": "1.3", "tracking": "0", "case": "sentence",
    "sample_html": "<div class=\"t-trole-hand-script-sm\">jotted in the margin</div>"
  },
  {
    "id": "stamp-mark",
    "family": "display",
    "purpose": "approval stamp — ink bg, brand-primary text + 2px border, rotated -8deg",
    "px_min": 24, "px_max": 30, "weight": 400, "leading": "1", "tracking": "0.1em", "case": "upper",
    "sample_html": "<div><span class=\"t-trole-stamp-mark\">Stamped — Vol. 01</span></div>"
  },
  {
    "id": "inline-highlight",
    "family": "body",
    "purpose": "black-on-khaki marker swipe inside a body paragraph (never green)",
    "px_min": 24, "px_max": 28, "weight": 600, "leading": "1.7", "tracking": "0", "case": "sentence",
    "sample_html": "<p class=\"t-trole-body\">A paragraph that needs to <span class=\"t-trole-inline-highlight\">lift one phrase</span> uses the marker treatment.</p>"
  },
  {
    "id": "ribbon-bar",
    "family": "display",
    "purpose": "brand-primary color block with cream uppercase Bebas — section label / accent strip",
    "px_min": 26, "px_max": 34, "weight": 400, "leading": "1", "tracking": "0.15em", "case": "upper",
    "sample_html": "<div><span class=\"t-trole-ribbon-bar\">Featured this issue</span></div>"
  },
  {
    "id": "chip",
    "family": "body",
    "purpose": "tabular ledger category tag (Space Grotesk uppercase, brand-primary fill, cream text)",
    "px_min": 24, "px_max": 28, "weight": 600, "leading": "1", "tracking": "0.06em", "case": "upper",
    "sample_html": "<div><span class=\"t-trole-chip\">Manifesto</span></div>"
  }
]

§E Motion (GSAP consts — REPLACES site ease)

const EASE = {
  entry: "power2.out", // soft paper-shuffle — the template uses cubic-bezier(0.22, 1, 0.36, 1), Material-ish; we map to power2.out for a calm editorial arrival
  emphasis: "power3.out", // statement / quote / stamp punch — slightly firmer than entry, still no overshoot
  exit: "power2.in", // accelerate off the page
  drift: "sine.inOut", // ambient grain-tile drift / hand-script settle
};
const DUR = {
  snap: 0.18,
  med: 0.5,
  slow: 0.9,
};
// RULE: never use back/elastic/bounce. The zine register is "considered editorial" —
//       overshoot reads as digital flourish and breaks the printed-paper voice.
// RULE: stamps and collage pieces enter with a soft fade + slight scale (0.94 → 1),
//       NOT a rotation tween. Rotation is the static signature — animating it
//       turns a hand-placed stamp into a spinning gif. Set the rotation as the
//       starting AND ending value.
// RULE: hand-script (Caveat) elements animate with a write-on or simple fade.
//       Never tween letter-spacing on Caveat — the ballpoint voice depends on
//       fixed kerning.
// RULE: grain overlay never animates. It is a static texture; movement turns it
//       into TV static.

§E.5 Motion choreography

Allowed primitives

• Soft fade + 20px translateY entry on the primary scene moment (matches template's .slide enter).
• Drop cap pop: 0 → 1 opacity + 0.94 → 1 scale on EASE.emphasis, no overshoot.
• Ribbon bar wipe-in: scaleX 0 → 1 with transform-origin: left, on EASE.entry.
• Collage piece settle: each piece fades in with a 80-120ms stagger; rotation stays fixed throughout.
• Tape settle: short fade-in only — taped pieces don't slide into place.
• Hand-script attribution: opacity fade-in 100-200ms after the headline lands. Never type-on with a cursor (mismatched register).
• Stamp-mark arrival: scale 1.1 → 1 + opacity 0 → 1 on EASE.emphasis — a single "thunk" feel.

Forbidden

• Crossfading between scenes (the template's slide opacity 0.6s is acceptable, but for scene-level transitions in the video, use a clean fade — never blur, slide, or zoom).
• Tweening Caveat letter-spacing or font-weight.
• More than ±8° tilt on any element. Beyond that, hand-placed becomes broken.
• Modern blurred box-shadow reveals. All depth is paper-offset / rotation / grain.
• Pure white (#ffffff) anywhere. Use --anchor-cream for "white" surfaces.

Stagger budget

120-200ms between elements. Total scene-in stagger ≤ 700ms.

§G Voice transform recipe (apply to brand's voice from §1 DNA)

Take the brand's product description / value prop. Transform with:

1. Keep editorial sentence-case for body copy (the zine register IS small body type at 13-16px) — do not UPPERCASE paragraphs.
2. Hero headlines: 2-4 words MAX, UPPERCASE, tracked 0.04em (Bebas Neue treatment). Break across two lines when a phrase has a natural pivot.
3. Eyebrow labels / chips / kicker: UPPERCASE, tracked 0.2-0.25em (Bebas Neue or Space Grotesk weight 600).
4. Stats / numerals: bare numeric in Bebas Neue (340%, $12.4M ARR), paired with a Caveat hand-script label below ("year-over-year growth").
5. Hand-script lines = personal / attributional: bylines, asides, "filled-by-hand" form values. Sentence case, em-dash openers OK ("— Our founding principle since day one").
6. CTAs / stamp text: 1-3 words UPPERCASE on the stamp-mark (CONTACT US, SHIP IT, JOIN US); tracked 0.1em.

Example:

• IN: Figma helps teams design products collaboratively in real time
• OUT: hero=DESIGN. TOGETHER. / eyebrow=REAL-TIME / hand-script=— for the teams that ship / stamp=JOIN US

§H Scene composition hints (Phase 4b layout guidance)

Surface alternation across scenes

• Default scene: warm-khaki canvas (--anchor-paper) + grain overlay + 3px ink structural borders. ~70% of scenes.
• Statement scene: full-bleed --brand-primary ground + cream divider stubs + Bebas Neue quote in cream + Caveat byline. Use once per video as the manifesto beat.
• Editorial scene: khaki canvas with a single 2px ink column rule splitting two body columns; drop cap leads the left column. For dense narrative moments.
• Closing scene: ink (var(--ink)) ground + khaki text + brand-primary divider stub + Caveat sign-off. Mirror of the statement beat; pair them at scene 1 + last.
• Never two consecutive statement scenes — the brand-primary full-bleed loses impact if back-to-back.

Hero text

• One Bebas Neue headline per scene. Default color: var(--brand-primary) on khaki; var(--anchor-cream) on brand-primary / ink grounds; var(--ink) on column-paired layouts where the headline reads as a label rather than emphasis.
• Hero takes ≥ 50% canvas width on hero scenes. Tracking 0.02-0.04em mandatory; Bebas without positive tracking reads as cramped.
• Never two hero-tier Bebas headlines per scene.
• Pair hero with eyebrow (Bebas tracked 0.2em) or hand-script (Caveat) below — never both above; the eyebrow goes above, hand-script below.

Brand color placement (role contract)

• --brand-primary carries the emphasis role — headlines, drop caps, ribbon bars, offset slab behind cards, stamp borders, divider stubs.
• --brand-secondary is the hover / slightly-brighter sibling — secondary CTAs, alternate ribbon bars, accent rule under an eyebrow. Use sparingly (≤1 per scene).
• --brand-accent carries the tag role — chip fills inside ledger rows, categorical badges. Never as a headline color.
• var(--ink) is structure — borders, body text, label fills (when inverted). Never as emphasis (ink-as-emphasis flips the green-as-emphasis contract).
• One scene = one brand color carrying emphasis. Splitting emphasis across two brand colors dilutes the zine voice.

Paper anchors are sacred

• Every "white" surface uses --anchor-cream, never #ffffff.
• Every khaki surface uses --anchor-paper or --anchor-paper-dark. The split-screen pattern uses both halves with a 3px ink rule between.
• Pure black (#000) is wrong — use var(--ink) (the brand-derived dark ink, defaults to #1A1A1A-ish).

Structural borders

• Card outer / collage piece / region divider: var(--border-thick) (3px).
• Column rule / RSVP underline / stamp-mark border: var(--border-medium) (2px).
• Grid cell sub-border / ledger header: var(--border-fine) (1.5px).
• Ledger row divider: var(--border-hairline) (1px @ 22% ink). NEVER use as a primary divider.
• Borders are always ink. The stamp-mark green border is the single colored-border exception.

Rotation vocabulary

• Stamps: -8deg (default) or +6deg (alt). Reserve for "stamped" elements — badges, approval callouts.
• Collage pieces: cycle -3deg / +4deg / +2deg / -5deg across 4 pieces in a single composition. Never two adjacent pieces at the same angle.
• Tape: sharp angles -40deg to +35deg. Always semi-transparent white.
• No element exceeds ±8° tilt outside the tape vocabulary.

Density

• Editorial medium-high. Every scene carries 3-5 supporting moves: eyebrow + hero + hand-script + drop-cap + stamp / ribbon. A scene with just a centered headline reads as broken zine.
• Exception: statement scene runs sparser — one large Bebas quote + Caveat byline + two cream divider stubs framing the quote.

Transitions between scenes

• Soft fade. The template uses 0.6s opacity + 20px translateY; for the video, hold to a clean opacity fade between scenes (no slide, no zoom).
• NEVER blur / crossfade with motion / dissolve through a third state.

Ambient texture (non-negotiable)

• Grain overlay (grain-overlay component) on every single scene, at 0.07 opacity, fixed full-viewport, pointer-events disabled, z-index 9999. Without it, the print register evaporates.

§I Page-level CSS (overrides design.html's neutral chrome — makes the doc itself read as retro-zine)

/* ── Preset-native typography vars (loaded via preset-meta.chromeFonts.googleFontsHref).
 * Bebas Neue / Space Grotesk / Caveat / JetBrains Mono for doc chrome. */
:root {
  --f-disp-native:
    "Bebas Neue", "Oswald", "Anton", "Impact", "Arial Black", "Helvetica Neue", sans-serif;
  --f-body-native:
    "Space Grotesk", "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;
  --f-script-native:
    "Caveat", "Kalam", "Shadows Into Light", "Brush Script MT", "Comic Sans MS", cursive;
  --f-mono-native:
    "JetBrains Mono", "IBM Plex Mono", "Space Mono", "Menlo", ui-monospace, monospace;
}

/* .preset-native-scope: re-binds var(--font-*) to preset-native families for component previews + §T atlas. */
.preset-native-scope {
  --font-display: var(--f-disp-native);
  --font-body: var(--f-body-native);
  --font-script: var(--f-script-native);
  --font-mono: var(--f-mono-native);
}

body {
  background: var(--anchor-paper);
  position: relative;
}
body::after {
  /* Grain overlay on design.html itself */
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain-svg);
  background-size: var(--grain-tile);
  opacity: var(--grain-opacity);
  pointer-events: none;
  z-index: 9999;
}
.title-card {
  background: var(--anchor-paper);
  border-bottom: var(--border-thick);
  padding: 96px 0 80px;
}
.title-display {
  font-family: "Bebas Neue", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-primary);
}
.brand-name {
  color: var(--brand-primary);
  font-weight: 400;
}
.style-name {
  color: var(--ink);
  font-weight: 400;
}
.ds-section {
  border-top: var(--border-thick);
  padding: 80px 0;
}
h2 {
  font-family: "Bebas Neue", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-primary);
}
.eyebrow {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.type-card,
.voice-pair,
.comp-card {
  background: var(--anchor-cream) !important;
  border: var(--border-thick) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* dna-swatch keeps inline brand-color background */
.dna-swatch {
  border: var(--border-thick) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.comp-head {
  background: var(--ink) !important;
  color: var(--anchor-paper) !important;
  border-bottom: var(--border-thick) !important;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ds-code {
  background: var(--anchor-cream) !important;
  border: var(--border-medium);
  border-radius: 0 !important;
  color: var(--ink) !important;
}

/* ── §T Type-role atlas. var(--font-*) tokens → brand DNA; only the recipe is preset-declared. */
.ds-trole-box {
  display: flex;
  flex-direction: column;
  border: var(--border-thick);
  border-radius: 0;
  background: var(--anchor-cream);
  overflow: hidden;
  margin-top: 24px;
}
.ds-trole-row {
  padding: 28px 32px;
  border-bottom: var(--border-fine);
}
.ds-trole-row:last-child {
  border-bottom: 0;
}
.ds-trole-sample {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 960px) {
  .ds-trole-row {
    padding: 24px;
  }
}

/* ── Type-role samples. var(--font-display/body/mono/script) → brand DNA. */
.t-trole-display-cover {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 10vw, 140px);
  line-height: 0.88;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.t-trole-headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(42px, 6vw, 90px);
  line-height: 0.95;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.t-trole-statement {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 90px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--anchor-cream);
  background: var(--brand-primary);
  padding: 24px 32px;
  max-width: 22ch;
}
.t-trole-number-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(80px, 12vw, 160px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--brand-primary);
}
.t-trole-drop-cap {
  float: left;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-right: 12px;
}
.t-trole-label-eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2vw, 32px);
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.t-trole-label-spaced {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(24px, 1.7vw, 28px);
  line-height: 1.2;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink);
}
.t-trole-caption-feature {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 1.9vw, 30px);
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.t-trole-hand-script {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.3;
  color: var(--ink);
}
.t-trole-hand-script-sm {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(26px, 2.5vw, 34px);
  line-height: 1.3;
  color: var(--ink);
}
.t-trole-stamp-mark {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 1.9vw, 30px);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: var(--ink);
  border: 2px solid var(--brand-primary);
  padding: 10px 24px;
  transform: rotate(-8deg);
}
.t-trole-inline-highlight {
  display: inline;
  background: var(--ink);
  color: var(--anchor-paper);
  padding: 2px 8px;
  font-family: var(--font-body);
  font-weight: 600;
}
.t-trole-ribbon-bar {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--brand-primary);
  color: var(--anchor-cream);
  padding: 8px 20px;
}
.t-trole-chip {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(24px, 1.8vw, 28px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--brand-primary);
  color: var(--anchor-cream);
  padding: 4px 10px;
}