/* ============================================================
   KILIMANJARO NATURE TOURS, v3 additions.
   Everything the multi-page rebuild needed: the trust bar, hub and
   destination pages, the enquiry form, the tour key-facts bar and the
   inclusions list. Loaded after site.css, which owns the palette and
   the components the home page already used.
   ============================================================ */

:root{
  --topbar-h:34px;
  --ok:#3E7C3E;
  --no:rgba(43,27,16,.34);
}

/* ---------------- announcement bar ---------------- */
.topbar{
  position:fixed;inset:0 0 auto;z-index:82;height:var(--topbar-h);
  background:var(--espresso-deep);color:rgba(240,238,233,.72);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;
  display:flex;align-items:center
}
.topbar__inner{display:flex;align-items:center;gap:1rem;width:100%}
.topbar a{text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:.5rem;transition:color .25s}
.topbar a:hover{color:var(--stone)}
.topbar b{color:var(--stone);font-weight:700}
.topbar .stars{display:inline-flex;gap:1px}
.topbar .stars svg{width:11px;height:11px;fill:var(--amber)}
.topbar__sep{flex:none;width:1px;height:12px;background:rgba(240,238,233,.2)}
.topbar__wa{margin-left:auto}
.topbar__wa svg{width:13px;height:13px;fill:currentColor}
@media (max-width:900px){
  :root{--topbar-h:0px}
  .topbar{display:none}
}
@media (max-width:1100px){
  .topbar__awards,.topbar__sep{display:none}
}

/* the fixed header now sits under the bar */
.header{top:var(--topbar-h)}

/* ---------------- header: the second CTA rung ---------------- */
.header__cta{display:flex;align-items:center;gap:.6rem}
.header__cta .btn{padding:.8rem 1.3rem;font-size:.74rem}
@media (max-width:1180px){
  .header__quote{display:none}
}

/* ---------------- the fixed bar pushes every hero down ---------------- */
.hero__inner{padding-top:calc(var(--topbar-h) + 9rem)}
.tourhero .wrap{padding-top:calc(var(--topbar-h) + 7rem + clamp(1rem,3vw,2rem))}

/* a breadcrumb that opens a page would otherwise sit behind the header */
#main>.breadcrumb:first-child{padding-top:calc(var(--topbar-h) + 6.2rem)}
@media (max-width:900px){
  #main>.breadcrumb:first-child{padding-top:5.6rem}
}

/* ---------------- page hero ---------------- */
.pagehero{
  position:relative;min-height:clamp(300px,42vh,440px);display:flex;align-items:flex-end;
  color:var(--stone);isolation:isolate;overflow:hidden;background:var(--espresso-deep)
}
.pagehero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pagehero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(15,7,3,.88) 0%,rgba(15,7,3,.3) 60%,rgba(15,7,3,.08) 100%)}
.pagehero .wrap{padding-block:calc(var(--topbar-h) + 7rem) clamp(2rem,4vw,3rem)}
.pagehero h1{font-size:var(--t-xl);max-width:20ch;text-wrap:balance;text-shadow:0 2px 30px rgba(10,5,2,.55)}
.pagehero p{margin-top:.8rem;font-size:var(--t-sm);text-transform:none;color:rgba(240,238,233,.88);max-width:52ch;line-height:1.6}

/* ---------------- prose and small type ---------------- */
.prose{padding-block:clamp(3rem,6vw,5rem)}
.prose .wrap>*+*{margin-top:1.2rem}
.prose p,.prose li{color:var(--ink-soft);font-size:1.02rem;line-height:1.75;max-width:64ch}
.prose h2{font-size:var(--t-row);margin-top:2.4rem}
.prose h3{font-size:1.15rem;text-transform:none;letter-spacing:-.005em;margin-top:1.8rem}
.prose ul{list-style:disc;padding-left:1.3rem}
.prose a{color:var(--acacia)}

.lead{color:var(--ink-soft);font-size:1.02rem;line-height:1.7;max-width:60ch;margin-top:1rem}
.lead a{color:var(--acacia)}
.backlink{margin-top:1.6rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}
.backlink a{color:var(--ink-faint);text-decoration:none}
.backlink a:hover{color:var(--acacia)}

.say__promise{margin-top:1rem}

