/* ============================================================
   KAYAYURVED 3 — Typography Design System
   ============================================================
   A unified typography system for the Kayayurved website.
   Uses Poppins (headings) + Montserrat (body/UI) as the
   primary font pairing, loaded from local files.
   
   Hierarchy (existing class names preserved):
     .fnt              → Hero / Display heading  (H1)
     .subhead_info     → Section heading         (H2)
     .subsubhead_info  → Sub-section heading     (H3)
     .data_head        → Card / data heading     (H4)
     .data_desc        → Data descriptions       (small body)
     .para_desc        → Paragraph / body copy
     .desc_date        → Dates & meta info
     .marb             → Heading underline bar

   New additions:
     .ky-display       → Oversized hero text
     .ky-h1 — .ky-h6  → Explicit heading scale
     .ky-subtitle      → Subtitle / tagline
     .ky-body-lg/md/sm → Body text sizes
     .ky-caption        → Image captions / footnotes
     .ky-overline       → Overline / eyebrow labels
     .ky-label          → Form / UI labels
     .ky-badge-text     → Badge / tag text
     .ky-quote          → Block-quote text
     .ky-price          → Price display
     .ky-price-old      → Struck-through old price
     .ky-link           → Styled anchor text
     .ky-btn-text       → Button text
     .ky-nav-text       → Navigation link text
     Utility helpers:   .ky-uppercase, .ky-capitalize,
                        .ky-truncate, .ky-balance, etc.
   ============================================================ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §1  FONT-FACE DECLARATIONS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* — Heading font — */
@font-face {
    font-family: 'Arima';
    src: url(fonts/Arima-SemiBold.ttf);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* — Body / UI font — */
@font-face {
    font-family: 'Montserrat';
    src: url(fonts/Montserrat-Regular.ttf);
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url(fonts/Montserrat-Medium.ttf);
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url(fonts/Montserrat-SemiBold.ttf);
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url(fonts/Montserrat-Bold.ttf);
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url(fonts/Montserrat-Light.ttf);
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §2  CSS CUSTOM PROPERTIES  (Typography Tokens)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
    /* ── Font Families ────────────────────────────────── */
    --ky-font-heading: 'Arima', sans-serif;
    --ky-font-body: 'Arima', sans-serif;

    /* ── Font Sizes  (fluid-friendly base) ────────────── */
    --ky-fs-display: clamp(3rem, 5vw + 1rem, 4.5rem);
    /* 48–72px */
    --ky-fs-h1: clamp(2.25rem, 4vw + 0.5rem, 3rem);
    /* 36–48px */
    --ky-fs-h2: clamp(1.75rem, 3vw + 0.25rem, 2.25rem);
    /* 28–36px */
    --ky-fs-h3: clamp(1.375rem, 2vw + 0.25rem, 1.75rem);
    /* 22–28px */
    --ky-fs-h4: clamp(1.125rem, 1.5vw + 0.25rem, 1.375rem);
    /* 18–22px */
    --ky-fs-h5: clamp(1rem, 1vw + 0.25rem, 1.125rem);
    /* 16–18px */
    --ky-fs-h6: clamp(0.875rem, 0.75vw + 0.25rem, 1rem);
    /* 14–16px */
    --ky-fs-subtitle: 1.125rem;
    /* 18px */
    --ky-fs-body-lg: 1.125rem;
    /* 18px */
    --ky-fs-body: 1rem;
    /* 16px */
    --ky-fs-body-sm: 0.875rem;
    /* 14px */
    --ky-fs-caption: 0.8125rem;
    /* 13px */
    --ky-fs-overline: 0.75rem;
    /* 12px */
    --ky-fs-badge: 0.6875rem;
    /* 11px */

    /* ── Line Heights ─────────────────────────────────── */
    --ky-lh-tight: 1.2;
    --ky-lh-snug: 1.35;
    --ky-lh-normal: 1.5;
    --ky-lh-relaxed: 1.75;

    /* ── Letter Spacing ───────────────────────────────── */
    --ky-ls-tight: -0.02em;
    --ky-ls-normal: 0em;
    --ky-ls-wide: 0.04em;
    --ky-ls-wider: 0.08em;
    --ky-ls-widest: 0.12em;

    /* ── Font Weights ─────────────────────────────────── */
    --ky-fw-light: 300;
    --ky-fw-regular: 400;
    --ky-fw-medium: 500;
    --ky-fw-semibold: 600;
    --ky-fw-bold: 700;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §3  EXISTING CLASS NAMES  (from kanit.css — preserved API)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── .marb  — decorative heading underline bar ───────── */
.marb {
    height: 8px;
    border: none;
    margin-bottom: 20px;
    margin-top: 0px;
    width: 40px;
}

/* ── .fnt  — Hero / main heading (H1 equivalent) ─────── */
.fnt {
    font-family: var(--ky-font-heading);
    text-transform: capitalize;
    font-size: var(--ky-fs-h2);
    font-weight: var(--ky-fw-light) !important;
    line-height: var(--ky-lh-tight) !important;
    letter-spacing: var(--ky-ls-tight);
}

/* ── .subhead_info  — Section heading (H2 equivalent) ── */
.subhead_info {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h3);
    letter-spacing: var(--ky-ls-normal);
    line-height: var(--ky-lh-snug);
    font-weight: var(--ky-fw-light);
}

/* ── .subsubhead_info  — Sub-section heading (H3) ────── */
.subsubhead_info {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h4);
    letter-spacing: var(--ky-ls-normal);
    line-height: var(--ky-lh-snug);
    font-weight: var(--ky-fw-light);
}

/* ── .data_head  — Card / data title (H4) ────────────── */
.data_head {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h4) !important;
    font-weight: var(--ky-fw-bold) !important;
    margin-top: 0px;
    line-height: var(--ky-lh-snug);
}

/* ── .data_desc  — Short data descriptions ───────────── */
.data_desc {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-sm) !important;
    font-weight: var(--ky-fw-regular) !important;
    line-height: var(--ky-lh-normal);
}

/* ── .para_desc  — Paragraph / body copy ─────────────── */
.para_desc {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-lg) !important;
    font-weight: var(--ky-fw-regular) !important;
    line-height: var(--ky-lh-relaxed);
}

/* ── .desc_date  — Date / meta information ───────────── */
.desc_date {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-sm) !important;
    font-weight: var(--ky-fw-regular) !important;
    margin-top: 0px;
    padding-bottom: 10px;
    font-style: italic;
    color: #8e8e8e;
}


/* ── Responsive overrides (existing breakpoints) ─────── */
@media screen and (max-width: 768px) {
    .fnt {
        font-size: 28px !important;
        line-height: 32px !important;
    }

    .marb {
        margin-bottom: 5px !important;
    }

    .subhead_info {
        font-size: 23px !important;
    }

    .subsubhead_info {
        font-size: 20px !important;
    }
}


/* ── Button text ─────────────────────────────────────── */
.btn,
.btn-3,
.btn-more,
.button,
.button--shikoba {
    font-family: var(--ky-font-body) !important;
}

/* ── Navigation ──────────────────────────────────────── */
.nav-item {
    font-family: var(--ky-font-body) !important;
}

.dropdown-item {
    font-family: var(--ky-font-body) !important;
}

/* ── Global link reset ───────────────────────────────── */
a {
    color: #000;
    text-decoration: none;
    background-color: transparent;
}

/* ── Paragraph base ──────────────────────────────────── */
p {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body) !important;
    line-height: var(--ky-lh-normal) !important;
}

/* ── Inline elements ─────────────────────────────────── */
span {
    font-family: var(--ky-font-body);
}

ul,
ol {
    font-family: var(--ky-font-body) !important;
}

li {
    font-family: var(--ky-font-body) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §4  NEW TYPOGRAPHY CLASSES — Heading Scale
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Display — oversized hero text ───────────────────── */
.ky-display {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-display);
    font-weight: var(--ky-fw-bold);
    line-height: var(--ky-lh-tight);
    letter-spacing: var(--ky-ls-tight);
    text-transform: capitalize;
}

/* ── H1 ──────────────────────────────────────────────── */
.ky-h1 {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h1);
    font-weight: var(--ky-fw-bold);
    line-height: var(--ky-lh-tight);
    letter-spacing: var(--ky-ls-tight);
}

/* ── H2 ──────────────────────────────────────────────── */
.ky-h2 {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h2);
    font-weight: var(--ky-fw-semibold);
    line-height: var(--ky-lh-snug);
    letter-spacing: var(--ky-ls-normal);
}

/* ── H3 ──────────────────────────────────────────────── */
.ky-h3 {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h3);
    font-weight: var(--ky-fw-semibold);
    line-height: var(--ky-lh-snug);
    letter-spacing: var(--ky-ls-normal);
}

/* ── H4 ──────────────────────────────────────────────── */
.ky-h4 {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h4);
    font-weight: var(--ky-fw-medium);
    line-height: var(--ky-lh-snug);
}

/* ── H5 ──────────────────────────────────────────────── */
.ky-h5 {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h5);
    font-weight: var(--ky-fw-medium);
    line-height: var(--ky-lh-snug);
}

/* ── H6 ──────────────────────────────────────────────── */
.ky-h6 {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h6);
    font-weight: var(--ky-fw-medium);
    line-height: var(--ky-lh-snug);
    text-transform: uppercase;
    letter-spacing: var(--ky-ls-wide);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §5  NEW TYPOGRAPHY CLASSES — Body & Descriptive Text
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Subtitle / tagline ──────────────────────────────── */
.ky-subtitle {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-subtitle);
    font-weight: var(--ky-fw-medium);
    line-height: var(--ky-lh-normal);
    color: #555;
}

/* ── Body text — large ───────────────────────────────── */
.ky-body-lg {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-lg);
    font-weight: var(--ky-fw-regular);
    line-height: var(--ky-lh-relaxed);
}

/* ── Body text — medium (default) ────────────────────── */
.ky-body-md,
.ky-body {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body);
    font-weight: var(--ky-fw-regular);
    line-height: var(--ky-lh-normal);
}

/* ── Body text — small ───────────────────────────────── */
.ky-body-sm {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-sm);
    font-weight: var(--ky-fw-regular);
    line-height: var(--ky-lh-normal);
}

/* ── Caption — image captions, footnotes ─────────────── */
.ky-caption {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-caption);
    font-weight: var(--ky-fw-regular);
    line-height: var(--ky-lh-normal);
    color: #777;
}

/* ── Overline / eyebrow label ────────────────────────── */
.ky-overline {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-overline);
    font-weight: var(--ky-fw-semibold);
    line-height: var(--ky-lh-normal);
    text-transform: uppercase;
    letter-spacing: var(--ky-ls-widest);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §6  NEW TYPOGRAPHY CLASSES — UI & Specialized
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Form / UI label ─────────────────────────────────── */
.ky-label {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-sm);
    font-weight: var(--ky-fw-medium);
    line-height: var(--ky-lh-normal);
    letter-spacing: var(--ky-ls-wide);
}

/* ── Badge / tag text ────────────────────────────────── */
.ky-badge-text {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-badge);
    font-weight: var(--ky-fw-semibold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--ky-ls-wider);
}

/* ── Block-quote ─────────────────────────────────────── */
.ky-quote {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h3);
    font-weight: var(--ky-fw-light);
    line-height: var(--ky-lh-relaxed);
    font-style: italic;
    letter-spacing: var(--ky-ls-normal);
}

/* ── Price display ───────────────────────────────────── */
.ky-price {
    font-family: var(--ky-font-heading);
    font-size: var(--ky-fs-h4);
    font-weight: var(--ky-fw-bold);
    line-height: 1;
    letter-spacing: var(--ky-ls-tight);
}

/* ── Old / struck-through price ──────────────────────── */
.ky-price-old {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-sm);
    font-weight: var(--ky-fw-regular);
    line-height: 1;
    text-decoration: line-through;
    color: #999;
}

/* ── Styled link text ────────────────────────────────── */
.ky-link {
    font-family: var(--ky-font-body);
    font-size: inherit;
    font-weight: var(--ky-fw-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.ky-link:hover {
    text-decoration-color: transparent;
}

/* ── Button text ─────────────────────────────────────── */
.ky-btn-text {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-sm);
    font-weight: var(--ky-fw-semibold);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--ky-ls-wider);
}

/* ── Navigation link text ────────────────────────────── */
.ky-nav-text {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-sm);
    font-weight: var(--ky-fw-medium);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--ky-ls-wide);
}

/* ── Input / form text ───────────────────────────────── */
.ky-input-text {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body);
    font-weight: var(--ky-fw-regular);
    line-height: var(--ky-lh-normal);
}

/* ── Table header ────────────────────────────────────── */
.ky-th-text {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-sm);
    font-weight: var(--ky-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ky-ls-wide);
    line-height: var(--ky-lh-normal);
}

/* ── Table cell ──────────────────────────────────────── */
.ky-td-text {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-sm);
    font-weight: var(--ky-fw-regular);
    line-height: var(--ky-lh-normal);
}

/* ── Hero / section tagline (large subtitle) ─────────── */
.ky-tagline {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-lg);
    font-weight: var(--ky-fw-light);
    line-height: var(--ky-lh-relaxed);
    letter-spacing: var(--ky-ls-wide);
}

/* ── Footer text ─────────────────────────────────────── */
.ky-footer-text {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-caption);
    font-weight: var(--ky-fw-regular);
    line-height: var(--ky-lh-normal);
    color: #888;
}

/* ── Breadcrumb text ─────────────────────────────────── */
.ky-breadcrumb-text {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-overline);
    font-weight: var(--ky-fw-medium);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--ky-ls-wide);
    color: #999;
}

