.mm-itin .mm-slot:not(.mm-slot--house) img{filter:saturate(.44) contrast(1.07) brightness(.99)}
.mm-itin .mm-slot:not(.mm-slot--house)::after{content:"";position:absolute;z-index:3;inset:0;
  pointer-events:none;
  background:linear-gradient(168deg,rgba(56,77,52,.14) 0%,rgba(43,59,40,.07) 55%,rgba(123,166,115,.13) 100%);
  mix-blend-mode:multiply}
/* the slot's own placeholder label is drawn by ::after in base.js; when a
   photograph is present that pseudo-element is the grade wash instead, so an
   empty slot puts its label back */
.mm-itin .mm-slot.is-empty::after{content:attr(data-slot);background:none;mix-blend-mode:normal;
  inset:auto 0 auto 0;top:calc(50% + 22px);text-align:center;
  font:400 .5625rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(56,77,52,.3)}

/* ---------- the separator between destinations ----------
   A real element, not an ::after on the link. Generated content inside an <a>
   sits inside that link's own box, so the border-bottom base.js draws under
   every inline link would run under the separator too and turn a row of
   choices into one continuous rule. An element between the links keeps each
   underline the length of its own name. */
.mm-itin .mm-sep{display:inline-block;padding:0 .5em;color:var(--sage);
  -webkit-user-select:none;user-select:none}


/* ---------- hero ---------- */
.mm-ihero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;
  min-height:clamp(500px,74vh,780px)}
.mm-ihero__bg{position:absolute;inset:0;z-index:-2}
.mm-ihero__bg .mm-slot{width:100%;height:100%;border-radius:0}
.mm-ihero__bg .mm-slot img{height:100%;object-position:50% 56%;
  filter:saturate(.5) contrast(1.05) brightness(.82)}
.mm-ihero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(26,38,24,.34) 0%,rgba(26,38,24,.5) 44%,rgba(26,38,24,.9) 100%)}
.mm-ihero__inner{width:100%;padding-block:clamp(2.75rem,6vw,5rem)}
.mm-ihero h1{color:var(--paper);margin:1.35rem 0 0;max-width:17ch;
  font-size:clamp(2.4rem,1.15rem + 4.4vw,5.4rem);line-height:.94;letter-spacing:-.042em}
.mm-ihero h1 em{font-style:italic;color:var(--sage-soft)}
.mm-itin .mm-ihero__sub{margin:1.6rem 0 0;max-width:54ch;
  font-size:clamp(1rem,.95rem + .4vw,1.2rem);line-height:1.75;color:rgba(243,255,239,.82);font-weight:300}
.mm-ihero__meta{display:flex;flex-wrap:wrap;gap:.75rem 2.75rem;margin-top:clamp(1.75rem,3.5vw,2.5rem);
  padding-top:1.25rem;border-top:1px solid var(--hair-light)}
.mm-ihero__meta b{display:block;font-family:var(--serif);font-weight:400;color:var(--paper);
  font-size:clamp(1.35rem,1.2rem + .6vw,1.75rem);line-height:1;letter-spacing:-.02em;margin-bottom:.45rem}
.mm-ihero__meta span{display:block;font:500 .625rem/1.4 var(--sans);letter-spacing:.22em;
  text-transform:uppercase;color:rgba(243,255,239,.66)}

/* ---------- the filter ----------
   Sticky beneath the site's own navbar, whose height chrome.js measures at
   runtime into --mm-nav. */
