/* The Story House — type roles and brand devices v2.2
   The scale couples size + weight + line-height + tracking + family. Picking
   those properties individually is where this system gets broken, so each role
   ships as one class. Use them; reach for the raw --tsh-* vars only for layout. */

/* ── Type roles ─────────────────────────────────────────────────────────── */

.tsh-h1 { font-family: var(--tsh-font-display); font-size: var(--tsh-h1-size); font-weight: var(--tsh-h1-weight); line-height: var(--tsh-h1-lh); letter-spacing: var(--tsh-h1-track); color: var(--tsh-ink); }
.tsh-h2 { font-family: var(--tsh-font-display); font-size: var(--tsh-h2-size); font-weight: var(--tsh-h2-weight); line-height: var(--tsh-h2-lh); letter-spacing: var(--tsh-h2-track); color: var(--tsh-ink); }
.tsh-h3 { font-family: var(--tsh-font-display); font-size: var(--tsh-h3-size); font-weight: var(--tsh-h3-weight); line-height: var(--tsh-h3-lh); letter-spacing: var(--tsh-h3-track); color: var(--tsh-ink); }

/* Display serif set in italic — the calligraphic voice used for questions and
   pull quotes. Never for body copy. */
.tsh-quote { font-family: var(--tsh-font-display); font-style: italic; font-size: var(--tsh-h2-size); font-weight: 400; line-height: 1.3; color: var(--tsh-ink); }

.tsh-lede { font-family: var(--tsh-font-sans); font-size: var(--tsh-lede-size); font-weight: 400; line-height: var(--tsh-lede-lh); color: var(--tsh-ink); max-width: var(--tsh-measure); }
.tsh-body { font-family: var(--tsh-font-sans); font-size: var(--tsh-body-size); font-weight: 400; line-height: var(--tsh-body-lh); color: var(--tsh-ink); max-width: var(--tsh-measure); }
.tsh-caption { font-family: var(--tsh-font-sans); font-size: var(--tsh-caption-size); font-weight: 400; line-height: var(--tsh-caption-lh); color: var(--tsh-ink); }
.tsh-label { font-family: var(--tsh-font-sans); font-size: var(--tsh-label-size); font-weight: var(--tsh-label-weight); line-height: var(--tsh-label-lh); letter-spacing: var(--tsh-label-track); text-transform: uppercase; color: var(--tsh-ink); }

/* Chapter label — the recurring wayfinding device. Always ends in a period. */
.tsh-chapter { font-family: var(--tsh-font-sans); font-weight: 700; line-height: 1.1; color: var(--tsh-aubergine); }
.tsh-chapter::after { content: "."; }

/* ── Surfaces ───────────────────────────────────────────────────────────── */

.tsh-surface        { background: var(--tsh-paper);      color: var(--tsh-aubergine); }
.tsh-surface-cool   { background: var(--tsh-white);      color: var(--tsh-aubergine); }
.tsh-surface-soft   { background: var(--tsh-lilac);      color: var(--tsh-aubergine); }
.tsh-surface-deep   { background: var(--tsh-aubergine);  color: var(--tsh-paper); }
.tsh-surface-energy { background: var(--tsh-vermillion); color: var(--tsh-paper); }

/* ── Marker / highlighter ───────────────────────────────────────────────── */
/* The lilac marker sits under aubergine text (5.87:1). Never under vermillion
   — that pairing is 2.44:1 and fails at every size. */

.tsh-marker { background-image: linear-gradient(var(--tsh-lilac), var(--tsh-lilac)); background-repeat: no-repeat; background-size: 100% 0.42em; background-position: 0 0.72em; color: var(--tsh-aubergine); padding-inline: 0.08em; }

/* ── Accent ─────────────────────────────────────────────────────────────── */
/* Vermillion as text is display-only: 3.94:1 on paper, 4.45:1 on white. The
   class exists so the constraint travels with it. */

.tsh-accent { color: var(--tsh-vermillion); font-family: var(--tsh-font-display); }

/* ── Layout helpers ─────────────────────────────────────────────────────── */

/* Safe margin — nothing but the Wzór pattern may cross it. */
.tsh-safe { padding: var(--tsh-safe-margin-pct); }

.tsh-grid { display: grid; grid-template-columns: repeat(var(--tsh-grid-columns), 1fr); gap: var(--tsh-grid-gutter); }

/* ── Motion ─────────────────────────────────────────────────────────────── */

.tsh-rise { animation: tsh-rise var(--tsh-duration) var(--tsh-ease-out) both; }
@keyframes tsh-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tsh-rise { animation: none; } }

/* ── Brush markers (real brandbook texture) ─────────────────────────────── */
/* .tsh-marker above is a flat CSS gradient and needs no assets. These use the
   scanned marker strokes and expect ../device/marker/ next to this file.

   CONTRAST — computed, not preference:
     aubergine text on a lilac marker      5.87:1  ✓ any size
     aubergine text on a vermillion marker 2.41:1  ✗ fails at every size
   So the vermillion brush is only usable under paper/white text, and only at
   display sizes (3.94:1 / 4.45:1). Under body copy it has no legal pairing. */

[class*="tsh-brush-"] { background-repeat: no-repeat; background-size: 100% 100%; padding-inline: 0.25em; }

.tsh-brush-broad   { background-image: url("../device/marker/marker-broad-lilac.png"); }
.tsh-brush-strokes { background-image: url("../device/marker/marker-strokes-lilac.png"); }
.tsh-brush-narrow  { background-image: url("../device/marker/marker-narrow-lilac.png"); }

/* Display-size text only, and never aubergine on top — see the note above. */
.tsh-brush-broad-accent   { background-image: url("../device/marker/marker-broad-vermillion.png"); }
.tsh-brush-strokes-accent { background-image: url("../device/marker/marker-strokes-vermillion.png"); }
.tsh-brush-narrow-accent  { background-image: url("../device/marker/marker-narrow-vermillion.png"); }

/* The -mask.png files carry the texture in the alpha channel with no colour of
   their own — use them with mask-image to tint a marker to any brand colour. */
.tsh-brush-tinted { -webkit-mask-image: url("../device/marker/marker-broad-mask.png"); mask-image: url("../device/marker/marker-broad-mask.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; background: var(--tsh-lilac); }