/* =========================================================================
   Absolutely Kili - type layer (20 Oct 2026), the Bare Eyes type system.
   Loaded after ak-design.css. Replaces the Cormorant Garamond / Karla look.

     1. Faces + tokens
     2. Section heads: big uppercase title, handwritten line under it
     3. Homepage hero
     4. Card, list and form titles
     5. Labels, nav, buttons, prices
     6. Body copy, quotes, numerals
     7. Inner pages
     8. Footer
     9. Small screens

   Families follow Theme Settings -> Fonts (Heading / Body / Button are all
   Montserrat). This file never sets --font-heading/--font-body/--font-button
   (see the hard rule at the top of ak-design.css). The handwriting face is
   the one design font Theme Settings has no picker for, so it is set here
   as --ak-script-font. Colours come from the Theme Settings tokens only.
   ========================================================================= */

/* ---------- 1. Faces + tokens ---------- */

/* Montserrat ExtraBold. The parent bundles 300-700; this adds 800 under the
   same family name (latin subset, SIL Open Font License 1.1). */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/montserrat-800-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;
}

/* Allison, the Bare Eyes handwriting face (SIL Open Font License 1.1, latin
   subset). size-adjust matches the size Bare Eyes renders it at. */
@font-face {
  font-family: "Allison";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  size-adjust: 130%;
  src: url("../fonts/allison-400.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;
}

:root {
  --ak-script-font: "Allison", "Parisienne", cursive;
  --ak-sans: var(--font-heading, "Montserrat"), system-ui, sans-serif;
  --ak-label: var(--font-button, "Montserrat"), system-ui, sans-serif;
  --ak-text: var(--font-body, "Montserrat"), system-ui, sans-serif;
  /* Titles: the ink warmed with a touch of the accent (deep earth brown). */
  --ak-title: color-mix(in srgb, var(--clay) 24%, var(--ink));
  /* Body copy: ink, softened. */
  --ak-copy: color-mix(in srgb, var(--ink) 78%, var(--cream));
}

body { font-family: var(--ak-text); }

/* Nothing is light italic any more (that was the serif look). */
:is(h1, h2, h3, h4, h5, .font-serif, .display-title, blockquote).italic,
:is(h1, h2, h3, h4, h5) .italic,
h1.font-serif, h2.font-serif, h3.font-serif { font-style: normal; }
:is(h1, h2, h3, h4).font-light { font-weight: 400; }
.font-serif { font-family: var(--ak-sans); }

/* Handwriting: Allison with a touch of extra weight and air, as Bare Eyes. */
.ak-script,
.ak-hero-script,
:is(div, header):has(> .eyebrow + .display-title) > .eyebrow {
  font-family: var(--ak-script-font);
  font-weight: 400;
  text-transform: none;
  letter-spacing: .045em;
  -webkit-text-stroke: .017em currentColor;
}

/* ---------- 2. Section heads ----------
   Bare Eyes order: the title first, the eyebrow becomes a handwritten line
   under it. Markup is unchanged (eyebrow, then .display-title); flex order
   swaps them visually, so screen readers still hear the label first. */
.display-title,
main h2.font-serif {
  font-family: var(--ak-sans);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(1.7rem, 2.7vw, 2.5rem) !important;
  line-height: 1.12;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ak-title);
  text-wrap: balance;
}
/* Templates that pin the old italic with an id-scoped rule. */
#upcoming-trips .display-title { font-style: normal; }
/* Safaris page guide cards (inline CSS in page-safaris.php). */
body .ak-guide h3 { font-family: var(--ak-sans); font-style: normal; font-weight: 700; letter-spacing: .005em; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }

:is(.bg-green, .bg-green-900, .bg-ink, .bg-clay, .text-white) .display-title,
.display-title.text-white,
.display-title.\!text-white { color: var(--cream) !important; }

:is(div, header):has(> .eyebrow + .display-title) { display: flex; flex-direction: column; }
:is(div, header):has(> .eyebrow + .display-title) > * { order: 2; }
/* Children stretch, so text-align (set by the section or Theme Settings)
   places the title and handwritten line. A lone button must not stretch:
   it sits at the start, or centred when the head is centred. */