/* ── Notification / toast text ───────────────────────── */
.ky-notification-text {
    font-family: var(--ky-font-body);
    font-size: var(--ky-fs-body-sm);
    font-weight: var(--ky-fw-medium);
    line-height: var(--ky-lh-normal);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §7  FONT WEIGHT UTILITIES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ky-fw-light {
    font-weight: var(--ky-fw-light) !important;
}

.ky-fw-regular {
    font-weight: var(--ky-fw-regular) !important;
}

.ky-fw-medium {
    font-weight: var(--ky-fw-medium) !important;
}

.ky-fw-semibold {
    font-weight: var(--ky-fw-semibold) !important;
}

.ky-fw-bold {
    font-weight: var(--ky-fw-bold) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §8  TEXT TRANSFORM UTILITIES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ky-uppercase {
    text-transform: uppercase !important;
}

.ky-lowercase {
    text-transform: lowercase !important;
}

.ky-capitalize {
    text-transform: capitalize !important;
}

.ky-normal-case {
    text-transform: none !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §9  TEXT ALIGNMENT UTILITIES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ky-text-left {
    text-align: left !important;
}

.ky-text-center {
    text-align: center !important;
}

.ky-text-right {
    text-align: right !important;
}

.ky-text-justify {
    text-align: justify !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §10  TEXT DECORATION & STYLE UTILITIES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ky-italic {
    font-style: italic !important;
}

.ky-not-italic {
    font-style: normal !important;
}

.ky-underline {
    text-decoration: underline !important;
}

.ky-line-through {
    text-decoration: line-through !important;
}

.ky-no-underline {
    text-decoration: none !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §11  LINE HEIGHT UTILITIES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ky-leading-tight {
    line-height: var(--ky-lh-tight) !important;
}

.ky-leading-snug {
    line-height: var(--ky-lh-snug) !important;
}

.ky-leading-normal {
    line-height: var(--ky-lh-normal) !important;
}

.ky-leading-relaxed {
    line-height: var(--ky-lh-relaxed) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §12  LETTER SPACING UTILITIES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ky-tracking-tight {
    letter-spacing: var(--ky-ls-tight) !important;
}

.ky-tracking-normal {
    letter-spacing: var(--ky-ls-normal) !important;
}

.ky-tracking-wide {
    letter-spacing: var(--ky-ls-wide) !important;
}

.ky-tracking-wider {
    letter-spacing: var(--ky-ls-wider) !important;
}

.ky-tracking-widest {
    letter-spacing: var(--ky-ls-widest) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §13  FONT FAMILY UTILITIES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.ky-font-heading {
    font-family: var(--ky-font-heading) !important;
}

.ky-font-body {
    font-family: var(--ky-font-body) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §14  TEXT OVERFLOW / TRUNCATION UTILITIES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Single-line truncation with ellipsis */
.ky-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Multi-line clamp (2 lines) */
.ky-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Multi-line clamp (3 lines) */
.ky-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Multi-line clamp (4 lines) */
.ky-line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Text wrapping balance (modern browsers) */
.ky-balance {
    text-wrap: balance;
}

/* Word break for long strings (URLs, etc.) */
.ky-break-words {
    overflow-wrap: break-word;
    word-break: break-word;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §15  RESPONSIVE — Tablet (max-width: 1024px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 1024px) {
    .ky-display {
        font-size: clamp(2.5rem, 4vw + 0.5rem, 3.5rem);
    }

    .ky-h1 {
        font-size: clamp(2rem, 3.5vw + 0.25rem, 2.5rem);
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §16  RESPONSIVE — Mobile (max-width: 768px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 768px) {
    .ky-display {
        font-size: 2.25rem;
        line-height: var(--ky-lh-tight);
    }

    .ky-h1 {
        font-size: 1.75rem;
        line-height: var(--ky-lh-tight);
    }

    .ky-h2 {
        font-size: 1.5rem;
    }

    .ky-h3 {
        font-size: 1.25rem;
    }

    .ky-h4 {
        font-size: 1.0625rem;
    }

    .ky-quote {
        font-size: 1.25rem;
    }

    .ky-price {
        font-size: 1.125rem;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §17  RESPONSIVE — Small Mobile (max-width: 480px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 480px) {
    .ky-display {
        font-size: 1.875rem;
    }

    .ky-h1 {
        font-size: 1.5rem;
    }

    .ky-h2 {
        font-size: 1.25rem;
    }

    .ky-overline {
        font-size: 0.625rem;
        letter-spacing: var(--ky-ls-wider);
    }
}