/* an editor-only note, never shown to visitors */
.knt-todo{
  margin-top:1.6rem;padding:.9rem 1.1rem;border:1px dashed var(--amber);border-radius:4px;
  background:rgba(201,137,29,.07);color:var(--ink-soft);font-size:.86rem;line-height:1.6;max-width:64ch
}
.knt-todo a{color:var(--acacia)}

/* ---------------- proof grid ---------------- */
.proof__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1.6rem,3vw,2.4rem);margin-top:2.4rem}
.proof__item h3{font-size:1.02rem;text-transform:none;letter-spacing:-.005em;font-weight:700;line-height:1.3}
.proof__item p{margin-top:.6rem;color:var(--ink-soft);font-size:.94rem;line-height:1.65}
.proof__item a{color:var(--acacia)}
.proof .say__cta{margin-top:2.6rem}

/* ---------------- destinations ---------------- */
.parkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-top:2.4rem}
.parkcard{
  position:relative;display:flex;align-items:flex-end;aspect-ratio:4/3;overflow:hidden;border-radius:3px;
  text-decoration:none;color:var(--stone);isolation:isolate;background:var(--espresso-deep)
}
.parkcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s var(--ease)}
.parkcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(15,7,3,.82) 0%,rgba(15,7,3,.15) 65%,transparent 100%)}
.parkcard:hover img{transform:scale(1.05)}
.parkcard span{
  padding:1rem;font-family:var(--display);font-weight:700;font-size:.95rem;line-height:1.25;
  text-shadow:0 2px 18px rgba(10,5,2,.6)
}
.parkgrid--lg{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.parkcard--lg{aspect-ratio:3/2}
.parkcard--lg span{font-size:1.1rem;padding:1.3rem}

/* ---------------- comparison table ---------------- */
.table-scroll{overflow-x:auto;margin-top:2.4rem;-webkit-overflow-scrolling:touch}
.ctable{width:100%;border-collapse:collapse;min-width:600px;font-size:.92rem}
.ctable th,.ctable td{text-align:left;padding:.95rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.ctable thead th{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;border-bottom:1px solid var(--ink-faint)
}
.ctable tbody th{font-family:var(--display);font-weight:700;font-size:.98rem}
.ctable tbody th a{color:var(--ink);text-decoration:none}
.ctable tbody th a:hover{color:var(--acacia)}
.ctable td{color:var(--ink-soft)}
.ctable tbody tr:hover{background:rgba(62,124,62,.04)}
.ctable__ask{color:var(--ink-faint)}
.ctable__go{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--acacia);text-decoration:none;white-space:nowrap}

/* ---------------- price on a card ---------------- */
.pricetag{
  display:block;margin-top:.35rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--acacia);font-weight:600
}

/* ---------------- tour page: key facts + section nav ---------------- */
.facts{border-bottom:1px solid var(--line);background:var(--stone)}
.facts__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.4rem;padding-block:1.4rem
}
.facts__list{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,3vw,2.8rem);margin:0}
.facts__list dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.facts__list dd{margin:.25rem 0 0;font-family:var(--display);font-weight:700;font-size:.98rem;line-height:1.25}
.facts__cta{display:flex;flex-wrap:wrap;gap:.6rem}
.facts__cta .btn{padding:.85rem 1.4rem;font-size:.74rem}

.subnav{position:sticky;top:calc(var(--topbar-h) + 3.4rem);z-index:60;background:var(--stone);border-bottom:1px solid var(--line)}
.subnav__inner{display:flex;gap:clamp(1rem,2.4vw,2rem);overflow-x:auto;scrollbar-width:none;padding-block:.9rem}
.subnav__inner::-webkit-scrollbar{display:none}
.subnav a{
  white-space:nowrap;text-decoration:none;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);transition:color .25s
}
.subnav a:hover{color:var(--acacia)}
@media (max-width:900px){
  .subnav{top:0}
}

