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


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

/* ---------- the roster ---------- */
.i1-roster{padding-block:clamp(2.5rem,5vw,4rem);background:#F3FFEF}
.i1-region+.i1-region{margin-top:clamp(3rem,6vw,5rem)}
.i1-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){.i1-region__head{grid-template-columns:minmax(0,1fr) auto}}
.i1-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}
.i1-region__head span{font:500 .625rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--sage-ink);white-space:nowrap}
.i1 .i1-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)}

.i1-country+.i1-country{margin-top:clamp(1.75rem,3.5vw,2.75rem)}
.i1-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)}
.i1-country__name::after{content:"";flex:1 1 auto;height:1px;background:var(--hair)}
.i1-grid{display:grid;gap:clamp(.85rem,1.8vw,1.35rem);grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:820px){.i1-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- the card ---------- */
.i1-card{display:flex;flex-direction:column;overflow:hidden;background:var(--paper);
  border:1px solid var(--hair);
  transition:border-color .4s var(--ease),transform .5s var(--slow),box-shadow .5s var(--slow)}
.i1-card:hover{border-color:var(--line);transform:translateY(-3px);
  box-shadow:0 24px 48px -38px rgba(38,54,35,.85)}

/* The plate: one cell per photograph, equal width, no gaps. Height, not
   min-height — a slot has no height of its own, so with min-height the flex
   line took its cross size from the image's own ratio and a card with one
   photograph came out twice as deep as a card with four. */
.i1-plate{position:relative;isolation:isolate;display:flex;
  height:clamp(158px,21vw,225px);background:var(--mist)}
.i1-plate>.mm-slot{flex:1 1 0;min-width:0;height:100%;border-radius:0}
.i1-plate>.mm-slot img{height:100%;transition:transform 1.4s var(--slow)}
.i1-card:hover .i1-plate>.mm-slot img{transform:scale(1.05)}
/* a hairline between the photographs, drawn over them so it needs no gap */
.i1-plate>.mm-slot+.mm-slot::before{content:"";position:absolute;z-index:5;left:0;top:0;bottom:0;
  width:1px;background:rgba(243,255,239,.34)}
.i1-plate::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(180deg,rgba(24,35,22,.1) 0%,rgba(24,35,22,.44) 52%,rgba(24,35,22,.86) 100%)}
.i1-plate__name{position:absolute;z-index:7;left:0;right:0;bottom:0;
  padding:clamp(1rem,2.2vw,1.5rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .7rem}
.i1-plate__name b{font-family:var(--serif);font-weight:400;color:var(--paper);
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.35rem);line-height:1;letter-spacing:-.032em}
.i1-plate__name span{font:500 .5625rem/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(243,255,239,.76)}

.i1-card__body{padding:clamp(.95rem,2vw,1.35rem);flex:1 1 auto}
.i1-card__label{display:block;font:500 .5rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;
  color:var(--sage-ink);margin-bottom:.65rem}
.i1 .i1-card__to{margin:0;font-size:.9375rem;line-height:1.8;color:var(--ink-2)}
.i1-card__to a{white-space:nowrap}
.i1-card__note{display:block;margin-top:.5rem;font-size:.8125rem;line-height:1.6;color:var(--muted);
  font-style:italic}

/* ---------- the lead card ----------
   Full measure, a much deeper plate, and the destinations set over the
   photograph instead of under it. One of these opens every country.

   The name lives in exactly one place — inside the over-block. It used to be
   written twice, once here and once as the standalone plate caption, and
   "position:static" on the lead card then dropped the second copy into the
   flex row of photographs: a ghost city name floating at the top right of
   every lead card on the page. */
.i1-plate__over{position:absolute;z-index:7;left:0;right:0;bottom:0;
  padding:clamp(1.1rem,2.4vw,2.5rem);display:grid;gap:.85rem 3rem;align-items:end}
/* Inside the over-block the name is a grid item, not a caption pinned to the
   plate. Without this it keeps the absolute positioning of the standalone
   rule above and lies across the destinations in the next column. */
.i1-plate__over .i1-plate__name{position:static;padding:0}
@media(min-width:820px){
  .i1-card--lead{grid-column:1/-1}
  .i1-card--lead .i1-plate{height:clamp(300px,32vw,420px)}
  .i1-card--lead .i1-plate__over{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .i1-card--lead .i1-plate__name b{font-size:clamp(2.2rem,1.4rem + 2.6vw,3.8rem)}
  .i1-card--lead .i1-card__body{display:none}
  .i1-card--lead .i1-plate__to{margin:0;font-size:1rem;line-height:1.85;color:rgba(243,255,239,.9)}
  .i1-card--lead .i1-plate__to a{color:var(--paper);border-bottom-color:rgba(243,255,239,.42);
    text-decoration-color:rgba(243,255,239,.5);white-space:nowrap}
  .i1-card--lead .i1-plate__to a:hover{border-bottom-color:var(--paper)}
  .i1-card--lead .i1-plate__to .mm-sep{color:var(--sage-soft)}
  .i1-card--lead .i1-plate__over .i1-card__label{color:var(--sage-soft)}
}
/* Below the breakpoint two columns of type will not sit over a photograph, so
   the lead card keeps its name on the plate and hands the destinations back to
   the body underneath — the same shape every other card has. */
@media(max-width:819px){
  .i1-card--lead .i1-plate__over>span:last-child{display:none}
}

/* ---------- close ---------- */
.i1-outro{padding-block:clamp(3.5rem,7.5vw,5.5rem);text-align:center;background:#E1F0DC}
.i1-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}
.i1 .i1-outro p{color:var(--ink-2);max-width:56ch;margin:0 auto;line-height:1.8}
.i1-outro__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;
  margin-top:clamp(2rem,4vw,2.75rem)}
.i1-outro .mm-ornament{opacity:.55}