/* Shared opt-in typography. Adopted across development content templates.
 * Logo, menus/drawer, footer and Amelia retain
 * their component styling. Never apply these through blanket element rules.
 * Source: responsive-typography-baseline-v1, Owner-approved 2026-09-10.
 * Existing global display/body font stacks remain authoritative.
 */
:root {
  --lk-size-hero-title: 2.5rem;
  --lk-size-breather-heading: 1.75rem;
  --lk-size-section-title: 2.25rem;
  --lk-size-item-title: 1.25rem;
}

@media (min-width: 20rem) {
  :root {
    --lk-size-hero-title: clamp(2.5rem, calc(1.357142857rem + 5.714285714vw), 2.75rem);
    --lk-size-breather-heading: clamp(1.75rem, calc(1.178571429rem + 2.857142857vw), 1.875rem);
    --lk-size-section-title: clamp(2.25rem, calc(1.107142857rem + 5.714285714vw), 2.5rem);
    --lk-size-item-title: 1.25rem;
  }
}

@media (min-width: 24.375rem) {
  :root {
    --lk-size-hero-title: clamp(2.75rem, calc(1.976190476rem + 3.174603175vw), 3.5rem);
    --lk-size-breather-heading: clamp(1.875rem, calc(1.617063492rem + 1.058201058vw), 2.125rem);
    --lk-size-section-title: clamp(2.5rem, calc(2.242063492rem + 1.058201058vw), 2.75rem);
    --lk-size-item-title: clamp(1.25rem, calc(1.121031746rem + 0.529100529vw), 1.375rem);
  }
}

@media (min-width: 48rem) {
  :root {
    --lk-size-hero-title: clamp(3.5rem, calc(2.000000000rem + 3.125000000vw), 4rem);
    --lk-size-breather-heading: clamp(2.125rem, calc(1.375000000rem + 1.562500000vw), 2.375rem);
    --lk-size-section-title: clamp(2.75rem, calc(2.000000000rem + 1.562500000vw), 3rem);
    --lk-size-item-title: clamp(1.375rem, calc(1.000000000rem + 0.781250000vw), 1.5rem);
  }
}

@media (min-width: 64rem) {
  :root {
    --lk-size-hero-title: clamp(4rem, calc(2.153846154rem + 2.884615385vw), 4.75rem);
    --lk-size-breather-heading: clamp(2.375rem, calc(1.759615385rem + 0.961538462vw), 2.625rem);
    --lk-size-section-title: clamp(3rem, calc(1.153846154rem + 2.884615385vw), 3.75rem);
    --lk-size-item-title: 1.5rem;
  }
}

[data-lk-type] { overflow-wrap: anywhere; }

/* Shared type treatments. Eyebrow casing and tone also belong to its role. */
[data-lk-type="hero-title"],
[data-lk-type="section-title"],
[data-lk-type="breather-heading"],
[data-lk-type="item-title"] {
  font-family: var(--lk-font-display);
  font-weight: 400;
}
[data-lk-type="hero-title"] {
  font-size: var(--lk-size-hero-title);
  line-height: 1;
  letter-spacing: -.035em;
}
[data-lk-type="section-title"] {
  font-size: var(--lk-size-section-title);
  line-height: 1.05;
  letter-spacing: -.035em;
}
[data-lk-type="breather-heading"] {
  font-size: var(--lk-size-breather-heading);
  line-height: 1.2;
  letter-spacing: -.006em;
}
[data-lk-type="item-title"] {
  font-size: var(--lk-size-item-title);
  line-height: 1.2;
  letter-spacing: normal;
}
[data-lk-type="hero-text"],
[data-lk-type="section-text"],
[data-lk-type="practical-detail"],
[data-lk-type="small-supporting-text"] {
  font-family: var(--lk-font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.6;
  letter-spacing: normal;
}
[data-lk-type="small-supporting-text"] {
  font-size: .875rem;
  line-height: 1.5;
}
[data-lk-type="section-eyebrow"],
[data-lk-type="breather-caption"],
[data-lk-type="hero-cta"] {
  font-family: var(--lk-font-body);
  font-weight: 500;
  font-size: .625rem;
  line-height: 1.5;
  letter-spacing: .16em;
}
/* Owner-approved section-CTA amendment, 2026-09-11.
 * Includes the homepage Om Lea link-size change; other roles remain v1.
 * The booking back control retains its dedicated component font.
 */
[data-lk-type="section-cta"] {
  font-family: var(--lk-font-body);
  font-weight: 500;
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: .16em;
}
[data-lk-type="hero-cta"] {
  font-size: .75rem;
  letter-spacing: .12em;
}

/* Keep interactive area independent of the small CTA label. */
[data-lk-type="section-cta"],
[data-lk-type="hero-cta"] { min-block-size: 2.75rem; }

/* One eyebrow treatment across pages; only contrast may opt into inverse. */
[data-lk-type="section-eyebrow"] {
  text-transform: uppercase;
  color: var(--lk-color-deep-taupe);
}

/* Shared content owns its tone and casing as well as its font metrics.
 * Independent modules keep their existing treatments. Layout classes may
 * position a role, but must not redefine these properties in page CSS.
 */
[data-lk-type]:where(:not(
  [data-lk-type^="hero-"],
  .lk-hero *,
  .lk-site-header *,
  .lk-site-footer *,
  .lk-contact-form *,
  .lk-booking__stage *,
  .lk-booking__practical *,
  .lk-customer-panel__access *,
  .lk-location__map *
)) {
  font-style: normal;
  color: var(--lk-color-deep-taupe);
  text-transform: none;
}

:is([data-lk-type="section-eyebrow"], [data-lk-type="breather-caption"], [data-lk-type="section-cta"]):where(:not(
  .lk-hero *,
  .lk-site-header *,
  .lk-site-footer *,
  .lk-contact-form *,
  .lk-booking__stage *,
  .lk-booking__practical *,
  .lk-customer-panel__access *,
  .lk-location__map *
)) {
  text-transform: uppercase;
}

/* Existing visual variants are explicit and centrally maintained. */
[data-lk-type][data-lk-tone="muted"] { color: var(--lk-color-muted-taupe); }
[data-lk-type][data-lk-tone="accent"] { color: var(--lk-color-terracotta); }
[data-lk-type][data-lk-tone="inverse"] { color: var(--lk-color-text-on-dark); }
[data-lk-type][data-lk-tone="soft"] {
  color: color-mix(in srgb, var(--lk-color-deep-taupe) 82%, transparent);
}
[data-lk-type][data-lk-tone="inverse-soft"] {
  color: color-mix(in srgb, var(--lk-color-text-on-dark) 82%, transparent);
}
[data-lk-type][data-lk-case="sentence"] { text-transform: none; }