.tourbody h2{font-size:var(--t-row);margin-top:3.2rem;margin-bottom:1.2rem}
.tourbody__grid>div>div:first-child h2:first-child{margin-top:0}
.tourbody__note{margin-top:2rem;font-size:.8rem;color:var(--ink-faint)}
.tourbody__price{margin-top:.9rem;font-family:var(--display);font-weight:900;font-size:1.4rem;letter-spacing:-.01em;color:var(--acacia)}
.tourbody__price--ask{color:var(--ink-faint);font-size:1.05rem;font-weight:700}
.tourbody__promise{margin-top:1.4rem;font-size:.8rem;color:var(--ink-faint);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.tourbody__promise .review__stars svg{width:12px;height:12px;fill:var(--amber)}
.tourbody__card .say__cta{flex-direction:column;align-items:stretch}
.tourbody__card .say__cta .btn{width:100%}

.highlights ul{margin-top:1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem 2rem}
.highlights li{
  position:relative;padding-left:1.4rem;color:var(--ink-soft);font-size:.95rem;line-height:1.6
}
.highlights li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--amber)}

.incl__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);margin-top:1rem}
.incl__grid ul{display:flex;flex-direction:column;gap:.7rem}
.incl__grid li{display:flex;gap:.7rem;align-items:flex-start;font-size:.94rem;line-height:1.55;color:var(--ink-soft)}
.incl__grid svg{width:16px;height:16px;flex:none;margin-top:.22em}
.incl__yes svg{color:var(--ok)}
.incl__no{color:var(--no)}
.incl__no svg{color:var(--no)}
.incl__no li{color:var(--ink-faint)}
@media (max-width:640px){
  .incl__grid{grid-template-columns:1fr}
}

.related{border-top:1px solid var(--line)}

/* ---------------- enquiry form ---------------- */
.plan__grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){
  .plan__grid{grid-template-columns:1fr}
}
.plan__aside h2{font-size:1.3rem;text-transform:none;letter-spacing:-.005em}
.plan__aside h3{font-size:1rem;text-transform:none;letter-spacing:-.005em;margin-bottom:.8rem}
.steps{counter-reset:step;margin-top:1.4rem;display:flex;flex-direction:column;gap:1rem}
.steps li{
  counter-increment:step;position:relative;padding-left:2.2rem;
  color:var(--ink-soft);font-size:.94rem;line-height:1.6
}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:0;
  width:1.55rem;height:1.55rem;border-radius:50%;background:var(--espresso);color:var(--stone);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:.7rem
}
.steps strong{color:var(--ink)}
.plan__direct{margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line)}
.plan__direct .btn{width:100%}
.plan__direct p{margin-top:1.2rem;font-size:.9rem;line-height:1.8;color:var(--ink-soft)}
.plan__direct a{color:var(--acacia);text-decoration:none}
.plan__trust{margin-top:2rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-size:.85rem;color:var(--ink-soft)}
.plan__trust .review__stars{display:inline-flex;gap:1px}
.plan__trust .review__stars svg{width:13px;height:13px;fill:var(--amber)}
.plan__trust a{color:var(--acacia)}

.kntform{display:flex;flex-direction:column;gap:1.1rem}
.kntform__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:560px){
  .kntform__row{grid-template-columns:1fr}
}
.kntform label{
  display:flex;flex-direction:column;gap:.4rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)
}
.kntform label span{color:var(--amber);margin-left:.15em}
.kntform input,.kntform select,.kntform textarea{
  font:inherit;font-family:var(--sans);font-size:.95rem;text-transform:none;letter-spacing:0;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:3px;padding:.8rem .9rem;width:100%
}
.kntform textarea{resize:vertical;min-height:120px}
.kntform input:focus,.kntform select:focus,.kntform textarea:focus{outline:2px solid var(--acacia);outline-offset:1px;border-color:transparent}
.kntform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kntform__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.4rem}
.kntform__foot span{font-size:.85rem;color:var(--ink-faint)}
.kntform__foot a{color:var(--acacia)}
.kntform__ok,.kntform__err{padding:1rem 1.2rem;border-radius:3px;font-size:.94rem;line-height:1.6}
.kntform__ok{background:rgba(62,124,62,.1);border:1px solid rgba(62,124,62,.35);color:var(--acacia-deep)}
.kntform__err{background:rgba(201,137,29,.12);border:1px solid rgba(201,137,29,.4);color:var(--espresso)}
.kntform__ctx{font-size:.88rem;color:var(--ink-soft)}
.kntform--compact .kntform__row{grid-template-columns:1fr}

