/* ==========================================================================
   Likoma Airlines — Typography
   --------------------------------------------------------------------------
   Outfit, self-hosted as a single variable woff2. One family, three working
   weights (400 / 500 / 600), and a scale where hierarchy comes from size +
   space + colour rather than from bold text everywhere.
   ========================================================================== */

/* --- Font loading -------------------------------------------------------
   Variable font, 300–700 in one file. `size-adjust` and the metric overrides
   on the fallback keep the swap from shifting layout.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/outfit-latin.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;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/outfit-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched fallback: holds the same space as Outfit while it loads,
   so the swap is invisible rather than a jolt. */
@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Segoe UI");
  ascent-override: 98%;
  descent-override: 24%;
  line-gap-override: 0%;
  size-adjust: 96.5%;
}

/* --- Display scale -------------------------------------------------------
   Reserved for hero and section openers. Tight tracking at large sizes keeps
   Outfit's geometric forms from drifting apart.
   ------------------------------------------------------------------------ */

.lk-display-lg,
.lk-display-md,
.lk-display-sm {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-primary);
  text-wrap: balance;
}

.lk-display-lg { font-size: var(--text-display-lg); }
.lk-display-md { font-size: var(--text-display-md); }
.lk-display-sm {
  font-size: var(--text-display-sm);
  letter-spacing: var(--tracking-tight);
}

/* --- Heading scale ------------------------------------------------------- */

.lk-h1, .lk-h2, .lk-h3, .lk-h4, .lk-h5, .lk-h6 {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  text-wrap: balance;
}

.lk-h1 { font-size: var(--text-4xl); }
.lk-h2 { font-size: var(--text-3xl); }
.lk-h3 { font-size: var(--text-2xl); }
.lk-h4 {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-normal);
}
.lk-h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
}
.lk-h6 {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
}

/* --- Body scale ---------------------------------------------------------- */

.lk-lead {
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: var(--measure-base);
  text-wrap: pretty;
}

.lk-body-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.lk-body {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.lk-body-sm {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

.lk-caption {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.lk-fine {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* --- Editorial devices ---------------------------------------------------
   The eyebrow is the workhorse of the section header: it carries the label
   so the heading itself never has to shout.
   ------------------------------------------------------------------------ */

.lk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: var(--leading-none);
}

/* A short rule that reads as a runway marker */
.lk-eyebrow--marked::before {
  content: "";
  inline-size: var(--space-6);
  block-size: 2px;
  border-radius: var(--radius-full);
  background: currentColor;
  opacity: 0.55;
}

.lk-overline {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Airport codes, fare classes, PNRs — tabular and slightly tracked out */
.lk-code {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* Fares and times: tabular so columns align down a results list */
.lk-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.lk-price {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-none);
  color: var(--color-text-primary);
}

.lk-price__currency {
  font-size: 0.62em;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  margin-inline-end: 0.22em;
  vertical-align: 0.42em;
}

/* Emphasises a single word inside a display heading without adding weight */
.lk-accent-text {
  color: var(--color-primary);
}

.lk-gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Prose ---------------------------------------------------------------
   Long-form content: news articles, travel information, policy pages.
   ------------------------------------------------------------------------ */

.prose {
  max-width: var(--measure-base);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.prose > * + * {
  margin-block-start: var(--space-5);
}

.prose h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin-block-start: var(--space-12);
}

.prose h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  margin-block-start: var(--space-10);
}

.prose h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin-block-start: var(--space-8);
}

.prose ul,
.prose ol {
  padding-inline-start: var(--space-6);
  list-style: revert;
}

.prose li + li {
  margin-block-start: var(--space-2);
}

.prose li::marker {
  color: var(--color-primary);
}

.prose strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.prose blockquote {
  padding-inline-start: var(--space-6);
  border-inline-start: 2px solid var(--color-primary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  background: var(--color-surface-sunken);
  color: var(--color-text-primary);
}

.prose figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-block-start: var(--space-3);
}

/* --- Truncation ---------------------------------------------------------- */

.lk-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lk-clamp-1,
.lk-clamp-2,
.lk-clamp-3,
.lk-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lk-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.lk-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.lk-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.lk-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }