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


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

/* ---------- the roster ---------- */
.i2-roster{padding-block:clamp(2.5rem,5vw,4rem);background:#F3FFEF}
.i2-region+.i2-region{margin-top:clamp(3rem,6vw,5rem)}
.i2-region__head{display:grid;gap:.75rem 3rem;align-items:end;padding-bottom:1rem;
  margin-bottom:clamp(1.5rem,3vw,2.25rem);border-bottom:1px solid var(--deep)}
@media(min-width:900px){.i2-region__head{grid-template-columns:minmax(0,1fr) auto}}
.i2-region__head h2{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--deep);
  font-size:clamp(1.6rem,1.3rem + 1.5vw,2.5rem);line-height:1;letter-spacing:-.03em;margin:0}
.i2-region__head>span{font:500 .625rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage-ink);white-space:nowrap}
.i2 .i2-region__note{margin:1rem 0 0;max-width:64ch;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,1rem + .45vw,1.3rem);line-height:1.55;color:var(--sage-ink)}

.i2-country+.i2-country{margin-top:clamp(1.75rem,3.5vw,2.75rem)}
.i2-country__name{display:flex;align-items:center;gap:1rem;margin:0 0 1rem;
  font:500 .625rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--sage-ink)}
.i2-country__name::after{content:"";flex:1 1 auto;height:1px;background:var(--hair)}
.i2-list{display:grid;gap:clamp(1rem,2vw,1.5rem)}

/* ---------- the card ----------
   Type on paper one side, photographs the other, and the sides swap on every
   other card so a column of them has a rhythm rather than a repeat. */
.i2-card{display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;
  border:1px solid var(--hair);background:var(--paper);
  transition:border-color .45s var(--ease),box-shadow .55s var(--slow)}
.i2-card:hover{border-color:var(--line);box-shadow:0 26px 52px -42px rgba(38,54,35,.75)}
@media(min-width:920px){
  .i2-card{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)}
  .i2-card:nth-child(even) .i2-type{order:2}
}

.i2-type{padding:clamp(1.4rem,3vw,2.5rem);display:flex;flex-direction:column;justify-content:center}
.i2-type__eyebrow{display:block;font:500 .5625rem/1 var(--sans);letter-spacing:.28em;
  text-transform:uppercase;color:var(--sage-ink);margin-bottom:.85rem}
.i2-type h3{font-family:var(--serif);font-weight:400;color:var(--deep);margin:0;
  font-size:clamp(1.75rem,1.35rem + 1.9vw,2.9rem);line-height:1;letter-spacing:-.036em}
.i2-type__with{display:block;margin-top:.45rem;font:400 .75rem/1.5 var(--sans);letter-spacing:.01em;
  color:var(--muted)}
.i2-type__rule{display:block;width:2.25rem;height:1px;background:var(--line);
  margin:clamp(1rem,2.2vw,1.5rem) 0}
.i2-type__label{display:block;font:500 .5rem/1 var(--sans);letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.85rem}

/* the compass points */
.i2-dests{list-style:none;margin:0;padding:0}
.i2-dests li{position:relative;padding-left:1.35rem}
.i2-dests li+li{margin-top:.55rem}
/* a small diamond rather than a bullet: the same hairline vocabulary as the
   rest of the page, and it reads as a point of the compass */
.i2-dests li::before{content:"";position:absolute;left:0;top:.55em;width:.32rem;height:.32rem;
  border:1px solid var(--sage);transform:rotate(45deg);transition:background .3s var(--ease)}
.i2-dests li:hover::before{background:var(--sage)}
.i2-dests a{font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.i2-dests a:hover{color:var(--deep)}
/* Monaco has eleven; past four the list runs in two columns rather than
   dragging the card to twice the height of its neighbours */
@media(min-width:620px){
  .i2-dests--many{columns:2;column-gap:clamp(1.25rem,2.5vw,2rem)}
  .i2-dests--many li{break-inside:avoid;-webkit-column-break-inside:avoid}
  .i2-dests--many li+li{margin-top:0;margin-bottom:.55rem}
}
.i2-note{display:block;margin-top:.75rem;font-size:.8125rem;line-height:1.6;color:var(--muted);
  font-style:italic}

/* ---------- the mosaic ----------
   Four shapes, chosen by how many photographs the city has. Every one fills
   its frame completely: a hole in a mosaic is the thing that makes a page
   look unfinished. */
.i2-mosaic{display:grid;gap:2px;background:var(--hair);
  grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;
  min-height:clamp(230px,27vw,330px)}
.i2-mosaic--1{grid-template-columns:minmax(0,1fr)}
.i2-mosaic--3>:first-child{grid-row:span 2}
.i2-mosaic .mm-slot{width:100%;height:100%;border-radius:0;min-height:0}
.i2-mosaic .mm-slot img{height:100%;transition:transform 1.5s var(--slow)}
.i2-card:hover .i2-mosaic .mm-slot img{transform:scale(1.05)}
@media(max-width:919px){
  .i2-mosaic{min-height:clamp(200px,42vw,280px)}
}

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