:is(div, header):has(> .eyebrow + .display-title) > :is(a, .btn) { align-self: flex-start; }
:is(.text-center, .items-center, .att-copy-align-center) :is(div, header):has(> .eyebrow + .display-title) > :is(a, .btn),
:is(div, header):is(.text-center, .items-center):has(> .eyebrow + .display-title) > :is(a, .btn) { align-self: center; }
:is(div, header):has(> .eyebrow + .display-title) > .display-title { order: 0; margin-top: 0; }
:is(div, header):has(> .eyebrow + .display-title) > .eyebrow {
  order: 1;
  display: block;
  align-self: stretch;
  font-size: clamp(2rem, 2.8vw, 2.7rem);
  line-height: 1.1;
  color: var(--clay);
  margin: .05em 0 .2rem;
}
:is(div, header):has(> .eyebrow + .display-title) > .eyebrow::before,
:is(div, header):has(> .eyebrow + .display-title) > .eyebrow::after { display: none; }
:is(div, header):has(> .eyebrow.on-dark + .display-title) > .eyebrow { color: var(--gold-200, var(--cream)); }
/* The lead paragraph sits a little further from the handwritten line. */
:is(div, header):has(> .eyebrow + .display-title) > .display-title ~ p { margin-top: 1.1rem; }

/* Every other eyebrow: a small tracked label with the ▲ peak tick. */
.eyebrow {
  font-family: var(--ak-label);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .24em;
}

/* ---------- 3. Homepage hero ---------- */
.ak-hero-h1 {
  font-family: var(--ak-sans);
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
}
.ak-hero-h1__main {
  display: block;
  font-weight: 800;
  font-size: clamp(2.3rem, 4.3vw, 4rem);
  line-height: 1.04;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 28px color-mix(in srgb, var(--ink) 35%, transparent);
}
.ak-hero-script {
  display: block;
  margin-top: .12em;
  font-size: clamp(2.7rem, 4.6vw, 4.5rem);
  line-height: 1;
  color: var(--gold-200, var(--cream));
  text-shadow: 0 2px 18px color-mix(in srgb, var(--ink) 40%, transparent);
}

/* The "Request a Proposal" panel. */
main .att-hero-quote-card h2.font-serif {
  font-family: var(--ak-sans);
  font-weight: 800;
  font-size: 1.05rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ak-title);
  margin-top: .5rem;
}
.att-hero-quote-card :is(input, textarea, select) { font-family: var(--ak-text); }

/* Engine components with their own heads: the free guide book and the
   month-by-month calendar (their CSS prints inline, hence body-scoped). */