.mm-ifilter{position:sticky;top:var(--mm-nav,88px);z-index:30;
  background:rgba(243,255,239,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-block:1px solid var(--hair);transition:box-shadow .4s var(--ease)}
.mm-ifilter.is-stuck{box-shadow:0 16px 36px -32px rgba(56,77,52,.9)}
.mm-ifilter__row{display:grid;gap:.85rem clamp(1.25rem,3vw,2.5rem);
  padding-block:clamp(.85rem,1.8vw,1.15rem);align-items:center}
@media(min-width:1040px){.mm-ifilter__row{grid-template-columns:minmax(0,1fr) auto auto}}

.mm-ifilter__regions{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.35rem clamp(.9rem,2.2vw,1.75rem);min-width:0}
.mm-ifilter__regions button{appearance:none;border:0;background:transparent;cursor:pointer;
  padding:.3rem 0;position:relative;font:500 .625rem/1.3 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:color .3s var(--ease)}
.mm-ifilter__regions button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--deep);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--slow)}
.mm-ifilter__regions button:hover{color:var(--deep)}
.mm-ifilter__regions button.is-on{color:var(--deep)}
.mm-ifilter__regions button.is-on::after{transform:scaleX(1)}
.mm-ifilter__regions button:focus-visible{outline:1.5px solid var(--sage);outline-offset:3px}

/* the field: a rule and a mark, not a box */
.mm-ifilter__find{display:flex;align-items:center;gap:.6rem;min-width:min(100%,15rem);
  border-bottom:1px solid var(--line);padding-bottom:.4rem;transition:border-color .3s var(--ease)}
.mm-ifilter__find:focus-within{border-bottom-color:var(--sage)}
.mm-ifilter__find i{font-size:.8rem;color:var(--sage);flex:none}
.mm-ifilter__find input{flex:1 1 auto;min-width:0;appearance:none;border:0;background:transparent;
  font:400 .9375rem/1.4 var(--sans);color:var(--deep);padding:0}
.mm-ifilter__find input::placeholder{color:var(--muted);opacity:1}
.mm-ifilter__find input:focus{outline:0}
.mm-ifilter__find input::-webkit-search-cancel-button{-webkit-appearance:none}
.mm-ifilter__clear{appearance:none;border:0;background:transparent;cursor:pointer;padding:0 0 0 .35rem;
  font-size:.9rem;line-height:1;color:var(--muted);flex:none;visibility:hidden}
.mm-ifilter__find.has-value .mm-ifilter__clear{visibility:visible}
.mm-ifilter__clear:hover{color:var(--deep)}

.mm-ifilter__count{font:500 .625rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage-ink);white-space:nowrap}
@media(max-width:1039px){
  .mm-ifilter__row{grid-template-columns:minmax(0,1fr) auto}
  .mm-ifilter__regions{grid-column:1/-1;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:.15rem}
  .mm-ifilter__regions::-webkit-scrollbar{display:none}
}

/* nothing matched */
.mm-iempty{padding-block:clamp(3rem,7vw,5rem);text-align:center}
.mm-iempty h3{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--deep);
  font-size:clamp(1.35rem,1.2rem + .9vw,1.9rem);line-height:1.2;margin:0 0 .75rem;letter-spacing:-.024em}
.mm-itin .mm-iempty p{color:var(--muted);font-size:.9375rem;margin:0}

/* The filter hides by class, not by the hidden attribute: every card in these
   concepts sets its own display, and "[hidden]{display:none}" from the user
   agent is the one rule a class selector outranks by accident. */
.mm-itin [data-card].is-off,
.mm-itin [data-country].is-off,
.mm-itin [data-region].is-off{display:none}

/* A region is a scroll target for the filter's own jump, so it has to clear
   both the site navbar and the filter bar sitting under it. */
.mm-itin [data-region]{scroll-margin-top:190px}


.i4{background:var(--paper)}

/* ---------- the roster ---------- */
.i4-roster{padding-block:clamp(2.5rem,5vw,4rem);background:#F3FFEF}
.i4-region+.i4-region{margin-top:clamp(3.25rem,6.5vw,5.5rem)}
.i4-region__head{max-width:64ch;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.i4-region__head h2{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--deep);
  font-size:clamp(1.75rem,1.35rem + 2vw,3rem);line-height:1;letter-spacing:-.034em;margin:0}
.i4-region__rule{display:block;width:2.5rem;height:1px;background:var(--line);margin:1.15rem 0}
.i4 .i4-region__note{margin:0;font-size:clamp(1.05rem,1rem + .45vw,1.3rem);line-height:1.75;
  color:var(--ink-2);font-weight:300}
.i4-region__count{display:block;margin-top:1rem;font:500 .625rem/1 var(--sans);letter-spacing:.22em;
  text-transform:uppercase;color:var(--sage-ink)}

.i4-country+.i4-country{margin-top:clamp(2rem,4vw,3rem)}
.i4-country__name{display:flex;align-items:center;gap:1rem;margin:0 0 clamp(1rem,2vw,1.5rem);
  font:500 .625rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--sage-ink)}
