.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}


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

/* ---------- the catalogue ---------- */
.i5-roster{padding-block:clamp(2.5rem,5vw,4rem);background:#F3FFEF}
.i5-region+.i5-region{margin-top:clamp(2.75rem,5.5vw,4.25rem)}
.i5-region__head{display:grid;gap:.6rem 1.5rem;align-items:baseline;padding-bottom:.8rem;
  margin-bottom:clamp(1.25rem,2.5vw,1.85rem);border-bottom:1px solid var(--deep);
  grid-template-columns:auto minmax(0,1fr) auto}
.i5-region__no{font-family:var(--serif);font-weight:400;font-size:1.15rem;line-height:1;
  color:var(--sage);letter-spacing:.02em}
.i5-region__head h2{font:500 .75rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;
  color:var(--deep);margin:0}
.i5-region__head>span:last-child{font:400 .625rem/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.i5 .i5-region__note{grid-column:2/-1;margin:.4rem 0 0;max-width:62ch;font-family:var(--serif);
  font-style:italic;font-size:clamp(1.05rem,1rem + .45vw,1.25rem);line-height:1.55;color:var(--sage-ink)}
@media(max-width:700px){
  .i5-region__head{grid-template-columns:auto minmax(0,1fr)}
  .i5-region__head>span:last-child{grid-column:1/-1}
  .i5 .i5-region__note{grid-column:1/-1}
}

.i5-country{margin-top:clamp(1.35rem,2.6vw,1.9rem)}
.i5-country__name{margin:0 0 .9rem;padding-bottom:.5rem;border-bottom:1px solid var(--hair);
  font:500 .5625rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--sage-ink)}
.i5-grid{display:grid;gap:clamp(.85rem,1.8vw,1.35rem);grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:640px){.i5-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.i5-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- the entry ----------
   A plate inside a double frame with the caption beneath it, in the space the
   frame leaves. The outer rule is the mount and the inner one is the plate
   edge — the two together are what a printed plate actually looks like, and
   one rule on its own only ever looks like a box.

   No type is laid over a photograph anywhere in this concept. That single
   rule is why the pictures read as plates rather than banners. */
.i5-entry{border:1px solid var(--line-soft);background:var(--paper);
  padding:clamp(.55rem,1.2vw,.85rem);display:flex;flex-direction:column;
  transition:border-color .45s var(--ease),box-shadow .55s var(--slow)}
.i5-entry:hover{border-color:var(--sage);box-shadow:0 22px 44px -38px rgba(38,54,35,.75)}
.i5-entry__frame{border:1px solid var(--hair);padding:3px;background:var(--paper)}
.i5-entry__media{margin:0;overflow:hidden;display:flex;height:clamp(108px,12.5vw,146px);
  background:var(--mist)}
.i5-entry__media .mm-slot{flex:1 1 0;min-width:0;height:100%;border-radius:0}
.i5-entry__media .mm-slot img{height:100%;transition:transform 1.5s var(--slow)}
.i5-entry:hover .i5-entry__media .mm-slot img{transform:scale(1.05)}

/* the plate line, set the way a catalogue sets one: number, rule, count */
.i5-entry__plate{display:flex;align-items:center;gap:.6rem;margin:clamp(.8rem,1.6vw,1.05rem) .2rem .55rem}
.i5-entry__no{font:500 .5rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage);white-space:nowrap}
.i5-entry__plate::after{content:"";flex:1 1 auto;height:1px;background:var(--hair)}
.i5-entry__n{font:400 .5rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}

.i5-entry__cap{padding:0 .2rem .2rem;flex:1 1 auto}
.i5-entry__city{display:block;font:500 .6875rem/1.4 var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--deep)}
.i5-entry__with{display:block;margin-top:.22rem;font:400 .6875rem/1.5 var(--sans);letter-spacing:.01em;
  text-transform:none;color:var(--muted)}
/* A hanging indent: the destinations run on from the city the way an index
   entry runs on from its headword, and the turn line sits clear of it. */
.i5 .i5-entry__to{margin:.6rem 0 0;padding-left:.9rem;text-indent:-.9rem;
  font-size:.8125rem;line-height:1.8;color:var(--ink-2)}
.i5-entry__to a{white-space:nowrap}
.i5-entry__to .mm-sep{padding:0 .35em}
.i5-entry__note{display:block;margin-top:.3rem;font-size:.75rem;line-height:1.55;color:var(--muted);
  font-style:italic;text-indent:0}

/* ---------- colophon ---------- */
.i5-outro{padding-block:clamp(3rem,6.5vw,5rem);background:#E1F0DC}
.i5-outro__frame{border:1px solid var(--line);padding:clamp(1.75rem,4vw,3.25rem);text-align:center}
.i5-outro h2{font-size:clamp(1.6rem,1.3rem + 1.6vw,2.6rem);line-height:1.06;letter-spacing:-.03em;
  margin:1.15rem auto 1rem;max-width:22ch}
.i5 .i5-outro p{color:var(--ink-2);max-width:56ch;margin:0 auto;line-height:1.8}
.i5-outro__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;
  margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.i5-outro .mm-ornament{opacity:.55}