/* ---------------- reviews page ---------------- */
.ratingcard{
  display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(2rem,5vw,4rem);
  border:1px solid var(--line);border-radius:4px;padding:clamp(1.8rem,4vw,2.8rem);align-items:center
}
@media (max-width:760px){
  .ratingcard{grid-template-columns:1fr}
}
.ratingcard__num{font-family:var(--display);font-weight:900;font-size:clamp(3.4rem,8vw,4.6rem);line-height:.9;letter-spacing:-.03em}
.ratingcard__score .review__stars{display:flex;gap:2px;margin-top:.7rem}
.ratingcard__score .review__stars svg{width:18px;height:18px;fill:var(--amber)}
.ratingcard__meta{margin-top:.6rem;font-size:.86rem;color:var(--ink-faint)}
.ratingcard__score .btn{margin-top:1.4rem}
.ratingcard__awards{display:flex;gap:1rem;align-items:center;margin-top:1.6rem;flex-wrap:wrap}
.ratingbar{display:grid;grid-template-columns:6.5rem 1fr 2.4rem;align-items:center;gap:.9rem;margin-bottom:.7rem}
.ratingbar__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
.ratingbar__track{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.ratingbar__fill{display:block;height:100%;background:var(--acacia);border-radius:4px}
.ratingbar__count{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);text-align:right}

/* ---------------- about: licences row ---------------- */
.orgrow{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.4rem,3vw,2.4rem);margin-top:2.4rem}
.orgrow img{height:40px;width:auto;filter:grayscale(1);opacity:.6;transition:opacity .3s,filter .3s}
.orgrow img:hover{opacity:1;filter:none}
.orgrow .award{height:52px;filter:none;opacity:1;border-radius:3px}

/* ---------------- legal ---------------- */
.legal h1{font-size:var(--t-row);margin-bottom:1.6rem}
.legal p,.legal li{color:var(--ink-soft);font-size:.98rem;line-height:1.75;max-width:66ch}
.legal p+p,.legal ul,.legal h2,.legal h3{margin-top:1.2rem}
.legal h2{font-size:1.25rem;text-transform:none;letter-spacing:-.005em;margin-top:2.4rem}
.legal ul{list-style:disc;padding-left:1.3rem}
.legal a{color:var(--acacia)}
.legal__contact{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line);font-size:.9rem}

/* the review star row is right-aligned inside a review card; everywhere else
   it sits inline with the text next to it */
.tourbody__promise .review__stars,
.plan__trust .review__stars,
.ratingcard__score .review__stars{margin-left:0}

/* ---------------- footer: five link columns ---------------- */
.footer__cols{grid-template-columns:1.3fr repeat(5,1fr)}
@media (max-width:1080px){
  .footer__cols{grid-template-columns:1fr 1fr 1fr;row-gap:2.4rem}
  .footer__col--brand{grid-column:1 / -1}
}
@media (max-width:640px){
  .footer__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:440px){
  .footer__cols{grid-template-columns:1fr}
}
.footer__legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---------------- sticky bar: two rungs ---------------- */
.sticky{display:none}
@media (max-width:900px){
  .sticky{display:flex;gap:.5rem}
  .sticky .btn{flex:1 1 0;width:auto;padding-inline:.8rem;font-size:.72rem}
}

/* ---------------- dropdown: stop it snapping shut ----------------
   The panel sits 1rem below the menu item, and that gap was a dead zone: the
   mouse left the trigger before it reached the panel, :hover was lost and the
   menu closed. Two fixes, both needed.

   1. An invisible bridge across the gap, so the pointer never leaves the
      hoverable area on the way down.
   2. A quarter-second delay on closing only. Opening stays instant, but a
      pointer that clips a corner on the way to a link no longer kills it. */

.navdrop__panel::before{
  content:"";position:absolute;left:0;right:0;top:-1.4rem;height:1.4rem
}
/* the delay in the base rule applies when leaving */
.navdrop__panel{
  transition:opacity .2s var(--ease) .28s,visibility .2s .28s,transform .2s var(--ease) .28s
}
/* and is cancelled on the way in, so it still opens immediately */
.navdrop:hover .navdrop__panel,
.navdrop:focus-within .navdrop__panel{
  transition-delay:0s
}
/* a wider hit area on the trigger itself */
.navdrop>a{display:inline-block;padding-block:.5rem}