body :is(.attgb__title, .attsc__title) {
  font-family: var(--ak-sans);
  font-weight: 800;
  font-size: clamp(1.7rem, 2.7vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body .attsc__title { color: var(--ak-title); }
body .attsc__month { font-family: var(--ak-sans); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.7rem); }
body .attsc__head:has(> .attsc__eyebrow + .attsc__title) { display: flex; flex-direction: column; align-items: center; }
body .attsc__head:has(> .attsc__eyebrow + .attsc__title) > * { order: 2; }
body .attsc__head:has(> .attsc__eyebrow + .attsc__title) > .attsc__title { order: 0; }
body .attsc__head:has(> .attsc__eyebrow + .attsc__title) > .attsc__eyebrow {
  order: 1;
  display: block;
  margin: .05em 0 .2rem;
  font-family: var(--ak-script-font);
  font-weight: 400;
  font-size: clamp(2rem, 2.8vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: .045em;
  text-transform: none;
  -webkit-text-stroke: .017em currentColor;
  color: var(--clay);
}
body .attsc__head .attsc__eyebrow::before,
body .attsc__head .attsc__eyebrow::after { display: none; }

/* ---------- 4. Card, list and form titles ----------
   Bare Eyes: big titles 800 uppercase; card and list titles 700 in normal
   case so long tour names stay readable. */
:is(main, footer) :is(h3, h4).font-serif,
.card :is(h2, h3, h4),
.tour-card__title,
.ak-tour-card__title,
.ak-mega-catlink__name,
.ak-mega-trip__title,
.ak-mega-promo__title,
.ak-dep__day,
.ak-dep__range {
  font-family: var(--ak-sans);
  font-weight: 700;
  font-style: normal;
  letter-spacing: .005em;
}
.tour-card__title,
.ak-tour-card__title { font-size: 1.08rem; line-height: 1.38; letter-spacing: 0; }
main h3.font-serif { font-size: clamp(1.02rem, 1.3vw, 1.15rem) !important; line-height: 1.35; }

/* Accommodation directory cards (att-core renderer). */
body :is(.att-accom-card__title, .att-accom-card__noimg > span) {
  font-family: var(--ak-sans);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .005em;
}
body .att-accom-card__noimg > span { font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }

/* Photo "path" and category cards: the title reads as a caption on the photo. */
body .ak-cat .ak-cat__title,
.ak-path-card h3 {
  font-style: normal;
  font-weight: 800;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- 5. Labels, nav, buttons, prices ---------- */
.nav-link {
  font-family: var(--ak-label);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.announce-bar { font-family: var(--ak-label); letter-spacing: .06em; }

.btn {
  min-height: 50px;
  padding: 0 1.6rem;
  font-family: var(--ak-label);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 0 !important;
}
.btn.btn-sm { min-height: 42px; padding: 0 1.15rem; font-size: .66rem; }
.btn.btn-block { width: 100%; }
.tour-card .btn { min-height: 40px; padding: 0 .9rem; font-size: .62rem; letter-spacing: .14em; }

.tour-card[data-days]:not([data-days=""])::before,
.tour-card .badge,
.ak-mega-trip__days { font-family: var(--ak-label); font-weight: 700; letter-spacing: .16em; }

.tour-card__price span,
.ak-tour-card__price span { font-family: var(--ak-sans); font-weight: 800; letter-spacing: .01em; }

/* ---------- 6. Body copy, quotes, numerals ---------- */
main p { font-family: var(--ak-text); }
main .text-taupe-soft { color: var(--ak-copy); }

/* Testimonials: upright, plain, quiet. */
blockquote.font-serif,
main blockquote {
  font-family: var(--ak-text);
  font-weight: 400;
  font-style: normal;
  font-size: 1rem !important;
  line-height: 1.8;
  color: var(--ak-copy);
}

/* Step and fact numerals ("01", "Since 2012") become handwriting. */
main span.font-serif.italic.text-gold,
main p.font-serif.italic.text-gold {
  font-family: var(--ak-script-font);
  font-weight: 400;
  font-size: clamp(2.4rem, 3vw, 2.9rem) !important;
  line-height: 1;
  letter-spacing: .045em;
  -webkit-text-stroke: .017em currentColor;
  color: var(--clay);
}

/* ---------- 7. Inner pages ----------
   Every page hero holds the page's only <h1>; it takes the homepage voice. */
main h1:not(.ak-hero-h1) {
  font-family: var(--ak-sans);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(2.05rem, 3.8vw, 3.6rem) !important;
  line-height: 1.08;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Long tour names: a step smaller so they do not run to five lines. */
.single-safari_package main h1 { font-size: clamp(1.8rem, 3.1vw, 3rem) !important; letter-spacing: .035em; }

/* An eyebrow directly before a page title becomes its handwritten line. */
main :is(div, header):has(> .eyebrow + h1:not(.ak-hero-h1)) { display: flex; flex-direction: column; }
main :is(div, header):has(> .eyebrow + h1:not(.ak-hero-h1)) > * { order: 3; }
main :is(div, header):has(> .eyebrow + h1:not(.ak-hero-h1)) > nav { order: 0; align-self: stretch; }
main :is(div, header):has(> .eyebrow + h1:not(.ak-hero-h1)) > h1 { order: 1; margin-top: 0; }
main :is(div, header):has(> .eyebrow + h1:not(.ak-hero-h1)) > .eyebrow {
  order: 2;
  display: block;
  align-self: stretch;  /* full width, so it follows the hero's text-align */
  font-family: var(--ak-script-font);
  font-weight: 400;
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: .045em;
  text-transform: none;
  -webkit-text-stroke: .017em currentColor;
  margin: .08em 0 0;
}
main :is(div, header).text-center:has(> .eyebrow + h1),
main :is(div, header).items-center:has(> .eyebrow + h1) { align-items: center; }
main :is(div, header):has(> .eyebrow + h1:not(.ak-hero-h1)) > .eyebrow::before,
main :is(div, header):has(> .eyebrow + h1:not(.ak-hero-h1)) > .eyebrow::after { display: none; }

/* Premium tour page (single-safari_package-lux.php prints its own CSS
   inline, scoped .luxp, hence the extra body/.luxp specificity). */
body .luxp :is(.lx-hero h1, .lx-h2, .lx-cta h2) {
  font-family: var(--ak-sans);
  font-weight: 800;
  font-style: normal;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.1;
}
body .luxp .lx-hero h1 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); max-width: 22ch; }
body .luxp :is(.lx-h2, .lx-cta h2) { font-size: clamp(1.6rem, 2.5vw, 2.3rem); }
body .luxp .lx-h2 { color: var(--ak-title); }
body .luxp :is(.lx-day__title, .lx-modal__title, .lx-incl__card h3, .lx-faq summary, .lx-vcap b, .lx-stay b) {
  font-family: var(--ak-sans);
  font-weight: 700;
  font-style: normal;
  letter-spacing: .005em;
}
body .luxp .lx-day__title { font-size: 1.15rem; }
body .luxp :is(.lx-card__price .v, .lx-price-lead b) { font-family: var(--ak-sans); font-weight: 800; }
body .luxp .lx-eyebrow { font-family: var(--ak-label); font-weight: 700; }
/* Section heads: the label becomes the handwritten line under the title. */
body .luxp :has(> .lx-eyebrow + .lx-h2) { display: flex; flex-direction: column; align-items: flex-start; }
body .luxp :has(> .lx-eyebrow + .lx-h2) > * { order: 2; }
body .luxp :has(> .lx-eyebrow + .lx-h2) > :is(div, p, ul, ol, form) { align-self: stretch; }
body .luxp :has(> .lx-eyebrow + .lx-h2) > .lx-h2 { order: 0; margin-top: 0; }
body .luxp :has(> .lx-eyebrow + .lx-h2) > .lx-eyebrow {
  order: 1;
  font-family: var(--ak-script-font);
  font-weight: 400;
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: .045em;
  text-transform: none;
  -webkit-text-stroke: .017em currentColor;
  color: var(--clay);
  margin: .05em 0 .3rem;
}

/* A section head that opens straight under a page hero (Contact): the
   title now leads, so give it the air the small label used to fake. */
main section.pt-12:has(> .container-x > div > .eyebrow + .display-title) { padding-top: clamp(3.5rem, 6vw, 5rem); }

/* Premium tour page buttons: the same square, tracked labels. */
body .luxp .lx-btn { font-family: var(--ak-label); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; border-radius: 0; }

/* Long-form text (legal pages, posts, itineraries). */
:is(.prose, .entry-content) :is(h2, h3) {
  font-family: var(--ak-sans);
  font-weight: 800;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ak-title);
}
:is(.prose, .entry-content) h2 { font-size: clamp(1.3rem, 1.9vw, 1.65rem); }
:is(.prose, .entry-content) h3 { font-size: 1.08rem; text-transform: none; letter-spacing: .01em; font-weight: 700; }

/* ---------- 8. Footer ---------- */
footer :is(h2, h3, h4) { font-family: var(--ak-label); font-style: normal; }
footer :is(.font-serif, .italic) { font-family: var(--ak-sans); font-style: normal; }

/* ---------- 9. Small screens ---------- */
@media (max-width: 640px) {
  .display-title,
  main h2.font-serif { font-size: clamp(1.45rem, 6.4vw, 1.8rem) !important; letter-spacing: .045em; }
  :is(div, header):has(> .eyebrow + .display-title) > .eyebrow { font-size: 2.1rem; }
  .ak-hero-h1__main { font-size: clamp(1.9rem, 8.6vw, 2.4rem); letter-spacing: .03em; }
  .ak-hero-script { font-size: clamp(2.5rem, 11vw, 3rem); }
  main h1:not(.ak-hero-h1) { font-size: clamp(1.75rem, 7.6vw, 2.2rem) !important; letter-spacing: .03em; }
  .btn { padding: 0 1.2rem; letter-spacing: .14em; }
}