.i4-country__name::after{content:"";flex:1 1 auto;height:1px;background:var(--hair)}
.i4-grid{display:grid;gap:clamp(1.25rem,2.6vw,2.25rem);grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:860px){.i4-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- the entry ---------- */
.i4-entry{display:flex;flex-direction:column}
.i4-entry__media{margin:0 0 clamp(.95rem,2vw,1.35rem);overflow:hidden;border:1px solid var(--hair);
  background:var(--mist);display:flex;height:clamp(150px,18vw,205px)}
.i4-entry__media .mm-slot{flex:1 1 0;min-width:0;height:100%;border-radius:0}
.i4-entry__media .mm-slot img{height:100%;transition:transform 1.4s var(--slow)}
.i4-entry:hover .mm-slot img{transform:scale(1.04)}
.i4-entry--bare .i4-entry__media{background:linear-gradient(158deg,#E7F4E2 0%,#D8ECD2 60%,#C9E3C1 100%)}
.i4-entry h3{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--deep);
  font-size:clamp(1.45rem,1.2rem + 1.1vw,2.1rem);line-height:1.04;letter-spacing:-.032em;margin:0}
.i4-entry__with{display:block;margin-top:.4rem;font-family:var(--sans);font-style:normal;
  font-size:.75rem;line-height:1.5;letter-spacing:.01em;color:var(--muted)}
/* the destinations as a written line: serif, italic, commas and an "and" */
.i4 .i4-entry__to{margin:.85rem 0 0;font-family:var(--serif);font-style:italic;
  font-size:clamp(1rem,.95rem + .4vw,1.2rem);line-height:1.6;letter-spacing:-.008em;color:var(--ink-2)}
.i4-entry__to .mm-sep{padding:0 .3em 0 0;color:var(--muted)}
.i4-entry__to .mm-sep--and{padding:0 .32em;color:var(--muted)}
.i4-entry__note{display:block;margin-top:.4rem;font-family:var(--sans);font-style:normal;
  font-size:.75rem;line-height:1.6;color:var(--muted)}

/* ---------- the spread ----------
   The lead city of a country, full measure, photograph on one side and type
   on the other — and the side alternates so no two spreads on a page are the
   same shape. */
@media(min-width:860px){
  .i4-entry--spread{grid-column:1/-1;display:grid;gap:clamp(1.75rem,3.5vw,3.25rem);
    grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center}
  .i4-entry--spread.is-flip .i4-entry__media{order:2}
  .i4-entry--spread .i4-entry__media{margin:0;height:clamp(260px,30vw,380px)}
  .i4-entry--spread h3{font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem)}
  .i4 .i4-entry--spread .i4-entry__to{font-size:clamp(1.15rem,1rem + .7vw,1.5rem);line-height:1.55;
    margin-top:1.15rem}
  .i4-entry--spread .i4-entry__label{display:block;margin-bottom:.9rem;font:500 .5625rem/1 var(--sans);
    letter-spacing:.28em;text-transform:uppercase;color:var(--sage-ink)}
}
.i4-entry__label{display:none}

/* ---------- close ---------- */
.i4-outro{padding-block:clamp(3.5rem,7.5vw,5.5rem);text-align:center;background:#E1F0DC}
.i4-outro h2{font-style:italic;font-size:clamp(1.95rem,1.4rem + 2.4vw,3.4rem);line-height:1.02;
  letter-spacing:-.036em;margin:1.25rem auto 1.1rem;max-width:20ch}
.i4 .i4-outro p{color:var(--ink-2);max-width:56ch;margin:0 auto;line-height:1.8}
.i4-outro__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;
  margin-top:clamp(2rem,4vw,2.75rem)}
.i4-outro .mm-ornament{opacity:.55}