/* ============================================================
   TRAVEL GUIDE
   ============================================================ */

.artgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1.6rem,3vw,2.4rem);margin-top:2.4rem}
.artcard{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.artcard__thumb{aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:var(--espresso-deep)}
.artcard__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.artcard:hover .artcard__thumb img{transform:scale(1.05)}
.artcard__cat{
  margin-top:.9rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acacia)
}
.artcard h3{
  margin-top:.4rem;font-family:var(--display);font-weight:700;text-transform:none;
  letter-spacing:-.008em;font-size:1.05rem;line-height:1.3
}
.artcard:hover h3{color:var(--acacia)}
.artcard__meta{
  margin-top:.5rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-faint)
}

/* the four clusters on the guide hub */
.clusters{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(2rem,4vw,3rem);margin-top:2.4rem}
.cluster{border-top:1px solid var(--line);padding-top:1.6rem}
.cluster__head{display:flex;gap:1.1rem;text-decoration:none;color:inherit;align-items:flex-start}
.cluster__head img{width:88px;height:88px;flex:none;object-fit:cover;border-radius:3px}
.cluster__head h3{font-size:1.15rem;text-transform:none;letter-spacing:-.008em}
.cluster__head p{margin-top:.4rem;color:var(--ink-soft);font-size:.9rem;line-height:1.55}
.cluster__head:hover h3{color:var(--acacia)}
.cluster__list{margin-top:1.2rem;display:flex;flex-direction:column;gap:.55rem}
.cluster__list a{
  text-decoration:none;color:var(--ink-soft);font-size:.94rem;line-height:1.45;
  border-bottom:1px solid transparent;transition:color .25s
}
.cluster__list a:hover{color:var(--acacia)}
.cluster__list li{position:relative;padding-left:1rem}
.cluster__list li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--amber)}

/* one article */
.article__meta{
  display:flex;flex-wrap:wrap;gap:1.2rem;padding-block:1.4rem;
  border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)
}
.article__body .wrap>*+*{margin-top:1.3rem}
.article__body h2{font-size:clamp(1.5rem,3vw,2rem);margin-top:2.8rem}
.article__body h3{font-size:1.15rem;margin-top:2rem}
.article__body ul,.article__body ol{list-style:disc;padding-left:1.4rem;display:flex;flex-direction:column;gap:.5rem}
.article__body ol{list-style:decimal}
.article__body blockquote{
  border-left:3px solid var(--amber);padding-left:1.2rem;margin-left:0;
  font-size:1.08rem;line-height:1.6;color:var(--ink)
}
.article__body table{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:1.6rem}
.article__body th,.article__body td{text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.article__body thead th{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500
}
.article__body img{border-radius:3px}

/* pagination and search */
.pager{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:3rem}
.pager a,.pager span{
  min-width:2.6rem;padding:.6rem .9rem;text-align:center;text-decoration:none;border-radius:3px;
  border:1px solid var(--line);font-family:var(--mono);font-size:.72rem;color:var(--ink-soft)
}
.pager a:hover{border-color:var(--acacia);color:var(--acacia)}
.pager .current{background:var(--espresso);color:var(--stone);border-color:var(--espresso)}

.searchform{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;margin-bottom:2.4rem}
.searchform label{
  flex:0 0 100%;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)
}
.searchform input{
  flex:1 1 260px;font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:3px;padding:.8rem .9rem
}
.searchform input:focus{outline:2px solid var(--acacia);outline-offset:1px;border-color:transparent}

/* ---------------- language switcher ---------------- */
.langs{display:flex;align-items:center;gap:.15rem}
.langs__item{
  padding:.3rem .45rem;border-radius:2px;text-decoration:none;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--stone);opacity:.62;transition:opacity .25s,background .25s
}
.langs__item:hover{opacity:1}
.langs__item.is-current{opacity:1;color:var(--amber)}
.header.is-stuck .langs__item{color:var(--ink)}
.header.is-stuck .langs__item.is-current{color:var(--acacia)}
.langs--drawer{margin-top:auto;padding-top:1.6rem;gap:.4rem}
.langs--drawer .langs__item{font-size:.9rem;padding:.4rem .6rem;border:1px solid rgba(240,238,233,.2)}
@media (max-width:900px){
  .langs--header{display:none}
}